Lazy loading : charger les images au bon moment

Ouvrez sur votre téléphone la galerie d'un traiteur : quarante photos de buffets, de pièces montées et de verrines. Sans réglage particulier, le navigateur les télécharge toutes dès l'ouverture, y compris celles que le visiteur ne verra jamais faute de faire défiler la page jusqu'en bas. Le lazy loading, ou chargement différé, attend qu'une image approche de l'écran pour la charger.

Le principe du chargement différé

Une page s'affiche en plusieurs temps : le navigateur reçoit le texte, découvre les images à télécharger, puis les affiche. Avec le chargement différé, il récupère d'abord les images du premier écran et celles qui se trouvent juste en dessous. Les autres arrivent au fil du défilement, un peu avant que le visiteur n'atteigne leur hauteur.

Les navigateurs actuels savent le faire seuls. Il suffit d'ajouter à l'image un attribut, loading, avec la valeur lazy, sans aucun script. Le même réglage s'applique aux cadres intégrés, comme une carte ou un lecteur vidéo placés en bas de page. Les anciennes méthodes, fondées sur des scripts, subsistent sur certains sites et posent davantage de problèmes, notamment pour Google.

WordPress ajoute ce réglage de lui-même à la plupart des images depuis plusieurs années. Shopify, Wix ou Squarespace gèrent aussi le chargement des images à leur façon, à travers la plateforme ou le thème. Dans tous les cas, le résultat se vérifie page par page.

Ce que vous y gagnez, et ce qu'il ne remplace pas

• Un premier affichage plus rapide : la connexion sert d'abord aux éléments visibles, au lieu de télécharger toute la page d'un coup ;
• Moins de données consommées : le client qui consulte vos horaires en 4G et repart sans faire défiler ne télécharge pas votre galerie ;
• Un hébergement moins sollicité, ce qui compte sur une page très illustrée.

Le chargement différé ne rend pas une image plus légère. Une photo de plusieurs mégaoctets consommera autant de données et s'affichera lentement au moment où le visiteur l'atteindra. Redimensionnez et compressez d'abord vos fichiers, selon la méthode de l'article sur la compression des images : les deux réglages se complètent.

La première image, à ne jamais différer

L'erreur la plus courante consiste à appliquer le réglage à toutes les images, y compris la grande photo du haut de page. Le navigateur attend alors d'avoir calculé la mise en page pour savoir si cette image est visible, et seulement ensuite la télécharge. Le retard passe inaperçu sur la fibre, beaucoup moins sur un téléphone en 4G.

Or cette photo est souvent l'élément mesuré par le LCP, l'indicateur de Google qui chronomètre l'affichage du plus grand élément visible. La différer revient à ralentir précisément ce que Google mesure. Le rôle et les seuils de cet indicateur sont présentés dans l'article sur les Core Web Vitals. Gardez donc un chargement normal pour :

• le bandeau ou la photo principale de chaque page ;
• le logo et les éléments de l'en-tête ;
• toute image visible sans faire défiler, sur mobile comme sur ordinateur.

Un autre attribut, fetchpriority, permet même d'indiquer au navigateur l'image à télécharger en priorité. Votre prestataire peut l'ajouter à la photo principale de vos pages clés.

Deux précautions pour un chargement propre

Réserver la place de chaque image

Une image qui arrive en cours de défilement ne doit pas pousser le texte en apparaissant. La largeur et la hauteur de chaque image doivent donc figurer dans le code : le navigateur réserve l'emplacement, et la page reste stable. La plupart des outils récents s'en chargent, mais les images insérées à la main dans un texte n'en bénéficient pas toujours.

Rester lisible pour Google

Google indique que son robot ne fait pas défiler les pages comme un visiteur. Une image qui ne se charge qu'en réaction au défilement, avec un ancien script, risque donc de lui échapper ; l'attribut natif ne pose pas ce problème. Si votre site utilise une extension de chargement différé, vérifiez avec l'outil d'inspection d'URL de la Search Console que les images figurent bien dans la page telle que Google l'a vue.

Vérifier le réglage sur votre site

1. Le test au téléphone : ouvrez une page longue et faites-la défiler rapidement. Des cadres qui se remplissent au fil du défilement signalent un chargement différé. Si la photo du haut apparaît nettement après le texte, elle est peut-être différée à tort.
2. PageSpeed Insights : selon les versions, le diagnostic signale des images hors écran qui pourraient être différées ou, à l'inverse, une image principale chargée en différé. Les intitulés évoluent : repérez les mentions d'images « hors écran » ou de « chargement différé ».
3. Les outils du navigateur : sur ordinateur, dans Chrome, faites un clic droit sur une image et choisissez « Inspecter ». Le code de l'image s'affiche, avec l'attribut loading s'il est présent. L'onglet Réseau, filtré sur les images, montre aussi les fichiers qui arrivent au fil du défilement.

À faire sur vos pages

1. Faites défiler vos trois pages les plus illustrées sur votre téléphone et notez les images visibles dès l'ouverture.
2. Vérifiez que ces images ne portent pas l'attribut de chargement différé, et que les suivantes en sont équipées.
3. Passez ces pages dans PageSpeed Insights, avec notre guide pour lire le rapport sans paniquer, puis transmettez les corrections à votre prestataire. Pour un nouveau site, ces réglages font partie de la base ; le configurateur de devis vous en donne le prix ferme.