Lazy loading (chargement différé) : définition et explications

Le lazy loading (chargement différé) consiste à repousser le téléchargement d’une ressource jusqu’à ce qu’elle soit réellement nécessaire : en général les images et les iframes situées sous le premier écran, qui ne se chargent que lorsque le visiteur fait défiler la page vers elles. Un long article de 30 photos peut ainsi démarrer avec trois requêtes d’images au lieu de 30.

Le lazy loading natif

Tous les grands navigateurs prennent en charge l’attribut loading sur les images et les iframes : l’essentiel ne demande donc plus de bibliothèque JavaScript :

<!-- Au-dessus de la ligne de flottaison : chargement immédiat -->
<img src="/img/hero.avif" width="1200" height="600" fetchpriority="high" alt="Red kayak on a calm lake">

<!-- Plus bas : chargement à l’approche de la fenêtre visible -->
<img src="/img/step-4.webp" width="800" height="533" loading="lazy" alt="Tightening the seat straps">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" width="560" height="315" loading="lazy" title="Paddling basics"></iframe>

Le navigateur choisit à quelle distance anticiper le chargement, assez tôt pour que la plupart des visiteurs ne voient jamais de cadre vide (web.dev : lazy loading au niveau du navigateur).

Lazy loading et SEO

Googlebot ne fait pas défiler la page comme une personne. Il restitue les pages avec une fenêtre très haute : le contenu qui se charge quand il devient visible est donc généralement pris en compte. Ce qui échoue, c’est le contenu qui attend une action de l’utilisateur : un écouteur d’événement de défilement, un clic sur « charger plus », un survol. Les recommandations de Google sur le chargement différé préconisent le lazy loading natif, IntersectionObserver ou une bibliothèque qui s’appuie dessus, et de rendre le contenu paginé accessible par de vrais liens.

Les robots qui n’exécutent pas JavaScript, dont notre vérificateur et de nombreux bots d’IA, ne voient que le src du HTML. Un espace réservé dans src, avec le vrai fichier caché dans data-src, leur laisse une image vide.

Erreurs courantes

• Charger en différé l’image hero ou l’image LCP. Cela demande au navigateur d’attendre, ce qui dégrade directement le LCP. Certains CMS ajoutent loading="lazy" à toutes les images ; excluez la première ou les deux premières.
• L’absence de width et height, si bien que la page saute à l’arrivée de chaque image : un problème de CLS.
• Différer de minuscules icônes et logos, où le gain est négligeable.
• Un défilement infini sans URL paginées, si bien que les éléments au-delà du premier lot ne sont jamais explorés.
• Un texte alternatif manquant ou vide sur les images importantes. Différées ou non, elles ont besoin d’une description ; voir texte alternatif.

Au-delà des images

La même idée s’applique aux contenus intégrés lourds. Une carte, un lecteur vidéo ou un widget de chat peut afficher un aperçu léger, comme une image statique avec un bouton de lecture, et ne charger l’élément réel qu’au clic. Cela garde le JavaScript tiers hors du chemin critique, ce qui aide à la fois le chargement et la réactivité.

Vérifier vos images

Le vérificateur de texte alternatif et de SEO des images liste chaque image d’une page avec son texte alternatif, son poids, son format, ses dimensions et son attribut de chargement différé, et signale les textes alternatifs manquants, les fichiers surdimensionnés et les risques de décalage de mise en page.

Questions fréquentes