Next.js para e-commerce: Core Web Vitals y conversión

Un segundo de retraso en la carga de una página de producto cuesta conversiones. No es una hipótesis: está medido.

Google reporta que una mejora de 0.1s en el tiempo de carga mobile aumenta las conversiones en un 8% en e-commerce. Para una tienda con volumen, eso es dinero real.

Los tres Core Web Vitals que importan

LCP — Largest Contentful Paint

El tiempo que tarda en renderizarse el elemento más grande de la pantalla. En e-commerce suele ser la imagen del producto.

Objetivo: < 2.5s. Bueno: < 1.5s.

CLS — Cumulative Layout Shift

Cuánto se mueve el contenido mientras carga. Un botón de "Añadir al carrito" que se desplaza cuando el usuario va a pulsarlo es un CLS alto y una venta perdida.

Objetivo: < 0.1.

INP — Interaction to Next Paint

El tiempo que tarda la página en responder a una interacción del usuario. Sustituyó a FID en 2024.

Objetivo: < 200ms.

Cómo los optimizamos en Next.js

Imágenes con next/image

El componente next/image hace automáticamente:

• Conversión a WebP/AVIF
• Lazy loading nativo
• Dimensiones reservadas (evita CLS)
• Preload del LCP candidate

import Image from 'next/image';

<Image
  src="/producto-hero.jpg"
  alt="Nombre del producto"
  width={800}
  height={800}
  priority // Solo en el LCP candidate
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Fuentes con next/font

Las fuentes de terceros (Google Fonts, Adobe) introducen layout shift. next/font las auto-hostea y reserva espacio:

import { Montserrat } from 'next/font/google';

const montserrat = Montserrat({
  subsets: ['latin'],
  display: 'swap', // Evita flash de texto invisible
});

Server Components para datos de producto

Los datos del producto se obtienen en servidor. El HTML llega completo al cliente sin necesidad de skeleton states que causan CLS:

// page.tsx — Server Component por defecto
export default async function ProductPage({ params }) {
  const product = await getProduct(params.slug); // fetch en servidor
  return <ProductDetail product={product} />;
}

Estrategia de caché

// Revalidar cada hora en ISR
export const revalidate = 3600;

// O bajo demanda desde el CMS
export async function POST(request) {
  revalidatePath('/products/[slug]');
}

Resultados reales

En un proyecto de e-commerce reciente (Nexo Consulting):

• LCP pasó de 4.8s a 1.2s en mobile
• CLS de 0.34 a 0.02
• Tasa de conversión: +600% (de 0.3% a 2.1%)

El rendimiento técnico no es un fin en sí mismo. Es la base sobre la que se construye la conversión.

---

Si tu tienda tiene problemas de rendimiento o quieres construirla con el stack correcto desde el principio, contáctanos.