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 !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Andy Art sur Unsplash