Qué es LCP: definición y guía completa SEO
LCP (Largest Contentful Paint): Métrica principal de Core Web Vitals que mide el tiempo desde que el usuario inicia la navegación hasta que el elemento de contenido más grande visible en el viewport es renderizado. Es la métrica de rendimiento más directamente relacionada con la percepción de carga del usuario y uno de los tres factores de ranking del Page Experience.
Qué elementos pueden ser el LCP de una página
El LCP se determina como el elemento de contenido más grande dentro del viewport al inicio de la carga. Los candidatos son: imágenes (img, image en SVG), imágenes de fondo cargadas con CSS background-image, bloques de texto (párrafos, encabezados), elementos video con poster. Los elementos más frecuentes como LCP en sitios reales son las imágenes hero (imagen principal above-the-fold), los banners de cabecera, las imágenes de portada de artículos y en landing pages el título H1 de mayor tamaño. Los elementos con position: absolute, opacity: 0 o display: none no son candidatos al LCP porque no están visible en el viewport.
Los umbrales de LCP y su relación con el ranking
Google clasifica el LCP en tres rangos: bueno (≤ 2.5 segundos), necesita mejoras (entre 2.5 y 4 segundos) y lento (> 4 segundos). Para que una URL pase los Core Web Vitals, el LCP debe estar en el rango ‘bueno’ en el percentil 75 de las visitas reales de los últimos 28 días (datos CrUX). El LCP es la métrica con mayor peso en la puntuación de Lighthouse (25% de la puntuación de Performance). En términos de ranking, Google usa el LCP de campo (CrUX) y no el de laboratorio (Lighthouse): una página puede tener un LCP de laboratorio de 1.5s pero un LCP de campo de 3.8s si los servidores de origen tienen alta latencia para los usuarios reales.
Causas más frecuentes de un LCP lento
Un TTFB alto es la causa raíz más común: si el servidor tarda 1.5 segundos en responder con el HTML, el LCP no puede ser menor a eso. Los recursos que bloquean el renderizado (CSS y JS render-blocking en el head) retrasan el inicio del renderizado. La imagen LCP no pre-cargada: si el navegador descubre la imagen LCP tarde (después de ejecutar JS o cargar el CSS que la referencia), el tiempo de descarga se añade al LCP. El lazy load en el elemento LCP es un error frecuente que puede doblar el tiempo de LCP. Imágenes LCP no optimizadas (demasiado grandes, en formato PNG en lugar de WebP, sin compresión) añaden tiempo de descarga directamente al LCP.
Técnicas para mejorar el LCP ordenadas por impacto
La técnica de mayor impacto es el preload de la imagen LCP en el head del HTML: permite al navegador descubrirla y empezar a descargarla antes de procesar el CSS y el JS. Añadir fetchpriority=’high’ a la etiqueta img del LCP le dice al navegador que la priorice sobre otros recursos. Mejorar el TTFB con caché de página y CDN es el siguiente paso. Convertir la imagen LCP a WebP o AVIF reduce su tamaño un 30-50%. Eliminar los recursos render-blocking (con async/defer en scripts y critical CSS inline) permite que el navegador empiece a renderizar antes. Finalmente, asegurarse de que el servidor CDN más cercano al usuario tiene la imagen LCP en caché elimina la latencia de red.
Preguntas frecuentes
¿El LCP siempre es una imagen? ¿Puede ser texto?
Sí puede ser texto. En páginas con poco contenido visual o donde el texto es el elemento más grande del viewport, el LCP puede ser un párrafo o un encabezado H1. En ese caso, el LCP depende principalmente de que el HTML y el CSS lleguen rápido (TTFB bajo y sin CSS render-blocking) y de que la fuente tipográfica esté disponible sin retraso (font-display: optional o preload de la fuente).
¿El LCP cambia entre desktop y móvil?
Sí, y puede ser diferente. En móvil, el viewport es más pequeño, por lo que el elemento más grande en la pantalla puede ser diferente al de escritorio. Además, el elemento LCP en móvil puede ser más pequeño en píxeles pero más lento de cargar debido a conexiones más lentas y menor potencia de CPU. Google mide LCP de forma separada para desktop y móvil en el informe CrUX de GSC.