Imaginons que votre page contienne 20 images, mais qu’un visiteur ne voie d’abord que les 2 premières. Pourquoi le navigateur devrait-il télécharger les 20 en même temps ? C’est exactement le problème que résout le lazy loading (chargement différé).
Que se passe-t-il sans lazy loading ?
Le navigateur télécharge toutes les images dès le chargement de la page. Y compris les photos tout en bas, que le visiteur ne verra peut-être jamais. Résultat :
- Un chargement initial lent (le visiteur attend que tout soit chargé)
- Des données mobiles gaspillées (des images jamais vues)
- Un mauvais score PageSpeed
À quoi sert le lazy loading ?
Avec le lazy loading, le navigateur ne charge que les images visibles (ou sur le point de l’être). Dès que le visiteur fait défiler vers le bas, les images suivantes sont chargées « juste à temps ».
Avantages :
- Un chargement initial plus rapide, car moins de choses sont téléchargées
- Moins de consommation de données pour les visiteurs sur mobile
- De meilleurs scores PageSpeed et LCP
- Si un visiteur s’arrête à mi-page : encore moins de données gaspillées
Quand NE PAS utiliser le lazy loading
Important : ne chargez JAMAIS en différé l’image principale en haut de la page. Elle doit se charger immédiatement, car c’est généralement votre élément LCP (Largest Contentful Paint, c’est-à-dire le plus grand élément visible au chargement). Si vous la chargez en différé, votre score LCP se dégrade au contraire.
Règle simple : les 1 ou 2 premières images en « eager » (immédiat), toutes les autres en « lazy ».
Comment activer le lazy loading ?
Depuis 2020, il existe un attribut HTML natif : loading="lazy". Votre webdesigner l’ajoute à la balise image :
<img src="photo.jpg" alt="..." loading="lazy">
Dans WordPress : depuis la version 5.5 (2020), le lazy loading est activé par défaut. Les nouvelles images reçoivent automatiquement l’attribut loading="lazy". Pour les sites antérieurs à 2020, vous pouvez utiliser une extension comme a3 Lazy Load ou WP Rocket.
Comment vérifier qu’il est actif ?
Faites un clic droit sur une image de votre page (pas l’image principale), choisissez « Inspecter » et regardez dans le code si la balise img contient loading="lazy". Si oui : parfait. Si non : contactez votre webdesigner.