Arreglar la advertencia de Lighthouse 'defer offscreen images'

¿Qué es la advertencia de Lighthouse 'defer offscreen images'?

¿Qué es la advertencia defer offscreen images en Lighthouse? Lighthouse marca las páginas que tienen:

• Imágenes que terminan por debajo de 3 veces la altura del viewport.
  Cuando una imagen no tiene carga diferida y termina por debajo de 3 veces la altura de la parte visible de la página y comienza por debajo de la parte visible de la página.
• Y son mayores de 0,02 MB o tardan más de 50 ms en cargarse.
  Lighthouse ignora las imágenes que son pequeñas o están insertadas (inlined). A menudo, los scripts de lazy loading utilizan pequeñas imágenes de marcador de posición.
• Y no tienen definido el atributo loading.
  Lighthouse ignora las imágenes que tienen el atributo loading="lazy" o loading="eager".

La advertencia 'defer offscreen images' no afecta directamente a ninguna métrica de Lighthouse. En teoría, las páginas con imágenes fuera de pantalla podrían cargarse bastante rápido. En la práctica, a menudo no lo hacen. Demasiadas imágenes fuera de pantalla muy probablemente afectarán indirectamente a métricas importantes de Lighthouse como Largest Contentful Paint (LCP).

Un recordatorio rápido: ¿qué es el lazy loading?

Lazy loading significa que las imágenes que no se encuentran en la parte visible de la página pueden cargarse más tarde, normalmente justo antes de que aparezcan en pantalla al desplazarse.

¿Qué causa las imágenes fuera de pantalla con 'eager loading'?

Las imágenes no se difieren de forma predeterminada. Las imágenes fuera de pantalla que no se difieren se colocan en la página porque el atributo loading de la imagen está vacío o la imagen no es compatible con la biblioteca de carga diferida personalizada. Las imágenes fuera de pantalla suelen ser causadas por:

• Plugins mal programados en tu CMS.
• Plugins que desactivan la carga diferida nativa.
• Imágenes de fondo.
• Constructores de páginas (Page Builders) que generan un HTML deficiente (por ejemplo: Elementor o WP Bakery).
  
• Texto que se copia y pega en un editor WYSIWYG (como TinyMCE).
• Programación de plantillas deficiente.

Cómo afectan las 'imágenes fuera de pantalla' a la velocidad de la página

Las imágenes fuera de pantalla no afectan directamente a las métricas de Lighthouse. Sin embargo, hacen que el renderizado de una página web sea innecesariamente complicado, lo que hace casi imposible obtener esa puntuación alta en Lighthouse. Tu navegador necesitará descargar más recursos antes de que la página web pueda mostrarse en pantalla. Hay 3 problemas con las imágenes fuera de pantalla.

• Tu navegador necesitará descargar más imágenes antes de renderizar la página.
• Otros recursos necesarios para renderizar la página podrían retrasarse, ya que obtienen una prioridad menor.
• Tu navegador puede usar mucha más memoria al renderizar la página.

Cómo arreglar 'defer offscreen images'

Para arreglar 'defer offscreen images' deberás aplicar lazy loading a las imágenes que no están en el viewport visible. Puedes hacer esto añadiendo la carga diferida nativa o una biblioteca de carga diferida. Para añadir la carga diferida nativa, simplemente añade 'loading="lazy"' al elemento de imagen.

<img loading="lazy"
     src="image.webp" 
     alt="una imagen con carga diferida nativa" 
     width="300" height="300">

Alternativamente, podrías añadir una biblioteca de carga diferida nativa como lazysizes o implementar tu propia carga diferida (que es más fácil de lo que piensas).

A partir de ahí, debes investigar un poco. Intenta descubrir qué está causando que estas imágenes se coloquen en la página sin diferirse. Hay 5 sospechosos habituales:

1. Plugins mal programados en tu CMS.
   Algunos plugins podrían añadir HTML directamente a la página y no utilizar los ganchos (hooks) correctos que permiten la carga diferida.
2. Plugins que desactivan la carga diferida nativa.
   Existen plugins que desactivan la carga diferida nativa de forma predeterminada.
3. Constructores de páginas (Page Builders) que generan HTML deficiente.
   Los constructores de páginas como Elementor o WP Bakery a menudo crean código inflado que está lejos de ser perfecto. No existe una solución fácil para esto. Los Page Builders suelen ser parte del flujo de trabajo. La solución incluye limpiar el código inflado y cambiar tu flujo de trabajo.
4. Texto que se copia y pega en un editor WYSIWYG.
   La mayoría de los editores WYSIWYG como TinyMCE hacen un mal trabajo limpiando el código pegado, especialmente cuando se pega desde otra fuente de texto enriquecido como Microsoft Word. Es posible que estos editores no añadan carga diferida a tus imágenes.
5. Programación (de plantillas) deficiente.
   Incluso cuando la carga diferida está habilitada, las imágenes codificadas directamente en tus plantillas podrían no tener carga diferida. Revisa tus plantillas en busca de imágenes fuera de pantalla y aplícales lazy loading.

¿Cuál es mejor: lazy loading nativo o scripts de lazy loading?

¿Cuál es mejor? ¿Deberías usar el loading="lazy" nativo del navegador o un script de lazy loading? Personalmente, prefiero el lazy loading nativo del navegador. ¿Por qué? Porque no necesito usar un script externo que introduzca sobrecarga. El lazy loading nativo es simplemente más rápido. Sin embargo, el lazy loading nativo no es compatible con Safari. Si la mayoría de tus usuarios navegan por la web en sus iPhone o Mac, considera usar un script de lazy loading. La mayoría de las veces, las ventajas del lazy loading nativo superan las desventajas de no ser compatible con Safari.

Solución alternativa para 'defer offscreen images'

A veces no es posible diferir las imágenes fuera de pantalla. Es posible que no tengas acceso a la plantilla o que tu CMS no admita la carga diferida. Existen algunas soluciones alternativas para disminuir el impacto de las imágenes fuera de pantalla. Esas soluciones están lejos de ser perfectas y podrían introducir un nuevo conjunto de desafíos.

• Minifica y comprime tus imágenes.
  Minimiza y comprime tus imágenes actuales. Las imágenes más pequeñas tienen menos impacto en el rendimiento de carga que las imágenes grandes.
• Usa formatos de imagen nuevos y más rápidos.
  En lugar de los formatos de archivo PNG y JPEG, cambia a un formato de archivo más rápido como WebP.
• Divide páginas grandes en varias páginas.
  Dividir páginas grandes en varias páginas puede reducir la cantidad de imágenes que se muestran en una página.
• Implementa el scroll infinito.
  El scroll infinito es básicamente lazy loading, solo que no para imágenes sino para partes enteras de la página web. Al desplazarse a través de elementos repetidos como imágenes (ver Pinterest, por ejemplo), el scroll infinito podría acelerar considerablemente tu página.