Le lazy loading décale le téléchargement des images qui ne sont pas encore à l’écran. Le navigateur garde de la bande passante pour ce que le visiteur voit tout de suite. Mal placé, il décale aussi l’image la plus grande de la page, celle qui décide souvent du Largest Contentful Paint. La règle tient en une phrase : on diffère ce qui est en bas, on ne diffère pas l’image principale.
Le seuil et les autres leviers de cette métrique (réponse serveur, préchargement) sont dans le guide LCP. Ici, il s’agit seulement de décider quelles images attendent le défilement.
Quel attribut sur quelle image
L’attribut HTML loading a trois valeurs utiles. Le navigateur décide déjà beaucoup de choses sans bibliothèque JavaScript.
| Image | Attribut | Pourquoi |
|---|---|---|
| Image principale (bannière, visuel du haut) | loading="eager" et fetchpriority="high" | Elle doit partir tout de suite. lazy la retarde |
| Logo petit dans le header | eager, sans se battre avec la bannière | Il est visible, mais ce n’est en général pas le plus grand élément |
| Images plus bas dans l’article ou la grille | loading="lazy" | Inutiles pour le premier écran |
| Iframe sous la ligne de flottaison (carte, vidéo) | loading="lazy" | Même idée : ne pas les charger avant le scroll |
eager est le comportement par défaut si vous omettez l’attribut. L’écrire sur l’image principale évite qu’un script ou un CMS le remplace par lazy. fetchpriority="high" dit au navigateur de privilégier ce téléchargement quand plusieurs images partent ensemble. On ne le met pas sur toutes les images : la priorité de tout le monde n’en est plus une.
Réservez la largeur et la hauteur (width et height, ou un ratio en CSS) pour que l’emplacement existe avant le fichier. Sans cela, le lazy loading correct n’empêche pas la page de sauter quand l’image arrive. Ce saut est un autre indicateur. L’attribut de chargement, lui, ne le corrige pas.
Le format du fichier (WebP, AVIF, taille adaptée à l’écran) se règle à part. Une image principale légère mais paresseuse reste lente. Une image principale lourde et eager reste lourde. Les deux chantiers se complètent : voir images WebP et AVIF.
WordPress et les scripts « lazy »
WordPress ajoute loading="lazy" aux images de contenu depuis la version 5.5. Les versions plus récentes tentent de ne pas le mettre sur l’image susceptible d’être la plus grande. Ce n’est pas une garantie sur votre thème : une bannière en image de fond CSS, un slider qui injecte la première diapositive, ou un bloc personnalisé peuvent passer à côté de cette logique.
Contrôlez le HTML de l’accueil et d’une fiche type. Cherchez l’image du haut. Si elle porte loading="lazy", retirez-le sur ce modèle et ajoutez fetchpriority="high". Laissez lazy sur les vignettes plus bas.
Méfiez-vous des bibliothèques qui remplacent le src par une miniature floue et n’écrivent la vraie adresse qu’au scroll. Elles peuvent retarder l’image principale si le sélecteur est trop large. Elles peuvent aussi cacher l’URL à un robot qui ne joue pas le script comme un humain. L’attribut natif loading="lazy" suffit dans presque tous les cas, sans seconde bibliothèque qui fait la même chose en double : deux mécanismes lazy sur la même image se gênent.
Les images de fond CSS (background-image) n’ont pas d’attribut loading. Une bannière construite ainsi n’est pas « en lazy » par accident, mais elle n’est pas non plus priorisée comme une balise img. Pour l’image principale, une balise img avec fetchpriority est plus prévisible. Si la bannière doit rester en CSS, préchargez ce fichier explicitement, comme décrit dans le préchargement, et ne la chargez pas via un script au scroll.
Vérifier le premier écran
- Ouvrez la page en navigation privée, écran de téléphone (le premier écran y est plus court, mais l’image héros y est souvent la même).
- Dans le code source, repérez l’URL de l’image du haut. Elle ne doit pas porter
loading="lazy". - Dans l’onglet Réseau, cette image doit démarrer tôt, pas après un long défilement simulé ni après une dizaine d’autres médias.
- Descendez : les images d’article peuvent attendre, c’est le but.
- Refaites le contrôle sur un second modèle. Un correctif limité à l’accueil laisse les fiches produits en retard.
Si l’image principale part tôt et que l’indicateur de chargement reste mauvais, le lazy loading n’est plus le levier. Regardez alors le poids du fichier et le temps de réponse du serveur, pas un attribut déjà correct.