Corriger l'avertissement Lighthouse 'Différer les images hors écran'

Qu'est-ce que l'avertissement Lighthouse 'Différer les images hors écran' ?

Qu'est-ce que l'avertissement Différer les images hors écran dans Lighthouse ? Lighthouse signale les pages qui ont soit :

• Des images qui se terminent en dessous de 3 fois la hauteur de la fenêtre d'affichage (viewport).
  Lorsqu'une image n'est pas chargée en différé (lazy loaded) et qu'elle se termine en dessous de 3 fois la hauteur de la partie visible de la page et commence en dessous de la partie visible de la page.
• Et qui sont plus grandes que 0,02 Mo ou prennent plus de 50 ms à charger.
  Les images qui sont soit petites, soit intégrées (inlined) sont ignorées par Lighthouse. Souvent, les scripts de chargement différé utilisent de petites images de remplacement (placeholder).
• Et qui n'ont pas l'attribut loading défini.
  Lighthouse ignore les images qui ont l'attribut loading="lazy" ou loading="eager".

L'avertissement 'Différer les images hors écran' n'impacte pas directement les métriques Lighthouse. En théorie, les pages avec des images hors écran pourraient charger assez vite. En pratique, ce n'est souvent pas le cas. Trop d'images hors écran affecteront très probablement indirectement des métriques Lighthouse importantes comme le Largest Contentful Paint (LCP).

Petit rappel - Qu'est-ce que le lazy loading ?

Le lazy loading signifie que les images qui ne sont pas situées dans la partie visible de la page peuvent être chargées plus tard, généralement juste avant qu'elles ne défilent dans la vue.

Qu'est-ce qui cause le chargement immédiat (eager loaded) des images hors écran ?

Les images ne sont pas différées par défaut. Les images hors écran qui ne sont pas différées sont placées sur la page car l'attribut loading de l'image est vide ou les images ne sont pas conformes à la bibliothèque de lazy loading personnalisée. Les images hors écran sont généralement causées par :

• Des plugins mal codés dans votre CMS.
• Des plugins qui désactivent le lazy loading natif.
• Des images d'arrière-plan.
• Des constructeurs de pages (Page Builders) qui génèrent du mauvais HTML (par exemple : Elementor ou WP Bakery).
  
• Du texte copié-collé dans un éditeur WYSIWYG (comme TinyMCE).
• Un mauvais codage de modèle (template).

Comment les 'images hors écran' affectent-elles la vitesse de la page (pagespeed)

Les images hors écran n'impactent pas directement les métriques Lighthouse. Cela rend cependant le rendu d'une page web inutilement compliqué, rendant presque impossible l'obtention d'un score Lighthouse élevé. Votre navigateur devra télécharger plus de ressources avant que la page web puisse être affichée à l'écran. Il y a 3 problèmes avec les images hors écran.

• Votre navigateur devra télécharger plus d'images avant de rendre la page.
• D'autres ressources nécessaires au rendu de la page pourraient être retardées car elles obtiennent une priorité plus faible.
• Votre navigateur peut utiliser beaucoup plus de mémoire lors du rendu de la page.

Comment corriger 'Différer les images hors écran'

Pour corriger 'Différer les images hors écran', vous devrez charger en différé (lazy load) les images qui ne sont pas dans la fenêtre d'affichage visible. Vous pouvez le faire en ajoutant le lazy loading natif ou une bibliothèque de lazy loading. Pour ajouter le lazy loading natif, ajoutez simplement 'loading="lazy"' à l'élément image.

<img loading="lazy"
     src="image.webp" 
     alt="une image chargée nativement en différé" 
     width="300" height="300">

Alternativement, vous pouvez ajouter une bibliothèque de lazy loading natif comme lazysizes ou implémenter votre propre lazy loading (c'est plus facile que vous ne le pensez).

De là, vous devez faire un peu de recherche. Essayez de comprendre ce qui cause le placement de ces images non différées sur la page. Il y a 5 suspects habituels :

1. Des plugins mal codés dans votre CMS.
   Certains plugins peuvent ajouter du HTML directement à la page et ne pas utiliser les hooks corrects qui activent le lazy loading.
2. Des plugins qui désactivent le lazy loading natif.
   Il existe des plugins qui désactivent le lazy loading natif par défaut.
3. Des constructeurs de pages (Page Builders) qui génèrent du mauvais HTML
   Les constructeurs de pages comme Elementor ou WP Bakery créent souvent du code gonflé qui est loin d'être parfait. Il n'y a pas de solution facile pour cela. Les Page Builders font souvent partie du flux de travail. La solution inclut le nettoyage de votre code gonflé et le changement de votre flux de travail.
4. Du texte copié-collé dans un éditeur WYSIWYG
   La plupart des éditeurs WYSIWYG comme TinyMCE font un mauvais travail de nettoyage du code collé, surtout lorsqu'il est collé depuis une autre source de texte riche comme Microsoft Word. Ces éditeurs pourraient ne pas ajouter le lazy loading à vos images.
5. Mauvais codage (de modèle).
   Même lorsque le lazy loading est activé, les images codées en dur dans vos modèles pourraient ne pas être chargées en différé. Vérifiez vos modèles pour des images hors écran et chargez-les en différé.

Lequel est le meilleur - Lazy loading natif vs scripts de lazy loading ?

Lequel est le meilleur ? Devriez-vous utiliser le loading="lazy" natif du navigateur ou un script de lazy loading ? Personnellement, je préfère le lazy loading natif du navigateur. Pourquoi ? Parce que je n'ai pas besoin d'utiliser un script externe qui introduira de la surcharge. Le lazy loading natif est simplement plus rapide. Le lazy loading natif n'est cependant pas supporté par Safari. Si la plupart de vos utilisateurs naviguent sur le web sur leurs iPhones ou Macs, envisagez d'utiliser un script de lazy loading. La plupart du temps, les avantages du lazy loading natif l'emportent sur les inconvénients de ne pas supporter Safari.

Solution de contournement pour 'Différer les images hors écran'

Parfois, il n'est pas possible de différer les images hors écran. Vous pourriez ne pas avoir accès au modèle ou votre CMS pourrait ne pas supporter le lazy loading. Il existe quelques solutions de contournement pour atténuer l'impact des images hors écran. Ces solutions sont loin d'être parfaites et pourraient introduire une toute nouvelle série de défis.

• Minifiez et compressez vos images.
  Minimisez et compressez vos images actuelles. Les images plus petites ont moins d'impact sur la performance de chargement que les grandes images.
• Utilisez de nouveaux formats d'image plus rapides.
  Au lieu des formats de fichier png et jpeg, passez à un format de fichier plus rapide comme WebP.
• Divisez les grandes pages en plusieurs pages.
  Diviser les grandes pages en plusieurs pages pourrait réduire le nombre d'images affichées sur une page.
• Implémentez le défilement infini (infinite scroll).
  Le défilement infini est essentiellement du lazy loading, mais pas pour les images, mais pour des parties entières de la page web. Lors du défilement d'éléments répétés comme des images (voir Pinterest par exemple), le défilement infini pourrait accélérer considérablement votre page.