Quand une page web a 30 à 50 images, les charger toutes à l'ouverture est un gaspillage énorme. Le lazy loading résout ce problème en ne chargeant les images que lorsqu'elles s'apprêtent à entrer dans le viewport. C'est l'une des améliorations à plus fort impact sur les Core Web Vitals.
Selon Google, le lazy loading réduit le transfert de données initial de 30 à 60 % pour les pages riches en images, améliorant directement le LCP (Largest Contentful Paint) — la métrique Core Web Vitals la plus importante pour le SEO.
Lazy Loading Natif : L'Approche la Plus Simple
- ▸<img loading="lazy" src="..." alt="..."> — le navigateur gère tout automatiquement
- ▸Supporté par Chrome 77+, Firefox 75+, Safari 15.4+, Edge 79+ (>95 % des utilisateurs)
- ▸Combiner avec width et height pour éviter le layout shift (CLS)
- ▸NE PAS appliquer aux images hero/above-the-fold — elles doivent se charger immédiatement
IMPORTANT : N'utilisez jamais loading="lazy" sur la bannière hero ou les 1-2 premières images du contenu. Elles doivent se charger immédiatement pour ne pas pénaliser votre score LCP.
Prévention du Layout Shift (CLS)
Le CLS se produit quand les images, après chargement, décalent le contenu en dessous. Solution : toujours déclarer width et height sur les balises img. La technique LQIP (Low Quality Image Placeholder) affiche une version floue pendant que l'image haute qualité se charge.
Lazy Loading dans WordPress, Next.js et Shopify
WordPress 5.5+ ajoute automatiquement loading="lazy". Next.js <Image> lazy load par défaut. Les thèmes Shopify modernes (Dawn, OS 2.0) ont le lazy loading activé par défaut. Vérifiez avec Google PageSpeed Insights.