Qu'est-ce que le chargement différé (lazy loading) et comment fonctionne-t-il ?

Toutes les images d'une page n'ont pas besoin de se charger en même temps. Le chargement différé des images retarde le téléchargement des images qui ne sont pas encore visibles dans la fenêtre du visiteur : le navigateur se concentre sur le contenu que le visiteur peut réellement voir au lieu de charger toute la page d'un coup. Pour les pages qui comptent beaucoup d'images, ce seul changement peut réduire nettement le temps de chargement initial et améliorer les indicateurs qui comptent à la fois pour l'expérience des visiteurs et pour le classement. Cet article explique ce qu'est le chargement différé, comment il fonctionne techniquement, ce qu'il faut et ne faut pas charger en différé, et comment il influence les scores des Core Web Vitals.

Quand un navigateur charge une page sans chargement différé, il télécharge toutes les images de la page, qu'elles soient déjà visibles ou non. Un visiteur qui ouvre une page et repart aussitôt déclenche tout de même le téléchargement de chaque image située sous la ligne de flottaison. C'est de la bande passante gaspillée, et cela ralentit le chargement de tout ce qui se trouve au-dessus de la ligne de flottaison, ce que le visiteur voit réellement. Le chargement différé change cela : seul le contenu actuellement à l'écran est téléchargé. Pour comprendre comment cela s'inscrit dans l'ensemble de la vitesse de chargement des pages, lisez l'article sur comment réduire le temps de chargement de votre site web.

Qu'est-ce que le chargement différé ?

Le chargement différé (lazy loading) est une technique qui retarde le chargement des ressources non critiques jusqu'à ce qu'elles soient nécessaires. Pour les images, cela signifie qu'une image n'est pas téléchargée tant que le visiteur ne fait pas défiler la page près d'elle. Au lieu de demander toutes les images au chargement de la page, le navigateur ne demande que celles qui sont visibles ou sur le point de le devenir quand le visiteur interagit avec la page.

Ce que le chargement différé change dans la séquence de chargement

• Sans chargement différé : le navigateur demande toutes les images au premier chargement de la page, qu'elles soient ou non dans la fenêtre d'affichage
• Avec chargement différé : le navigateur ne demande que les images situées dans la fenêtre d'affichage actuelle ou près d'elle. Les autres sont demandées quand le visiteur fait défiler la page vers elles
• La quantité totale de données transférées au fil d'un défilement complet de la page est la même, mais le chargement initial est nettement plus léger
• Les visiteurs qui ne font pas défiler la page au-delà d'un certain point ne déclenchent jamais le téléchargement des images qu'ils n'atteignent pas

Comment fonctionne techniquement le chargement différé ?

Il existe deux façons de mettre en place le chargement différé des images : l'attribut natif du navigateur et les solutions fondées sur JavaScript.

Le chargement différé natif

• Tous les grands navigateurs prennent en charge le chargement différé natif via l'attribut loading="lazy" ajouté directement à la balise de l'image
• Aucun JavaScript ni bibliothèque externe n'est nécessaire. Le navigateur gère nativement le comportement de chargement
• C'est désormais l'approche standard du chargement différé des images sur le web, et elle demande peu de connaissances techniques
• Le navigateur détermine quand commencer à charger une image selon sa distance à la fenêtre d'affichage, un seuil qui varie légèrement d'un navigateur à l'autre

Le chargement différé fondé sur JavaScript

• Avant que le chargement différé natif soit largement pris en charge, les développeurs utilisaient des bibliothèques JavaScript qui surveillaient la position de défilement et déclenchaient le chargement des images quand elles entraient dans la fenêtre d'affichage
• L'API Intersection Observer est l'approche JavaScript standard : elle détecte quand un élément entre dans la fenêtre d'affichage ou en sort, sans dépendre d'écouteurs d'événements de défilement
• Le chargement différé fondé sur JavaScript est encore utilisé pour des cas plus complexes, comme le chargement différé d'images d'arrière-plan définies en CSS ou de contenus vidéo
• Pour les éléments image standard, le chargement différé natif avec loading="lazy" est plus simple et plus fiable

Que peut-on charger en différé en dehors des images ?

Les iframes

• L'attribut loading="lazy" fonctionne aussi sur les iframes dans tous les grands navigateurs
• Les cartes, formulaires et contenus tiers intégrés dans des iframes peuvent être différés jusqu'à ce que le visiteur fasse défiler la page jusqu'à eux
• C'est particulièrement utile pour les pages avec des cartes intégrées ou des widgets tiers en bas de page, car ils impliquent souvent de lourds scripts externes

La vidéo

• Les fichiers vidéo sont nettement plus gros que les images et peuvent avoir un fort impact sur le temps de chargement initial quand ils sont placés sous la ligne de flottaison
• Le chargement différé d'une vidéo demande une approche JavaScript, car l'attribut natif loading ne s'applique pas aux éléments vidéo
• Une approche courante est de ne charger au départ qu'une miniature ou une image d'affiche, et de ne commencer à charger le fichier vidéo que lorsque le visiteur interagit avec elle ou fait défiler la page jusqu'à elle

Les composants et les sections

• Dans les applications très orientées JavaScript, des sections ou des composants entiers d'une page peuvent être chargés en différé : leur code et leur contenu ne sont récupérés que lorsque le visiteur atteint cette partie de la page
• C'est une technique avancée utilisée dans les applications web complexes, généralement gérée par le framework plutôt que mise en place à la main

Que ne faut-il pas charger en différé ?

Le chargement différé améliore les performances quand il est bien appliqué, mais l'appliquer au mauvais endroit crée des problèmes au lieu d'en résoudre.

Les images visibles sans défiler

