LCP (Largest Contentful Paint) es una métrica de Core Web Vitals que mide el tiempo desde la navegación de la página hasta que el elemento de contenido visible más grande se renderiza en la pantalla.
El "elemento de contenido más grande" se determina automáticamente por el navegador; en la mayoría de las páginas de comercio electrónico, es la imagen principal en la página de inicio, PLP o PDP, o el H1 en una página de blog/artículo. Umbrales de 2026: ≤ 2.5s bueno, ≤ 4.0s necesita mejora, > 4.0s pobre.
Soluciones comunes para LCP en comercio electrónico: precargar la imagen LCP con <link rel="preload" as="image" fetchpriority="high">, servir formatos modernos (AVIF/WebP), usar priority en los componentes de imagen de Next.js, renderizar la página del lado del servidor (o transmitir desde el edge), incluir CSS crítico en línea y evitar la carga diferida de la imagen LCP.
LCP está fuertemente influenciado por las condiciones de la red y el rendimiento de la CDN. El renderizado en el edge (TTFB ≤ 100ms) establece un piso estructural que los sitios renderizados en origen monolíticos no pueden igualar.