Solucionar 'Largest Contentful Paint image was lazily loaded' en Lighthouse

Largest Contentful Paint image was lazily loaded: en resumen

"Aplicar lazy-loading a la imagen de Largest Contentful Paint activará una advertencia de Lighthouse." Las imágenes con lazy load se ponen en cola para su descarga mucho más tarde que las imágenes eager, retrasando la métrica de LCP. 

Última revisión por Arjen Karel en febrero de 2026

"Los navegadores son lo suficientemente inteligentes para darse cuenta de esto, ¿verdad? Sí, los navegadores son bastante inteligentes, ¡pero no en este caso!"

"Cuando aplicas lazy load a un elemento de imagen, le dices explícitamente al navegador que quite prioridad a esta imagen."

Esto significa que las imágenes no-lazy se programan antes. Cuando la imagen lazy es tu elemento LCP, probablemente retrasarás tu LCP, ¡potencialmente por una cantidad significativa! Las bibliotecas de lazy loading basadas en JavaScript como lazysizes.js agravan esto al requerir la descarga y ejecución de JS antes de que comience el lazy loading.

Según el Web Almanac de 2025, el 10.4% de las páginas móviles todavía aplican lazy-load nativo a su imagen de LCP y otro 5.9% utiliza lazy loading basado en JavaScript. Eso es aproximadamente 1 de cada 6 páginas retrasando activamente su contenido más importante.

Soluciona la advertencia de Lighthouse eliminando el atributo loading="lazy" de tu imagen de LCP o actualizando los filtros de los plugins para omitir el lazy loading de la imagen de LCP.

¿Qué es la advertencia 'Largest Contentful Paint image was lazily loaded'?

Esta advertencia aparece cuando la imagen de Largest Contentful Paint tiene lazy-load. Para propósitos de velocidad de página, "debes cargar este elemento lo antes posible. Aplicar lazy loading a este elemento puede retrasar el Largest Contentful Paint."

Un recordatorio rápido: lazy loading

"El lazy loading es cuando un elemento, a menudo una imagen, no es programado para su descarga por el navegador inmediatamente durante la carga de la página, sino cuando el elemento está cerca de la parte visible de la pantalla." Existen dos métodos.

Lazy loading nativo

"El lazy loading nativo utiliza la API de lazy loading nativa del navegador. Para las imágenes, es tan simple como agregar loading="lazy" a la etiqueta de la imagen." Esto es soportado por todos los navegadores modernos.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="una imagen con lazy load"
>

Lazy loading basado en JavaScript

"El lazy loading basado en JavaScript utiliza una API de JavaScript llamada Intersection Observer para determinar cuándo una imagen está dentro o cerca del viewport visible." Cuando se detecta, se intercambia el src. Reconócelo por el atributo data-src. Aunque tiene un amplio soporte, "utiliza JavaScript", requiriendo su descarga antes de que comience el lazy loading, haciéndolo más lento que los enfoques nativos.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="una imagen con lazy load"
>

¿Cómo afecta un 'lazy loading Largest Contentful Paint image' a la velocidad de la página?

"El elemento de Largest Contentful Paint es el elemento más grande que ha sido pintado en la pantalla, en el viewport visible, durante la carga de la página." Marca cuando la página parece visualmente lista. Aplicar lazy loading a este elemento retrasa esa percepción, haciendo que los visitantes perciban una carga más lenta.

La imagen más importante debe cargar inmediatamente para un pintado más rápido. Sin embargo, el lazy loading explícito le quita prioridad, encolando otros recursos antes. Con el lazy loading de JavaScript, agregas retrasos adicionales esperando la ejecución del script.

Cuando agregas loading="lazy" a una imagen, el escáner de precarga (preload scanner) del navegador la omite por completo. Normalmente, el escáner de precarga descubre imágenes mientras aún está analizando el HTML y comienza a obtenerlas temprano. El lazy loading opta por no utilizar este descubrimiento temprano, que es exactamente por lo que aumenta el retraso de carga de recursos del LCP (resource load delay).

En un ejemplo de la pestaña de red de Chrome con una imagen LCP lazy y seis imágenes eager, la imagen lazy comienza y termina de descargarse al último, demostrando el impacto en el mundo real.

Un poco más de detalle

Los navegadores no pueden anular automáticamente las directivas de lazy-loading. Las razones técnicas de los retrasos del LCP incluyen:

• "Las imágenes lazy se pondrán en cola para su descarga en un momento mucho más tardío que las imágenes no-lazy (eager)."
• Las imágenes lazy típicamente se descargan con baja prioridad.
• "Otros elementos como imágenes normales, scripts aplazados (deferred), fuentes, etc. pueden ser programados para su descarga antes que las imágenes lazy."
• El lazy loading de JavaScript depende del costo (overhead) de descarga y ejecución del script.

Cómo solucionar 'Largest Contentful Paint image was lazily loaded'

"Solucionar la advertencia es simple: no apliques lazy load a esta imagen."

En teoría

• Para el lazy loading nativo, elimina loading="lazy" o cámbialo a loading="eager"
• Para el lazy loading de JavaScript, cambia a enfoques nativos o excluye la imagen de LCP.
• Para next/image de Next.js, establece priority para cargar la imagen de forma eager con una pista de precarga (preload hint).

Si tu elemento LCP es una hero image, consulta la guía completa sobre cómo solucionar hero images lentas para técnicas de optimización adicionales incluyendo preloading, fetchpriority e imágenes responsivas.

En la vida real

Los plugins de optimización a menudo aplican lazy-load a todas las imágenes automáticamente sin distinguir la importancia. La mayoría permite omitir el lazy loading mediante nombre de archivo, clase o atributos. Revisa la documentación de tu plugin y actualiza tus plantillas en consecuencia.

WordPress 6.3 y versiones posteriores ya no aplican lazy-load a las primeras imágenes y agregan automáticamente fetchpriority="high" a la probable imagen de LCP. Si todavía estás viendo esta advertencia en un sitio de WordPress, es probable que un plugin de optimización de terceros esté anulando este comportamiento. Según el capítulo de Rendimiento del Web Almanac de 2022, el 72% de las páginas con una imagen de LCP con lazy load son sitios de WordPress.

Solución alternativa para 'Largest Contentful Paint image was lazily loaded'

Cuando las restricciones del CMS impiden cambiar la configuración del lazy loading, las soluciones alternativas (workarounds) minimizan el impacto:

• Aplica lazy load a todas las imágenes para que las imágenes eager debajo de la mitad de la página (below-the-fold) no se descarguen primero
• Evita las imágenes de fondo (background images) para evitar descargas competitivas
• Pre-carga el elemento LCP (Preload the LCP element) para programar la descarga temprana
• Desactiva el lazy loading de JavaScript y usa el nativo en su lugar
• Agrega fetchpriority="high" al elemento LCP para una programación temprana. Para detalles sobre cómo los navegadores priorizan los recursos, ve la guia de priorización de recursos.
• Optimiza todas las imágenes usando técnicas responsivas y formatos de próxima generación (next-gen) para reducir el tiempo de descarga.

Después de eliminar el lazy loading de tu imagen de LCP, verifica la mejora con Real User Monitoring. La advertencia de Lighthouse está basada en laboratorio, pero Google utiliza datos de campo (field data) de usuarios reales para señales de posicionamiento (ranking signals). En todos los sitios rastreados por CoreDash, las páginas sin imágenes de LCP con lazy-load obtienen una puntuación 'buena' (good) en LCP del 79% en comparación con el 52% para las páginas que aún aplican lazy-load a su elemento LCP.