¿Qué es Largest Contentful Paint (LCP)?

Largest Contentful Paint mide el tiempo que tarda en terminar de renderizarse el elemento de contenido visible más grande por encima del pliegue. En los storefronts de comercio, este elemento es casi siempre la imagen de héroe, una foto de producto en una PDP o el titular de una landing page. LCP es la más citada de las Core Web Vitals porque capta el momento percibido en que una página se siente "lista".

Definición

LCP registra el tiempo de renderizado de la imagen, el póster de vídeo o el bloque de texto más grande dentro del viewport en el primer paint. El valor procede de la API del navegador LargestContentfulPaint, reportado en el percentil 75 a través del Chrome User Experience Report. Google considera buenos los valores de hasta 2,5 segundos, mejorables hasta 4 segundos, y deficientes los que superan ese límite. LCP se ve influido por el Time to First Byte desde el origen de renderizado, el tamaño y la prioridad del recurso LCP, el CSS o JS bloqueante en la ruta crítica, y la hidratación del lado del cliente que retrasa el paint cuando los frameworks se entregan como first-party-JS.

Por qué importa

LCP se correlaciona estrechamente con la conversión. Un retraso de un segundo en una PDP reduce de forma medible las tasas de añadir al carrito y disminuye los ingresos por sesión, especialmente en móvil. Como los activos del héroe dominan la métrica, la image-optimization y la carga priorizada se convierten en intervenciones de alto impacto. LCP también revela decisiones arquitectónicas: una API de comercio ascendente lenta, un origen infradimensionado o un bundle de React sobredimensionado se manifiestan como regresiones de LCP. Como parte de la señal de page-experience, alimenta el search-engine-optimization-seo y se cruza con el trabajo de conversion-rate-optimization-cro.

Casos de uso

Los equipos headless en Next.js o Astro suelen abordar el LCP precargando la imagen de héroe, sirviendo AVIF o WebP desde una content-delivery-network-cdn y renderizando el marcado por encima del pliegue mediante SSR o Edge Rendering en Vercel Edge o Cloudflare Workers. ISR se usa para mantener calientes las PDP y las páginas de categoría, de modo que el recurso LCP se entregue desde caché. Los equipos también adoptan fetchpriority="high" en la imagen LCP, retrasan el first-party-JS no crítico y recortan las etiquetas de terceros cargadas a través de su gestor de etiquetas del content-management-system-cms. Los dashboards de LCP segmentados por plantilla y dispositivo orientan las decisiones de lanzamiento y los casos de negocio de replatforming headless.

Relacionado

Explora Performance and Core Web Vitals · Composable Headless Frontend.