Para mejorar el LCP (Largest Contentful Paint), debes reducir el tiempo que tarda en renderizarse el elemento más grande visible en la pantalla: optimiza las imágenes, entrega el CSS crítico de forma inline y mejora el tiempo de respuesta del servidor. Un LCP por debajo de 2.5 segundos es la meta según Google.
El LCP es una de las tres métricas de Core Web Vitals que Google usa como señal de ranking. Si tu sitio carga lento "a la vista", tus visitantes abandonan y tu posicionamiento sufre. En este artículo verás exactamente qué lo frena y cómo arreglarlo.
¿Qué Cuenta como Elemento LCP?
Antes de optimizar, identifica qué elemento está siendo medido. Los candidatos típicos son:
- Imágenes — el caso más común: hero images, banners, fotos de producto.
- Bloques de texto grandes — un párrafo o titular que ocupa la mayor área visible.
- Imágenes de fondo CSS — si el bloque visual más grande usa
background-image. - Videos — el fotograma de presentación (poster) del video.
Puedes identificar el elemento LCP en Chrome DevTools: abre la pestaña Performance, graba una carga de página y busca la marca "LCP" en la línea de tiempo. También aparece en el informe de PageSpeed Insights y en Lighthouse.
Las 4 Causas Principales de un LCP Lento
Google agrupa los culpables en cuatro categorías. Resolver las más impactantes primero da el mayor salto de puntuación.
1. Tiempo de respuesta del servidor (TTFB alto)
Si el servidor tarda más de 600 ms en responder, el LCP sube aunque todo lo demás esté bien. Revisa tu TTFB con la herramienta de agencia de optimización web o con WebPageTest.
Soluciones rápidas:
- Habilita caché de página completa (WordPress: WP Rocket o W3 Total Cache).
- Usa un CDN para servir respuestas desde nodos cercanos al visitante.
- Revisa las consultas lentas de base de datos con
EXPLAIN.
2. Recursos que bloquean el render
El navegador no puede pintar nada hasta que termina de descargar y procesar CSS y JavaScript síncronos en el <head>. Cada milisegundo ahí retrasa el LCP.
- Añade
deferoasynca todos los scripts no críticos. - Extrae el CSS necesario para el "above the fold" e inyéctalo como
<style>inline (CSS crítico). - Carga el resto del CSS con
rel="preload"+ un pequeño trucoonload.
3. Tiempos de carga de recursos lentos
Si el elemento LCP es una imagen, su peso y formato importan enormemente.
| Acción | Impacto estimado |
|---|---|
| Convertir JPG/PNG a WebP o AVIF | 30–50% menos de peso |
| Redimensionar al tamaño real de display | Variable; puede ser 2–5× |
| Comprimir con herramienta sin pérdida visible | 10–30% adicional |
Añadir fetchpriority="high" al elemento LCP |
Descarga prioritaria |
También puedes usar <link rel="preload" as="image"> para que el navegador descargue la imagen LCP antes de que el parser llegue al <img> en el HTML.
4. Renderizado del lado cliente
En sitios que dependen de JavaScript para pintar el contenido principal (SPA, React, Vue sin SSR), el LCP se retrasa hasta que JS termina de ejecutarse. Soluciones: renderizado del lado servidor (SSR), generación estática (SSG) o streaming HTML.
Optimización de Imágenes: el Mayor Impacto para el LCP
Porque la imagen hero es el elemento LCP en la mayoría de los sitios, profundizamos aquí.
- Nunca pongas
loading="lazy"en la imagen LCP: ese atributo retrasa la descarga justo del elemento que más necesitas rápido. - Usa imágenes responsive con
srcsetysizespara que el móvil descargue una versión pequeña y el escritorio una grande. - Sirve el archivo desde el mismo dominio o un CDN con HTTP/2 para eliminar la latencia de conexión a un dominio externo.
- Si usas WordPress, activa la conversión automática a WebP en tu plugin de imágenes y comprueba que el atributo
fetchpriority="high"se aplique al featured image.
CSS Crítico: Cómo Hacerlo sin Herramientas de Build
Si no tienes un pipeline de Node.js, puedes extraer el CSS crítico manualmente o con servicios online como Critical CSS Generator. El flujo es:
- Pega la URL de tu página en el generador.
- Copia el CSS resultante (suele ser 5–15 KB).
- Pégalo dentro de una etiqueta
<style>en el<head>, antes de cualquier<link>. - Carga el CSS completo de forma no bloqueante:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>Con esto, el navegador pinta el contenido visible usando solo el CSS inline y descarga el resto en paralelo sin bloquear.
Checklist de Diagnóstico Rápido
- Abre PageSpeed Insights con la URL de tu página y anota el LCP en móvil y escritorio.
- Identifica el elemento LCP en el informe (aparece en "Diagnóstico > Largest Contentful Paint element").
- Revisa si el elemento es una imagen: si lo es, comprueba formato, tamaño y que NO tenga
loading="lazy". - Mide el TTFB con la pestaña Network de DevTools (primera línea del documento).
- Busca scripts síncronos y hojas de estilo bloqueantes en el
<head>. - Aplica las correcciones de mayor impacto primero y vuelve a medir.
Conclusiones clave
- El LCP mide cuándo el elemento más grande visible termina de cargarse; la meta es < 2.5 s.
- Las causas principales son TTFB alto, recursos bloqueantes, imágenes pesadas y renderizado JS del lado cliente.
- Nunca pongas
loading="lazy"en la imagen hero; usa en cambiofetchpriority="high". - El CSS crítico inline elimina bloqueos de render sin perder estilos.
- Un CDN y caché de página completa son las ganancias más rápidas en TTFB.
¿Quieres que un equipo especializado revise y corrija el LCP de tu sitio? Solicita una auditoría de rendimiento web y obtén un plan de acción concreto para tu caso.
Preguntas frecuentes
¿Cuál es el valor de LCP que Google considera "bueno"?
Google clasifica el LCP como "bueno" cuando es menor a 2.5 segundos, "necesita mejorar" entre 2.5 y 4 segundos, y "pobre" si supera los 4 segundos.
¿El LCP afecta el posicionamiento en Google?
Sí. El LCP forma parte de las señales de experiencia de página (Page Experience) que Google usa en su algoritmo de ranking. Un LCP pobre puede perjudicar tu posición frente a competidores con páginas más rápidas.
¿Cómo mido el LCP real de mis usuarios (datos de campo)?
En PageSpeed Insights, los datos de "campo" provienen del Chrome User Experience Report (CrUX) y muestran el LCP real de visitas recientes. Para un monitoreo continuo, puedes usar la API de web-vitals.js o Google Search Console (informe de Core Web Vitals).
¿El LCP en móvil es diferente al de escritorio?
Sí, y casi siempre es peor en móvil por conexiones más lentas, CPUs menos potentes y pantallas más pequeñas que pueden mostrar elementos diferentes. Google priorizó el indexado móvil, así que el LCP en móvil tiene mayor peso en ranking.
Para saber más
Otros proveedores y guías que vale la pena comparar:
