Lazy-loading natif : Chrome et Firefox vont faciliter l’optimisation du chargement des images

Le lazy-loading, pour charger les images seulement quand c’est nécessaire

Par défaut, quand on demande à un navigateur d’afficher une page web, ce dernier charge toutes les ressources, et donc toutes les images. Ce n’est pas optimal, car les images situées en bas d’un site ne sont pas nécessaires dès le chargement. Pour améliorer les performances web et réduire la consommation de bande passante, les développeurs peuvent mettre en place du lazy-loading sur leurs pages : plusieurs techniques permettent de différer le chargement des images qui ne sont pas (encore) visibles à l’écran. Le navigateur charge les images pendant le scroll, juste avant qu’elles ne soient affichées à l’écran.

Activer le lazy-loading avec l’attribut loading sur la balise IMG

Le lazy-loading est un point important pour la webperf. Ce n’est pas très complexe à installer, mais cela requiert tout de même quelques connaissances techniques pour mettre en place les scripts. Pour faciliter l’activation du lazy-loading, les navigateurs supporteront bientôt un nouvel attribut de la balise IMG : loading. Vous pourrez ainsi activer le lazy-loading très facilement, en ajoutant simplement cet attribut à vos images.

Comme le montre le code ci-dessus, le simple fait d’ajouter loading="lazy" au sein d’une balise IMG permettra d’activer le lazy-loading. Cet attribut sera compatible avec les balises IMG, mais également PICTURE et IFRAME, et pourra être combiné avec l’attribut SRCSET, qui permet d’appeler l’image la plus adaptée dans le cadre d’une interface responsive. Trois valeurs pourront être associées à l’attribut loading : lazy (lazy-loading), eager (pas de lazy-loading), auto (pour laisser le navigateur décider).

Le lazy-loading arrive sur Chrome et Firefox

Vous pouvez consulter le blogpost Native image lazy-loading for the web, rédigé par Addy Osmani (Engineering Manager at Google working on Chrome), pour prendre connaissance de la documentation technique (pour gérer le lazy-loading sur les autres navigateurs ou activer le lazy-loading sur Chrome dès aujourd’hui). Les développeurs de Chrome travaillent depuis longtemps sur lazy-loading et espèrent assurer la prise en charge de l’attribut loading dès Chrome 75, actuellement en version canary/dev. Les développeurs de Firefox travaillent également sur la gestion du lazy-loading au niveau du navigateur, depuis près d’un mois.