Chargement différé des images : `loading=lazy`

<img loading="lazy" src="..."> indique au navigateur de différer le téléchargement de l’image jusqu’à ce qu’elle soit sur le point d’entrer dans la fenêtre d’affichage. La prise en charge native par tous les navigateurs modernes en fait le gain de performance le plus simple pour les pages riches en images.

Les navigateurs utilisent une petite marge heuristique, généralement de quelques milliers de pixels sous la ligne de flottaison. L’image commence à se charger suffisamment tôt pour être entièrement rendue lorsque l’utilisateur la voit défiler : le chargement différé passe inaperçu pour les utilisateurs attentifs.

Ne définissez jamais loading="lazy" sur les images situées au-dessus de la ligne de flottaison ou susceptibles de constituer votre LCP (plus grand rendu de contenu). Le chargement différé retarde l’élément visuel le plus important, ce qui nuit à la vitesse perçue et aux indicateurs essentiels du Web.

Pour que le chargement différé soit efficace, donnez à l’élément <img> une width et une height explicites (ou un ratio d’aspect en CSS). Sans dimensions, le navigateur ne peut pas réserver d’espace, le défilement provoque des réorganisations de la mise en page et l’heuristique de chargement différé fonctionne mal.

Le même attribut fonctionne sur l’élément <iframe>. <iframe loading="lazy"> diffère le chargement des cartes, vidéos et intégrations sociales situées sous la ligne de flottaison, qui importeraient sinon plusieurs mégaoctets de JavaScript de tiers à chaque affichage de page.

La valeur par défaut est loading="eager" (chargement immédiat), et elle est rarement écrite explicitement. Définir le chargement immédiat pour les images situées au-dessus de la ligne de flottaison peut être utile comme documentation, en indiquant aux réviseurs que ce choix était délibéré.

Le chargement différé s’associe parfaitement aux images adaptatives. Le navigateur choisit toujours la ressource appropriée dans srcset ; il en diffère simplement le téléchargement. Aucune coordination supplémentaire n’est nécessaire entre loading="lazy" et srcset.

Associez le chargement différé à decoding="async" pour permettre au navigateur de décoder l’image hors du fil d’exécution principal. Cela évite de bloquer les interactions pendant le défilement lorsque de nombreuses images arrivent simultanément après une longue séquence de défilement.

Les images d’arrière-plan CSS ne peuvent pas être chargées de manière différée nativement. Pour les arrière-plans principaux situés au-dessus de la ligne de flottaison, ce n’est pas un problème ; pour ceux situés plus bas, utilisez IntersectionObserver afin d’insérer l’adresse URL lorsque l’élément approche de la fenêtre d’affichage.

Lorsque la page est imprimée, le navigateur charge immédiatement toutes les images, quelle que soit la valeur loading="lazy", afin que la version imprimée soit complète. Vous n’avez pas besoin de traiter les images à chargement différé séparément dans les feuilles de style d’impression.

L’audit « Différer les images hors écran » de Lighthouse répertorie chaque image qui devrait utiliser loading="lazy". Le filtrage du panneau Réseau par « Images », associé à la vue « Cascade », montre les chargements échelonnés produits par le chargement différé : les requêtes initiales diminuent considérablement dans les galeries d’images.

Utiliser loading="lazy" sur les éléments <img> et <iframe> hors écran constitue un gain de performance obtenu avec un seul attribut. Associez-le à une largeur et une hauteur explicites (pour réserver l’espace), à srcset (pour l’adaptabilité) et à decoding="async" (pour maintenir un défilement fluide). Ne l’appliquez jamais à l’image LCP ni à un élément visible dans la fenêtre d’affichage initiale.