Activez le lazy loading de vos images en natif sans Javascript !

Le lazy loading est une pratique qui consiste à charger une ressource (pas forcément une image, mais aussi un script, du css, etc...) uniquement lorsque l'utilisateur en a besoin.

L'intérêt de cette pratique réside dans son économie d'appels réseaux qui induit donc un premier chargement de la page plus rapide, mais aussi une économie de la bande passante côté serveur.

Charger les bonnes ressources au bon moment veut d'abord dire ne pas charger les ressources inutiles, donc ne pas charger les ressources invisibles à l'écran (comme les images par exemple).

Selon l'expérience que l'on souhaite offrir aux visiteurs, certaines ressources peuvent néanmoins être pré-chargées avant d'être affichées, à vous de décider.

Jusqu'ici, le lazy loading était effectué grâce à diverses bibliothèques Javascript assez simple à utiliser, mais un nouvel arrivant est là pour vous faciliter la vie !

L'attribut HTML "loading=lazy"

Disponible depuis quelques temps dans le standard HTML, l'attribut "loading" permet de spécifier le mode de chargement des images ainsi que des iframes et est désormais disponible sur la majorité des navigateurs modernes.

Firefox, Chrome et Edge supportent tous l'attribut pour les images, et l'implémentation sur Safari est en cours, mais un polyfill est disponible sur Github: "loading-attribute-polyfill"

Fonctionnement

L'attribut "loading" peut prendre deux valeurs différentes :

• lazy
• eager (par défaut)

Le mode "lazy" va donc charger l'image à partir du moment où elle va apparaitre dans le viewport, et le mode "eager" lui va forcer le chargement de l'image lors du chargement de la page.

Il vous suffit donc d'ajouter l'attribut à votre image comme ci-dessous et votre image se chargera uniquement lorsqu'elle apparaitra à l'écran :

<img src="..." alt="..." loading="lazy"/>

En bonus : en augmentant la vitesse de chargement de vos pages, le lazy loading a un effet positif sur le SEO !