cloudphoto
Blog
Le lazy loading des images : bonnes pratiques et pièges
24 mai 2026
Le lazy loading des images : bonnes pratiques et pièges
Le lazy loading — ou chargement différé — consiste à ne charger une image qu'au moment où elle approche de la zone visible de l'écran. Bien utilisé, il accélère nettement l'affichage initial. Mal utilisé, il dégrade l'expérience et peut même nuire au référencement. Voici comment l'employer correctement.
Pourquoi c'est efficace
Sur une page longue, la plupart des images se trouvent sous la ligne de flottaison, hors de l'écran au chargement. Les télécharger immédiatement gaspille de la bande passante et retarde l'affichage de ce que le visiteur voit vraiment. Le chargement différé réserve les ressources aux images utiles, ce qui améliore le temps d'affichage initial et le LCP.
La bonne pratique de base
Les navigateurs modernes intègrent le lazy loading nativement grâce à l'attribut loading="lazy" sur les balises image. C'est simple, fiable et sans dépendance. Nul besoin, dans la plupart des cas, d'une bibliothèque JavaScript dédiée qui alourdirait la page qu'on cherche justement à alléger.
Le piège à éviter absolument
Ne jamais appliquer le chargement différé à l'image principale visible dès l'ouverture (le héros, en haut de page). La différer retarde son affichage et dégrade directement le LCP — l'inverse de l'effet recherché. La règle est simple :
-
Au-dessus de la ligne de flottaison : chargement immédiat, voire préchargement.
-
En dessous : chargement différé.
Les autres écueils
- Oublier de réserver l'espace de l'image (largeur et hauteur), ce qui provoque des sauts de mise en page et dégrade le CLS.
- Différer des images essentielles au contenu que les moteurs pourraient ne pas voir.
- Empiler une solution JavaScript par-dessus le mécanisme natif du navigateur.
Comment faire concrètement
Le lazy loading détermine à quel moment une image se charge ; encore faut-il que ce qui se charge soit léger. Les deux leviers se combinent : différer les images hors écran et réduire le poids de chacune. cloudphoto s'occupe du second volet en servant chaque image redimensionnée, compressée et dans un format moderne via l'URL, avec une réduction de poids typique de 84 à 99 %. Associé à un simple chargement différé sur les images secondaires, vous obtenez une page qui s'affiche vite et ne gaspille aucune donnée.
