Soluciona el aviso 'Largest Contentful Paint image was lazily loaded' en lighthouse

Largest Contentful Paint image was lazily loaded - en resumen.

Aplicar lazy-loading a la imagen del Largest Contentful Paint activará un aviso en lighthouse. Las imágenes con lazy loading se pondrán en cola para descarga mucho más tarde que las imágenes sin lazy loading (eager). Esto hará que la imagen se renderice más tarde y retrase la métrica del Largest Contentful Paint. 

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

Cuando aplicas lazy loading a un elemento de imagen, le indicas explícitamente al navegador que despriorice esta imagen.

Esto significa que todas las demás imágenes sin lazy loading se programarán para descarga antes que tus imágenes con lazy loading. Cuando esta imagen con lazy loading es tu elemento LCP, probablemente retrasarás tu LCP. ¡Quizás incluso mucho!

Las cosas empeoran aún más cuando usas bibliotecas de lazy loading basadas en JavaScript como lazysizes.js. Ahora el navegador no solo retrasa tu elemento de imagen LCP, sino que además tienes que esperar a que JavaScript se descargue y ejecute.

Soluciona el aviso de lighthouse eliminando el atributo loading="lazy" de tu imagen LCP o actualizando los filtros en tus plugins para omitir el lazy loading en la imagen LCP.

¿Qué es el aviso 'Largest Contentful Paint image was lazily loaded'?

Este aviso se muestra cuando la imagen del Largest Contentful Paint tiene lazy loading aplicado por el navegador. ¿Por qué? Porque aplicar lazy loading a la imagen más importante de la página (el elemento Largest Contentful Paint) es una mala idea. Para fines de rendimiento deberías cargar este elemento lo antes posible. Aplicar lazy loading a este elemento podría retrasar el Largest Contentful Paint.

Un recordatorio rápido: lazy loading

El lazy loading es cuando un elemento, a menudo una imagen, no se programa para 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. Hay 2 métodos de lazy loading.

Lazy loading nativo

El lazy loading nativo usa la API nativa de lazy loading del navegador. Para imágenes es tan simple como añadir loading="lazy" a la etiqueta de imagen. El lazy loading nativo actualmente es compatible con todos los navegadores modernos.

<img loading="lazy" 
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

Lazy loading basado en JavaScript

El lazy loading basado en JavaScript usa una API de JavaScript llamada intersection observer para determinar cuándo una imagen está en o cerca del viewport visible. Cuando una imagen está en el viewport visible, el src de la imagen se intercambia por la imagen final. Generalmente puedes reconocer el lazy loading basado en JavaScript por el atributo data-src en la imagen. El lazy loading con JavaScript es compatible con aún más navegadores pero tiene una desventaja seria: 'usa JavaScript'. Para que el lazy loading siquiera comience, un archivo JavaScript tiene que descargarse. Esto significa que el lazy loading basado en JavaScript nunca puede ser tan rápido y eficiente como el lazy loading nativo

<img data-src="image.png" 
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

¿Cómo afecta una 'imagen Largest Contentful Paint con lazy loading' al rendimiento?

Aplicar lazy loading a ese elemento retrasará el momento en que la imagen LCP se pinte en la pantalla. Esto hará que un visitante crea que la página carga más lento porque tarda más tiempo en estar 'visualmente lista'

La imagen más importante, a menudo el elemento LCP, debería cargarse inmediatamente para asegurar que pueda pintarse en la pantalla lo más rápido posible.

Ahora podrías pensar que un navegador sería lo suficientemente inteligente para resolver esto. ¡Te equivocas! Cuando aplicas lazy loading a un elemento de imagen, le indicas explícitamente al navegador que despriorice esta imagen. Esto significa que todas las demás imágenes sin lazy loading se programarán para descarga antes que tus imágenes con lazy loading. Cuando esta imagen con lazy loading es tu elemento LCP, probablemente retrasarás tu LCP. ¡Quizás incluso mucho!

Las cosas empeoran aún más cuando usas bibliotecas de lazy loading basadas en JavaScript como lazysizes.js. Ahora el navegador no solo retrasa tu elemento de imagen LCP, sino que además tienes que esperar a que JavaScript se descargue y ejecute.

Solo mira esta pestaña de red de Chrome donde apliqué lazy loading a la imagen LCP (HERO.jpg) y cargué de forma eager 6 otras imágenes. ¡Verás que la imagen HERO es la última imagen en comenzar a descargarse y también la última en terminar de descargarse!

Un poco más de detalle

Ahora profundicemos un poco más en lo técnico. ¿Por qué un navegador no puede resolver esto por sí solo? Con el lazy loading, estás instruyendo específicamente a un navegador para que despriorice una imagen. En muchos casos esto significará que un navegador comenzará a descargar otros recursos primero. Y exactamente eso es lo que causa el retraso en el LCP.

• Las imágenes con lazy loading se pondrán en cola para descarga mucho más tarde que las imágenes sin lazy loading (eager).
• Las imágenes con lazy loading a menudo se descargan con baja prioridad.
• Otros elementos como imágenes normales, scripts diferidos, fuentes, etc., podrían programarse para descarga antes que las imágenes con lazy loading.
• El lazy loading basado en JavaScript depende de un JavaScript que tiene que descargarse y ejecutarse antes de que el lazy loading pueda siquiera comenzar.
  

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

Solucionar el aviso sobre la imagen Largest Contentful Paint con lazy loading es sencillo. Simplemente no apliques lazy loading a esta imagen.

En teoría

• Si estás usando lazy loading nativo, elimina el loading="lazy" del elemento LCP o cámbialo a loading="eager"
• Si estás usando lazy loading basado en JavaScript, podrías considerar cambiar al lazy loading nativo, que es más rápido, o simplemente excluir la imagen LCP del lazy loading.
• Si estás usando algún tipo de componente de imagen como next/image, establece strategy="eager".

En la vida real

En la vida real esto puede causar algunos dolores de cabeza. Muchos sitios usan plugins de optimización que aplican lazy loading a todas las imágenes de la pantalla automáticamente. Esos plugins no distinguen entre imágenes importantes siempre visibles e imágenes below-the-fold.

La mayoría de los plugins te permitirán 'omitir el lazy loading' basándose en nombre de archivo, nombre de clase u otros atributos. Esto significa que tendrás que leer la documentación de tu plugin o simplemente buscar en Google '[nombre de tu plugin] + bypass lazy loading'. Luego edita tu archivo de plantilla y cambia tu imagen principal según corresponda o cambia las imágenes en tu editor de página.

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

A veces tu CMS no te permitirá cambiar la configuración de lazy loading de las imágenes. En ese caso todavía hay algunas soluciones alternativas que puedes usar para minimizar el impacto.

• Aplica lazy loading a todas las imágenes para asegurar que las imágenes 'eager' below-the-fold no se descarguen antes que la imagen LCP
  
• Evita las imágenes de fondo para asegurar que ninguna imagen de fondo se descargue antes que el elemento LCP
  
• Precarga el elemento LCP. Esto asegurará que la imagen LCP se programe para descarga lo antes posible
  
• Desactiva el lazy loading basado en JavaScript y cambia al lazy loading nativo. Esto al menos eliminará el retraso de JavaScript
  
• Añade fetchpriority = "high" al elemento LCP. Esto programará la imagen para descarga temprana
  
• Optimiza todas tus imágenes. Usa imágenes responsivas y formatos de imagen de próxima generación para reducir el tiempo que costará descargar las imágenes.