¿Qué mide LCP?

Largest Contentful Paint es una de las tres métricas de Core Web Vitals de Google. Mide el tiempo, en segundos, desde que el usuario empieza a navegar a la URL hasta que el navegador renderiza el elemento de contenido más grande visible en el viewport durante la carga inicial.

El “elemento más grande” puede ser:

Una imagen (<img> o background-image CSS).
Un vídeo con poster (<video poster="...">).
Un bloque de texto extenso (un <h1> largo, un párrafo destacado).
Un elemento con background-image mediante CSS.

LCP excluye elementos fuera del viewport visible inicial, opacidad 0, transformaciones que los oculten, e iframes.

Umbrales oficiales

Bueno	Necesita mejora	Pobre
≤ 2,5 s	≤ 4,0 s	> 4,0 s

Aplicados al percentil 75 de visitas reales en CrUX. Es decir: el 75 % de las visitas debe completar LCP en 2,5 s o menos para considerar la URL “Buena”.

Componentes del tiempo LCP

LCP no es un único evento; es la suma de:

TTFB (Time to First Byte): respuesta del servidor.
Resource load delay: tiempo entre TTFB y el inicio de descarga del recurso LCP.
Resource load duration: tiempo de descarga del recurso.
Element render delay: tiempo entre la descarga y el paint final.

Optimizar LCP exige atacar las cuatro partes, no solo “la imagen”.

Optimizaciones típicas

Preload del recurso LCP en <head> con fetchpriority="high" (no lazy, no diferido).
Imágenes en formato moderno: AVIF (mejor compresión) > WebP > JPEG.
Imágenes responsive con srcset y sizes para servir el tamaño exacto del viewport.
CDN y caché HTTP agresiva en activos estáticos.
Server-Side Rendering o pre-render para HTML inicial (Astro, Next.js SSG, Hugo).
Eliminar render-blocking CSS y JavaScript en el <head>.
Fuentes con font-display: swap o preload, para que el texto LCP no espere al woff2 (font-display).
Reducir TTFB con servidor cercano geográficamente y optimizando consultas de BD.

Errores comunes

Lazy-loading del LCP: declarar loading="lazy" en la imagen LCP la retrasa varios segundos. La regla es: lazy SOLO debajo del fold.
Hero image en background-image CSS sin preload: el navegador no descubre la imagen hasta que parsea el CSS.
Fonts no preloaded que retrasan el render del texto LCP cuando este es un h1 largo.
Web fonts sin font-display: el navegador espera 3 s a que cargue la fuente antes de pintar el texto, hundiendo LCP.

Cómo lo medimos

PageSpeed Insights: muestra LCP de campo (CrUX p75) y de lab (Lighthouse).
Chrome DevTools Performance Insights: trace detallado con los 4 sub-tiempos.
web-vitals.js: librería oficial para medir CWV en producción.

En smedialab.es LCP está optimizado vía preload del hero AVIF responsive + Inter variable preloaded en el Layout, midiéndose mensualmente para clientes de SEO y alojamiento web.

LCP — LCP — Largest Contentful Paint