Lazy Loading : Technique d'optimisation qui diffère le chargement des ressources (images, vidéos, iframes) jusqu'à ce qu'elles soient sur le point d'apparaître dans la zone visible de l'écran.
Qu'est-ce que le Lazy Loading ?
Le lazy loading (chargement différé ou chargement paresseux) permet d'améliorer les performances d'une page en ne chargeant pas immédiatement toutes les ressources. Seuls les éléments visibles ou proches de la zone visible (viewport) sont chargés au départ.
Cette technique est particulièrement utile pour les pages longues contenant de nombreuses images. Au lieu de télécharger 50 images d'un coup, seules les 3-4 premières sont chargées, les autres le seront au fur et à mesure du défilement.
Le lazy loading natif est désormais supporté par les navigateurs modernes via l'attribut loading="lazy" sur les balises img et iframe, sans nécessiter de JavaScript.
Importance pour le SEO
- Améliore le LCP en accélérant le chargement initial
- Réduit la consommation de bande passante pour les utilisateurs
- Attention : ne pas appliquer le lazy loading aux images above the fold
- Le JS rendering peut cacher du contenu lazy loadé aux robots
- Utiliser les attributs width et height pour éviter les décalages (CLS)