• L'image principale, le logo ou tout contenu visuel bien visible à l'ouverture de la page doit se charger immédiatement
• Appliquer le chargement différé aux images visibles sans défiler retarde le LCP, ce qui dégrade les scores des Core Web Vitals et l'expérience des visiteurs
• La règle est simple : tout ce qui est visible sans faire défiler doit se charger immédiatement. Tout ce qui est sous la ligne de flottaison peut être chargé en différé

Les images proches de la ligne de flottaison

• Les images juste sous la zone visible peuvent apparaître vite quand le visiteur commence à faire défiler la page. Si le chargement différé est appliqué de façon trop agressive, ces images peuvent encore être en cours de chargement quand le visiteur les atteint, et un espace vide reste brièvement visible
• Le chargement différé natif gère cela avec un seuil : il commence à charger les images avant qu'elles soient entièrement dans la fenêtre d'affichage plutôt que d'attendre le dernier moment

Le contenu critique sur les pages qui se chargent vite

• Sur les pages qui ont très peu de contenu et seulement quelques images, la séquence de chargement est déjà rapide. Le chargement différé ajoute de la complexité sans bénéfice réel dans ces cas
• Le chargement différé est le plus utile sur les pages qui ont beaucoup d'images ou un long contenu à faire défiler

Comment le chargement différé influence-t-il les Core Web Vitals ?

Le chargement différé a un effet direct sur deux indicateurs des Core Web Vitals et aucun effet sur le troisième, quand il est correctement appliqué.

Largest Contentful Paint (LCP)

• Le chargement différé ne doit jamais être appliqué à l'élément qui est probablement le candidat au LCP, en général l'image principale
• Bien appliqué, le chargement différé réduit le nombre de ressources qui se disputent la bande passante pendant le chargement initial, ce qui peut améliorer le LCP en permettant au contenu visible sans défiler de se charger plus vite
• Mal appliqué aux images visibles sans défiler, le chargement différé dégrade directement le LCP en retardant le plus grand élément visible

Interaction to Next Paint (INP)

• Réduire le nombre d'images chargées au départ signifie moins d'activité réseau en concurrence avec l'exécution du JavaScript pendant la fenêtre critique de chargement
• Cela peut réduire indirectement le blocage du fil principal et améliorer les scores d'INP sur les pages qui chargeaient auparavant beaucoup d'images en même temps

Cumulative Layout Shift (CLS)

• Le chargement différé n'influence pas directement le CLS, mais des images chargées en différé sans attributs de largeur et de hauteur définis peuvent provoquer des décalages de mise en page au moment de leur chargement
• Définissez toujours des dimensions explicites sur les images chargées en différé pour que le navigateur réserve l'espace voulu avant le chargement de l'image

Pour le détail de la façon dont le LCP, l'INP et le CLS sont notés et des seuils à respecter, lisez l'article sur ce que sont les Core Web Vitals.

Le chargement différé influence-t-il le SEO ?

Correctement mis en place, le chargement différé ne nuit pas au SEO et peut contribuer à de meilleurs résultats dans la recherche grâce à de meilleurs scores de vitesse de page.

Comment les moteurs de recherche traitent le contenu chargé en différé

• Les robots des moteurs de recherche affichent les pages de façon proche de celle des navigateurs et peuvent indexer le contenu chargé en différé
• Les images chargées en différé restent explorables et peuvent apparaître dans les résultats de recherche d'images
• Le bénéfice SEO vient surtout des gains de vitesse que permet le chargement différé. Les pages aux meilleurs scores de Core Web Vitals, que le chargement différé peut aider à améliorer, ont un avantage de classement

Le texte alternatif s'applique toujours

• Les images chargées en différé demandent le même texte alternatif que n'importe quelle autre image. L'attribut alt doit contenir une description de l'image, qu'elle soit chargée en différé ou non
• Pour savoir comment rédiger un texte alternatif efficace, lisez l'article sur comment utiliser les images sur votre site web

Comment ajouter le chargement différé à votre site web ?

Pour des images individuelles en HTML

• Ajoutez loading="lazy" à toute balise d'image située sous la ligne de flottaison
• Veillez à ce que chaque image chargée en différé ait des attributs width et height explicites pour éviter les décalages de mise en page au chargement des images
• N'ajoutez pas loading="lazy" à l'image principale ni à aucune image visible sans défiler

Via la plateforme de votre site web

• Beaucoup de créateurs de site appliquent automatiquement le chargement différé aux images situées sous la ligne de flottaison, sans mise en place manuelle
• Consultez la documentation de performance de votre plateforme pour confirmer si c'est géré automatiquement avant de l'ajouter à la main

Pour un guide complet sur l'optimisation des images au-delà du chargement différé, avec les formats de fichier, la compression et les tailles adaptatives, lisez l'article sur comment optimiser les images pour un chargement plus rapide.

Comment WEMASY gère le chargement différé

Le créateur de site web de WEMASY applique automatiquement le chargement différé aux images situées sous la ligne de flottaison sur toutes les pages. Les images visibles sans défiler, dont les images principales et tout contenu visible sans faire défiler, sont exclues du chargement différé pour s'afficher immédiatement. Les images sont aussi servies avec des dimensions définies par défaut, ce qui évite les décalages de mise en page quand les images chargées en différé se placent.

Le chargement différé fonctionne avec la compression des images et la diffusion par CDN sur chaque offre WEMASY. Ces trois améliorations ensemble réduisent à la fois le poids initial de la page et le temps de livraison des images, ce qui contribue directement à un LCP plus rapide et à de meilleurs scores de Core Web Vitals dans le tableau de bord de statistiques.

Découvrez ce qui est inclus sur le créateur de site web WEMASY, ou consultez les offres sur la page des tarifs.

Questions fréquentes