Largest Contentful Paint (LCP): Definición, Thresholds, Fixes
LCP es un Core Web Vital que mide cuándo el elemento visible más grande termina de renderizarse. ≤ 2,5s = bueno. La métrica loading más importante.
¿Qué es Largest Contentful Paint (LCP)?
Largest Contentful Paint (LCP) es un Core Web Vital que mide el tiempo entre cuando una página empieza a cargar y cuando el elemento de contenido visible más grande (imagen, video poster o bloque texto) termina de renderizarse. Es la métrica que Google usa para capturar "¿se percibe esta página como rápida?".
LCP reemplazó métricas proxy más antiguas como First Meaningful Paint (FMP) y Speed Index porque correlaciona mejor con la percepción real usuario de load speed. Es uno de tres Core Web Vitals (con INP y CLS).
¿Qué cuenta como elemento LCP?
- Elementos
<img> - Elementos
<image>dentro de<svg> <video>con poster image- Elementos con CSS
background-image - Elementos block-level con text nodes
Thresholds LCP
| LCP | Rating |
|---|---|
| ≤ 2,5s | Bueno |
| 2,5s - 4,0s | Necesita mejora |
| > 4,0s | Pobre |
Reportado como percentil 75 entre usuarios.
Qué contribuye al tiempo LCP
| Fase | Descripción | Share típico |
|---|---|---|
| TTFB | Tiempo respuesta servidor | ~10-40% |
| Resource load delay | Antes de que recurso LCP empiece descarga | ~10-40% |
| Resource load duration | Cuánto tarda recurso en descargarse | ~10-40% |
| Element render delay | Recurso listo hasta renderizado | ~10-30% |
Cómo medir LCP
API JavaScript
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('LCP:', entry.startTime, 'element:', entry.element);
}
}).observe({ type: 'largest-contentful-paint', buffered: true });Herramientas
| Tool | Tipo |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + field (CrUX) |
| Chrome DevTools Performance | Lab |
| Web Vitals Chrome extension | Field |
| web-vitals.js | RUM |
| Search Console CWV report | Field |
| CrUX Dashboard | Field, público |
Optimizaciones LCP comunes
1. Preload imagen LCP
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">2. Usar formatos imagen modernos
AVIF o WebP con quality 70-80 produce archivos 30-50% más pequeños que JPEG.
3. fetchpriority="high" en imagen LCP
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1200" height="675">4. Reducir TTFB
El tiempo respuesta servidor limita cuán rápido LCP puede ser.
5. Eliminar recursos render-blocking
CSS bloqueante y JS síncrono en <head> retrasan rendering.
6. Inline CSS crítico
Estilos above-the-fold en tag <style> dentro <head>.
7. Self-host fonts + preload
<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>8. No lazy-load elemento LCP
Contraintuitivo, pero loading="lazy" en imagen hero hurts LCP.
LCP vs otras métricas paint
| Métrica | Qué mide | Status |
|---|---|---|
| FP (First Paint) | Cualquier cosa pintada | Diagnóstico |
| FCP (First Contentful Paint) | Primer texto/imagen renderizado | Diagnóstico |
| FMP (First Meaningful Paint) | Proxy viejo | Deprecated 2020 |
| LCP | Elemento above-fold más grande renderizado | Core Web Vital ✓ |
| TTI | Página reliably interactiva | Frecuentemente no fiable |
Pitfalls LCP comunes
- Lazy-load imagen hero.
- JavaScript pesado bloqueando render.
- Web fonts bloqueando text render.
- TTFB lento.
- Imagen hero muy grande.
- CSS background-image como LCP.
- Delay hidratación en sitios SSR.
FAQ: Largest Contentful Paint
¿Qué es buen score LCP?
≤ 2,5 segundos en percentil 75 de usuarios.
¿Cómo difiere LCP de FCP?
FCP = primer elemento renderizado. LCP = elemento más grande visible.
¿Cómo encuentro qué elemento es mi LCP?
Chrome DevTools Performance tab Web Vitals overlay.
¿Por qué mi LCP es lento en móvil pero rápido en desktop?
Devices móvil tienen CPUs más lentas, redes más lentas.
¿El lazy-loading hurts LCP?
Si haces lazy-load del elemento LCP: sí.
¿Puedo mejorar LCP sin cambiar mi imagen hero?
Sí. Reducir TTFB, defer JS, inline critical CSS.
¿Qué reemplazó FID con INP — afecta a LCP?
No. INP es responsiveness, LCP es load speed.
Testea LCP desde regiones reales con LoadFocus
LoadFocus corre auditorías Lighthouse desde 25+ regiones globales. Regístrate en loadfocus.com/signup.
Herramientas LoadFocus relacionadas
Lleva este concepto a la práctica con LoadFocus — la misma plataforma que potencia todo lo que acabas de leer.