SEO technique
Lazy loading
Le lazy loading, ou chargement différé, retarde le téléchargement des images et des contenus intégrés jusqu’à ce que le visiteur s’en approche par le défilement.
Le bénéfice est direct : une page qui compte trente images ne télécharge que les trois visibles à l’ouverture.
Comment le mettre en place
Le navigateur le gère nativement, par un attribut posé sur l’image.
<img src="graphique.webp" loading="lazy" width="800" height="450" alt="...">
Cette version native est préférable aux solutions en JavaScript, qui étaient nécessaires avant et posent aujourd’hui des problèmes d’indexation.
Les deux attributs de dimension ne sont pas décoratifs : ils réservent la place, sans quoi le contenu se déplace à l’arrivée de l’image. C’est la première cause de mauvais Cumulative Layout Shift.
L’erreur qui dégrade le LCP
C’est la plus fréquente, et elle produit l’inverse de l’effet recherché.
Appliquer le chargement différé à l’image principale du haut de page retarde son affichage, puisque le navigateur attend de savoir si elle est visible avant de la demander. Le Largest Contentful Paint se dégrade nettement.
La règle est donc inverse selon la position : l’image du haut de page se charge en priorité, tout ce qui est plus bas se charge en différé. Appliquer l’attribut à toutes les images d’un coup est un réglage par défaut qui coûte des points.
Le risque d’indexation
Un chargement différé mal implémenté peut rendre un contenu invisible pour Google.
Le robot ne fait pas défiler la page. Avec la version native du navigateur, il n’y a pas de problème : Google la comprend et charge les images. Avec une implémentation JavaScript qui ne remplit l’adresse de l’image qu’au moment du défilement, l’image n’est jamais vue.
Le même risque existe pour le texte chargé à la demande, ce qui rejoint les précautions décrites côté JavaScript SEO.
Ce qu’il faut différer, et ce qu’il ne faut pas
Différer : les images sous la ligne de flottaison, les vidéos intégrées, les cartes, les fils de commentaires, les contenus de réseaux sociaux.
Ne pas différer : l’image principale, le logo, et tout ce qui participe à l’affichage initial.
Les contenus intégrés lourds, comme une carte ou une vidéo, méritent mieux qu’un simple différé : les remplacer par une image cliquable qui charge le contenu au clic supprime l’essentiel de leur coût.
FAQ