Chargement différé (lazy loading)
Le chargement différé consiste à ne télécharger une image ou une vidéo qu'au moment où le visiteur s'approche de l'endroit où elle s'affiche.
Définition
Le chargement différé consiste à ne télécharger une image ou une vidéo qu’au moment où le visiteur s’approche de l’endroit où elle s’affiche. Le navigateur sert d’abord ce qui est visible et laisse le reste en attente. Sur une page longue, la plupart des images ne sont jamais téléchargées, parce que personne ne descend jusqu’en bas.
Comment fonctionne le chargement différé ?
Le navigateur repousse la demande jusqu’à ce qu’elle devienne utile.
Une image porte un attribut loading qui indique au navigateur quoi faire. Avec la valeur lazy, il enregistre l’emplacement de l’image, réserve la place et ne lance le téléchargement que lorsque le visiteur en approche par le défilement. Avec la valeur eager, il la demande immédiatement, comme avant.
Ce mécanisme est intégré au navigateur depuis plusieurs années. Il ne demande ni extension, ni script, ni réglage d’hébergement. C’est ce qui le distingue des solutions d’avant, qui reposaient sur du JavaScript et cassaient l’affichage quand ce JavaScript ne se chargeait pas. Vérifier que le chargement différé ne pénalise pas l’image principale relève d’un contrôle des performances page par page.
Pourquoi il ne faut pas tout différer
L’image que Google mesure ne doit jamais attendre.
Sur la plupart des pages, l’élément retenu pour le Largest Contentful Paint est l’image du haut. Si cette image porte l’attribut de chargement différé, le navigateur retarde volontairement la seule chose qu’il aurait fallu accélérer. Le réglage censé rendre la page plus rapide dégrade alors précisément la mesure qui compte.
WordPress connaît le problème et l’a traité. Sa note de développement de la version 5.9 explique que l’analyse menée en 2021 avait constaté une régression du LCP causée par sa propre implémentation, qui marquait à peu près toutes les images. Depuis, WordPress laisse la première image de contenu en chargement immédiat. Il s’agit d’une supposition, pas d’une certitude : le cœur ne sait pas ce qui est réellement visible à l’écran, il parie sur le cas le plus fréquent.
Le raccourci à éviter. Activer l’option « différer toutes les images » d’une extension d’optimisation. Elle repasse par-dessus la précaution du cœur de WordPress et remet l’attribut sur l’image de tête. Beaucoup de sites qui ont installé une extension de performance ont vu leur mesure baisser pour cette seule raison, et l’exclusion se règle ensuite à la main, image par image ou par gabarit.
Comment vérifier qu’il fonctionne vraiment ?
Deux contrôles suffisent, et aucun ne passe par l’administration.
Le premier est statique. Dans le code source de la page publique, chaque balise img doit porter son attribut loading, et la première image de contenu doit valoir eager ou ne rien porter du tout. Les cadres intégrés, les balises iframe, suivent la même règle depuis que WordPress les a inclus.
Le second est dynamique. Dans l’onglet réseau des outils de développement du navigateur, on charge la page sans défiler et on compte les images téléchargées. Si le compteur grimpe alors que rien n’est visible, le chargement différé ne s’applique pas, quelle que soit l’apparence du code. C’est le contrôle qui départage un attribut présent d’un attribut effectif, une extension de mise en cache pouvant servir une version antérieure de la page.
Côté compatibilité, l’attribut est reconnu par tous les navigateurs courants dans leurs versions actuelles. Il se comporte de plus en repli silencieux : un navigateur qui ne le connaît pas ignore l’attribut et charge l’image immédiatement, comme avant. Aucun visiteur ne se retrouve donc devant une image manquante.
Comment le régler correctement ?
Vérifier ce qui est réellement servi, plutôt que ce qui est coché.
Regarder le code servi
Afficher le code source d’une page publique et chercher l’attribut loading sur la première image. S’il vaut lazy, le problème est là, quel que soit l’état des cases dans l’administration.
Identifier l’élément mesuré
PageSpeed Insights indique explicitement quel élément a été retenu pour le LCP. C’est celui-là, et lui seul, qu’il faut exclure du chargement différé.
Désactiver l’option globale de l’extension
Si une extension d’optimisation impose le différé partout, la laisser faire revient à annuler la logique du cœur. Le comportement natif de WordPress suffit dans la majorité des cas.
Déclarer les dimensions des images
Une image différée sans hauteur ni largeur déclarées laisse un vide qui se comble brutalement à son arrivée, et la page saute sous les yeux du visiteur. C’est la contrepartie la plus fréquente du chargement différé mal posé.
Questions fréquentes
Le chargement différé nuit-il au référencement des images ?
Non lorsqu’il repose sur l’attribut du navigateur, qui laisse l’adresse de l’image visible dans le code de la page. Les anciennes solutions en JavaScript, qui cachaient l’adresse réelle dans un attribut détourné, posaient effectivement ce problème.
Est-ce que ça s’applique aussi aux vidéos intégrées ?
Oui, WordPress a étendu le mécanisme aux cadres intégrés à partir de la version 5.7, ce qui couvre les vidéos insérées depuis une plateforme externe. C’est souvent le gain le plus important d’une page, une vidéo intégrée pesant bien plus qu’une image.
Combien peut-on gagner ?
Cela dépend entièrement du nombre d’images situées sous la ligne de flottaison, donc de la longueur de la page. Sur une page d’accueil courte, le gain est négligeable. Sur une liste de produits ou un article illustré, il porte sur la majorité du poids de la page.
Quelle est la différence exacte entre lazy et eager ?
La valeur eager demande le téléchargement immédiat, au moment où le navigateur rencontre la balise. La valeur lazy le repousse jusqu’à ce que l’emplacement approche de la zone visible. Sans attribut, le navigateur applique son comportement par défaut, qui est le chargement immédiat.
Sources
Et sur votre site ?
Une définition ne dit pas si vous êtes concerné.
L'audit gratuit répond dans votre cas : état technique, temps de chargement, et ce que Google voit réellement de vos pages. Un constat écrit, sans engagement et sans jargon.