Lazy-loading des images

Le Lazy-loading (chargement différé) est une technique d’optimisation qui retarde le chargement des images jusqu’à ce qu’elles soient sur le point d’apparaître dans la zone visible de l’écran (le viewport).

Définition

Le Lazy-loading des images permet d’économiser de la bande passante et d’accélérer le chargement initial de la page. Au lieu de télécharger toutes les images dès l’ouverture, le navigateur ne récupère que celles nécessaires immédiatement. Les autres ne sont chargées que lorsque l’utilisateur fait défiler la page (scroll).

Bonnes pratiques

• Implémenter progressivement : Utiliser l’attribut natif du navigateur loading="lazy" pour une intégration simple et performante.
• Mesurer avec Search Console & Lighthouse : Vérifier la réduction du poids total de la page et l’amélioration du score de performance.
• Automatiser le monitoring : S’assurer que les nouvelles images ajoutées via le CMS (WordPress) héritent automatiquement de cet attribut.

À éviter

• Chargements bloquants : Ne jamais appliquer le lazy-loading aux images situées "au-dessus de la ligne de flottaison" (Above the Fold), car cela dégraderait le LCP.
• Assets non optimisés : Le lazy-loading ne remplace pas une bonne compression ; une image lourde, même chargée en différé, ralentira l’expérience au moment du scroll.
• Modifications non mesurées : Utiliser des bibliothèques JavaScript lourdes pour faire du lazy-loading alors que la méthode native HTML est désormais largement supportée.