BP 4.06Privilégier le chargement différé des images (lazy loading)

Sujet

Le Lazy Load ('chargement différé' en français) est une technique d’optimisation qui permet de charger le contenu d'une page d'un site au fur et à mesure que le visiteur la parcourt. Elle permet d'éviter de télécharger de contenus volumineux (images, vidéos, etc.) parfois non nécessaires, car non vus par le visiteur. Par exemple, si votre visiteur a atterri sur votre page par erreur ou s'il a besoin de consulter une seule partie de votre page.

⚠️ Avant d'utiliser cette technique, n'oubliez pas d'optimiser au préalable vos images et vidéos (voir bonnes pratiques du scope Le scope est la portée (scope en anglais), l'étendue au sein de laquelle cet élément est lié. "Images"). Le lazy load permet "seulement" de limiter le nombre d'images chargées inutilement.

GreenIT vous conseille

Solution no-code 🌱🌱

Solution code 🌱🌱🌱

Cependant, il est encore plus efficace d'utiliser la technique de lazy load de manière native en ajoutant l'attribut loading=lazy aux images et aux iframes que vous souhaitez charger progressivement.

<img src="image.jpg" loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

Nota: si vous utilisez la fonction WP get_the_post_thumbnail (EN), la balise image obtenue contiendra l'attribut loading="lazy" par défaut (https://caniuse.com/?search=loading(EN)).

Le lazy loading natif a l'avantage d'améliorer les performances globales de votre site, car il ne repose pas sur du code JavaScript en ligne ni des scripts externes.

Principe de validation