El LCP (Largest Contentful Paint) mide el tiempo que tarda en renderizarse el elemento visual más grande que el usuario puede ver sin hacer scroll. Es una de las tres métricas principales de los Core Web Vitals y un factor de posicionamiento oficial de Google desde 2021.
Dicho de forma práctica: el LCP responde a la pregunta "¿cuándo ve el usuario lo más importante de esta página?"
Qué elementos mide el LCP
El navegador evalúa continuamente cuál es el elemento de mayor tamaño en el viewport durante la carga. Los tipos de elementos que pueden convertirse en el LCP son:
- Imágenes (
<img>) - Imágenes dentro de elementos
<svg> - Fotogramas de vídeo (la imagen de portada del
<video>) - Elementos con imagen de fondo CSS (
background-image) - Bloques de texto:
<p>,<h1>–<h6>,<li>, etc.
En la mayoría de los sitios web, el elemento LCP es el hero image (imagen principal) o el titular de mayor tamaño en la cabecera.
Los umbrales de LCP: bueno, necesita mejoras y malo
Google define tres rangos para el LCP medido en el percentil 75 de los usuarios reales del sitio:
| Rango | Tiempo de LCP | Evaluación |
|---|---|---|
| Bueno | ≤ 2.5 segundos | Pasa los Core Web Vitals |
| Necesita mejoras | 2.5 s – 4.0 s | Margen de mejora significativo |
| Malo | > 4.0 segundos | Penalización potencial en ranking |
El umbral se aplica al percentil 75, es decir, el 75 % de los visitantes reales debe experimentar un LCP inferior a 2.5 s para que tu página se considere "buena".
Por qué el LCP importa para el SEO
Google lanzó la actualización Page Experience en 2021 y convirtió los Core Web Vitals — incluyendo el LCP — en un factor de ranking explícito. No es el factor más pesado, pero actúa como desempate: entre dos páginas con contenido de calidad similar, la más rápida gana posiciones.
Más allá del SEO, un LCP alto daña la experiencia de usuario de forma directa: el visitante espera frente a una página parcialmente vacía, se impacienta y abandona. La tasa de rebote sube; las conversiones bajan.
Puedes profundizar en todas las métricas de experiencia de página en la sección de rendimiento web de este blog.
Las 4 causas principales de un LCP lento
1. Tiempo de respuesta del servidor (TTFB) elevado
El LCP no puede comenzar hasta que el servidor entrega el HTML. Un TTFB alto — causado por hosting lento, consultas de base de datos sin optimizar o ausencia de caché — retrasa todo lo que viene después. Reducir el TTFB a menos de 200 ms es el primer paso.
2. Imagen LCP sin priorizar
Si el elemento LCP es una imagen, el navegador la descarga después de analizar el HTML completo y descargar los CSS y JS que lo bloquean. Añadir fetchpriority="high" y eliminar loading="lazy" en la imagen LCP permite que el navegador la descargue con máxima prioridad desde el primer momento.
3. JavaScript y CSS bloqueantes
Los recursos bloqueantes retrasan el primer render. Cada milisegundo que el navegador dedica a procesar JS o CSS antes de pintar la pantalla se suma al LCP. Diferir el JS no crítico con defer o async, y eliminar CSS no utilizado, puede reducir el LCP en uno o dos segundos.
4. Imágenes sin comprimir o en formatos obsoletos
Una imagen hero de 2 MB en formato JPEG tardará mucho más en descargarse que la misma imagen en WebP o AVIF con peso optimizado. Comprimir y convertir el elemento LCP tiene un impacto directo y medible en la métrica.
Cómo mejorar el LCP paso a paso
- Reduce el TTFB: mejora el hosting, activa OPcache, implementa caché de página completa (Redis, Varnish o el caché nativo de tu CMS).
- Prioriza la imagen LCP: añade
fetchpriority="high"al<img>o define el recurso en un<link rel="preload">en el<head>. - Optimiza el elemento LCP: convierte a WebP/AVIF, redimensiona al tamaño real que ocupa en pantalla y comprime sin pérdida visible de calidad.
- Elimina recursos bloqueantes: audita con Chrome DevTools → Coverage para identificar CSS y JS no usados; añade
deferal JS que no sea crítico en el primer render. - Configura una CDN: acercar los recursos estáticos al usuario reduce el tiempo de descarga, especialmente para la imagen LCP.
- Verifica en campo: usa Google PageSpeed Insights (datos CrUX) para confirmar que las mejoras llegan a los usuarios reales, no solo al entorno de laboratorio.
Si después de aplicar estas optimizaciones el LCP sigue por encima del umbral, puede haber causas más profundas — código heredado, plugins conflictivos o arquitectura del servidor — que requieren una auditoría técnica especializada. En ese caso, contar con el apoyo de expertos en rendimiento web como elenlace.com puede ahorrar semanas de trabajo de prueba y error.
Conclusiones clave
- El LCP mide cuánto tarda en renderizarse el elemento visual más grande del viewport; el umbral "bueno" es ≤ 2.5 s en el percentil 75.
- Es un Core Web Vital y factor de ranking oficial de Google desde 2021.
- Las causas más comunes de un LCP alto son: TTFB elevado, imagen LCP sin priorizar, recursos bloqueantes e imágenes sin optimizar.
- Las palancas de mejora más efectivas son: hosting más rápido,
fetchpriority="high", imágenes en WebP/AVIF, eliminación de CSS/JS bloqueante y CDN. - Verifica siempre los resultados con datos de campo (CrUX en PageSpeed Insights), no solo de laboratorio.
¿Tu LCP no llega al umbral de 2.5 s? Contáctanos para una auditoría de Core Web Vitals y un plan de mejora con resultados medibles.
Preguntas frecuentes
¿Qué es exactamente el LCP en Google Search Console?
En Search Console, el informe de Core Web Vitals muestra el LCP basado en datos de campo reales (CrUX) de los últimos 28 días, agrupados por tipo de página. Un valor "deficiente" indica que más del 25 % de tus usuarios experimentan un LCP mayor a 4 segundos en esas páginas.
¿El LCP es lo mismo que el tiempo de carga total?
No. El tiempo de carga total (Fully Loaded) incluye todos los recursos de la página. El LCP es específico: mide únicamente cuándo aparece el elemento visual más grande en pantalla, que suele ocurrir antes de que todo esté cargado.
¿Cómo sé cuál es el elemento LCP de mi página?
Abre Chrome DevTools, ve a la pestaña Performance y ejecuta un perfil de carga. En la vista Timings verás marcado el LCP. Alternativamente, la extensión Web Vitals de Chrome resalta el elemento directamente en la página con un borde visual.
¿Puede el LCP cambiar según el dispositivo o la conexión?
Sí. El LCP puede diferir entre escritorio y móvil, y entre una conexión de fibra y una red 3G. Google evalúa el percentil 75 del conjunto de todos los usuarios reales, por lo que una conexión lenta de algunos usuarios puede subir el LCP agregado aunque el sitio sea rápido en condiciones óptimas.
Para saber más
Otros proveedores y guías que vale la pena comparar:
