Definición
LCP (siglas de Largest Contentful Paint, o renderizado del contenido más grande) es una de las tres métricas de Core Web Vitals. Mide cuánto tarda en renderizarse el elemento más grande visible en el viewport inicial cuando un usuario carga una página.
En palabras llanas: es el momento en que el usuario ve "lo importante" de la página por primera vez. Si la primera vez que cargas una web tarda 5 segundos en aparecer la imagen principal o el título grande, tu LCP es de 5 segundos. Y Google lo considera malo.
LCP no mide cuándo termina de cargar TODA la página — mide cuándo aparece el elemento más prominente. Es una aproximación a "el usuario percibe que la web ya está".
Qué elementos cuentan como "Largest Contentful"
Solo elementos visibles en el viewport inicial (no requiere scroll). Tipos de elementos considerados:
- Imágenes
<img>(la mayoría de los casos) - Imágenes de fondo CSS (
background-image) - Vídeos con
<video poster="..."> - Bloques de texto grandes (
<h1>,<p>, párrafos extensos) - Imágenes SVG inline
Lo que NO cuenta:
- Elementos fuera del viewport inicial
- Elementos con opacity:0 o display:none
- Iframes (al menos su contenido)
- Texto dentro de pseudo-elementos
::before/::after
El navegador identifica el elemento más grande dinámicamente: si al inicio el banner es lo más grande pero luego carga una foto enorme, el LCP se actualiza al elemento mayor (hasta que el usuario interactúa).
Umbrales de Google
| LCP | Calificación |
|---|---|
| ≤ 2.5 segundos | Bueno ✅ |
| 2.5 – 4.0 segundos | A mejorar ⚠️ |
| > 4.0 segundos | Pobre ❌ |
Para aprobar Core Web Vitals, el percentil 75 de tus visitantes reales (datos de campo de Chrome) debe estar por debajo de 2.5s.
Causas típicas de mal LCP
- Servidor lento (TTFB alto): si tu backend tarda 2s en responder, el LCP no puede bajar de ahí.
- Recursos bloqueantes: CSS o JS en
<head>sinasync/deferque retrasan el render. - Imágenes pesadas sin optimizar: el hero image en JPEG de 800KB sin lazy ni WebP.
- Fuentes web sin precargar: el texto aparece tarde por esperar fuentes externas.
- Client-side rendering excesivo: SPAs que requieren ejecutar mucho JS antes de mostrar contenido.
- CDN lejano: si tu CDN no tiene edge cerca de tus usuarios, latencia alta.
Ejemplo práctico
Tu home tarda 3.8s en mostrar el banner principal (la imagen más grande del viewport):
0.0s ─ Click en enlace
0.6s ─ TTFB (Time To First Byte) - servidor responde
0.9s ─ HTML descargado y parsing
1.2s ─ CSS bloqueante descargado y parseado
1.8s ─ JS de fuentes carga, empiezan a renderizar fuentes
2.1s ─ Empieza render del DOM
2.4s ─ Hero <img> empieza a descargarse (priority bajo)
3.8s ─ Hero <img> termina de cargar y se pinta ← LCP
LCP de 3.8s → suspende Core Web Vitals.
Optimizaciones aplicables:
<!-- 1. Precargar la imagen hero -->
<link rel="preload" as="image" href="/hero.webp">
<!-- 2. Servirla en formato moderno -->
<picture>
<source type="image/avif" srcset="/hero.avif">
<source type="image/webp" srcset="/hero.webp">
<img src="/hero.jpg" alt="..." fetchpriority="high" width="1200" height="600">
</picture>
<!-- 3. CSS crítico inline, resto deferred -->
<style>/* critical above-the-fold styles */</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">
Resultado típico tras optimizar: LCP baja de 3.8s a 1.6s. ✅ Aprueba.
Errores comunes
- Lazy-load del hero image: si pones
loading="lazy"en la imagen principal, retrasas el LCP. Solo lazy-load lo que está fuera del viewport inicial. - No definir dimensiones de la imagen: sin
widthyheight, el navegador reserva 0px y luego salta a su tamaño real, empeorando además el CLS. - Optimizar Lighthouse pero ignorar field data: Lighthouse mide en laboratorio. Para SEO importa el dato de Chrome de usuarios reales (CrUX).
- Confundir LCP con FCP: FCP (First Contentful Paint) es cuando aparece CUALQUIER contenido. LCP es cuando aparece el MÁS GRANDE. Pueden diferir bastante.
- Optimizar LCP ignorando móvil: las métricas de móvil suelen ser 2-3x peores que desktop. Si tu LCP en desktop es 1.2s pero en móvil 4.8s, suspendes igual.
Cuándo priorizar optimización de LCP
- Cuando tu LCP de campo (Search Console) está por encima de 2.5s
- Cuando tu CTR de búsqueda es bajo pese a buena posición (mala primera impresión)
- Cuando tu rebote en home es alto (usuarios se van antes de ver)
- Antes de campañas grandes de marketing (más tráfico = más coste por mala experiencia)
Referencias
- web.dev — Optimize LCP
- PageSpeed Insights — mide tu LCP real
- Chrome User Experience Report