Largest Contentful Paint (LCP) - Docs de MetricSpot

Qué comprueba esta auditoría

Lee el LCP de Google PageSpeed Insights (que ejecuta Lighthouse contra tu URL). El valor es el tiempo, en segundos, hasta que termina de renderizarse el elemento más grande visible al cargar: normalmente una imagen hero, el póster de un vídeo o un titular grande.

Valor de LCP	Veredicto
≤ 2,5 s	Bueno
2,5-4,0 s	Mejorable
> 4,0 s	Pobre

Por qué importa

LCP es uno de los tres Core Web Vitals de Google. Un LCP pobre no solo baja un poco el ranking: arrastra todo el embudo de conversión de tu sitio. Los datos del propio Google muestran que las páginas con LCP por debajo de 2,5 s tienen un rebote ~25% menor que las que están por encima de 4 s.

El LCP lo domina lo rápido que carga el elemento LCP, no lo rápido que se ejecuta tu JavaScript. El elemento LCP casi siempre es una imagen. Así que el 80% de las soluciones de LCP tienen que ver con entrega de imágenes.

Cómo solucionarlo

Por orden aproximado de impacto:

1. Preload de la imagen LCP. En tu <head>:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Inicia la descarga de la imagen antes de que el navegador acabe de parsear el resto del HTML.

2. Sirve formatos modernos. AVIF o WebP, con JPEG como fallback para navegadores antiguos:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="..." width="1200" height="600" fetchpriority="high" />
</picture>

3. Define dimensiones explícitas en el <img> (atributos width y height). El navegador reserva el espacio sin esperar a que la imagen se cargue.

4. Redimensiona para el viewport. No sirvas una imagen hero de 4000×3000 a un viewport móvil. Usa srcset con varias resoluciones.

5. Aloja las fuentes tú mismo o usa font-display: swap. Una webfont que bloquea el render retrasa el titular-como-LCP.

6. Saca la imagen LCP del lazy loading. Si tu librería de imágenes hace lazy load de todo, la imagen hero debe optar explícitamente por salir (loading="eager", fetchpriority="high").

Preguntas frecuentes

Mi elemento LCP es texto, no una imagen. ¿Y ahora?

Ya estás en buena forma: el texto se renderiza rápido. La solución suele estar en los recursos que bloquean el render: difiere el JS no crítico, incrusta el CSS crítico, elimina las webfonts que bloquean el render.

¿Por qué difiere mi LCP entre PageSpeed y mi propio navegador?

PageSpeed simula una conexión 4G lenta sobre un dispositivo Android de gama media. Tu máquina de desarrollo va por fibra. Confía siempre en los datos de campo (CrUX), no en tus DevTools locales.

¿Ayuda un CDN con el LCP?

Sí: un CDN reduce el tiempo de ida y vuelta hasta tu servidor de origen, lo que corta directamente el tiempo necesario para empezar a descargar la imagen. Cloudflare, Bunny y Fastly son opciones habituales.