Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) es una métrica de Core Web Vitals que mide el tiempo desde el inicio de la navegación hasta que el elemento visible más grande del viewport termina de renderizarse. Es la principal aproximación de Google a "cuándo la página parece cargada para el usuario".
Largest Contentful Paint (LCP) es una métrica de Core Web Vitals que mide el tiempo desde el inicio de la navegación hasta que el elemento visible más grande del viewport termina de renderizarse. Es la principal aproximación de Google a "cuándo la página parece cargada para el usuario".
Por qué importa
LCP es uno de los tres Core Web Vitals y una señal de posicionamiento confirmada por Google. Los umbrales de Google: bueno ≤ 2,5 s, necesita mejorar 2,5–4,0 s, deficiente > 4,0 s. Las páginas en la franja "buena" presentan tasas de rebote medibles más bajas y mayor conversión, y no superar el LCP en el percentil 75 puede rebajar el posicionamiento en consultas competitivas.
Qué cuenta como el "elemento más grande"
LCP rastrea el elemento más grande pintado en el viewport visible. Los candidatos elegibles incluyen <img>, los fotogramas de póster de <video>, las imágenes de fondo cargadas mediante url() de CSS y los nodos de texto a nivel de bloque. El elemento "más grande" puede cambiar durante la carga: LCP usa el que resulte ser el elemento más grande final.
Causas comunes de un LCP lento
Respuesta lenta del servidor (TTFB): si el HTML tarda 1,5 s en llegar, el LCP no puede ser inferior a 2,5 s.
Recursos que bloquean el renderizado: el CSS y el JS síncronos en el head retrasan el primer pintado.
Imágenes sin optimizar: la imagen principal suele ser el elemento LCP. Las imágenes sobredimensionadas, sin comprimir o cargadas tarde dominan la mayoría de los fallos de LCP.
Renderizado en el lado del cliente: los frameworks SPA que renderizan en JS tras la hidratación llevan el LCP muy por encima del umbral "bueno".
Carga diferida del elemento LCP: añadir loading="lazy" a la imagen principal es un error común, ya que retrasa el mismísimo elemento que mide el LCP.
Cómo mejorar el LCP
Precargar la imagen principal: <link rel="preload" as="image" href="..."> le da al navegador una ventaja inicial.
Usar formatos de imagen modernos: WebP y AVIF reducen la carga útil entre un 30 y un 50 % frente a JPEG.
Añadir fetchpriority="high" a la imagen principal para que se adelante a los demás recursos.
Servir desde una CDN para reducir el TTFB en usuarios distantes.
Incrustar el CSS crítico y diferir el resto.
Usar SSR o generación estática en lugar del renderizado en el lado del cliente para páginas con mucho contenido.
Almacenar en caché de forma agresiva en el edge para los visitantes recurrentes.
Medición del LCP
Datos de campo: Chrome UX Report (CrUX), el informe de Core Web Vitals de Google Search Console, PageSpeed Insights; estos reflejan a los usuarios reales.
Datos de laboratorio: Lighthouse, WebPageTest, el panel de rendimiento de Chrome DevTools; reproducibles pero sintéticos.
Google posiciona según el percentil 75 de los datos de campo, así que las pruebas sintéticas por sí solas no bastan.
Sources: