Qu’est-ce que Lazy loading (images) ?

C'est comme ne sortir les plats du four que lorsque le convive approche de la table : inutile de tout chauffer d'un coup. Technique consistant à différer le chargement des images (ou iframes) jusqu’à ce qu’elles soient proches du viewport. En HTML natif : attribut loading="lazy" sur <img>. Le navigateur charge alors les images « below the fold » lorsque l’utilisateur s’en approche. Réduit le temps de chargement initial, la consommation de données et améliore le LCP en priorisant les images visibles. Les images au-dessus de la ligne de flottaison ne doivent généralement pas être en lazy (éviter loading="lazy" sur le hero) pour ne pas dégrader le LCP. L’attribut loading="eager" (défaut) force le chargement immédiat ; utile pour le hero ou la première image. Les navigateurs récents supportent nativement loading="lazy" ; pour les iframes, l’attribut s’applique aussi. Une image en lazy qui devient le LCP (ex. après scroll rapide) peut dégrader la métrique ; il faut exclure le LCP potentiel du lazy.

L'attribut HTML loading="lazy" sur <img> indique au navigateur de différer le chargement jusqu'à ce que l'image soit proche du viewport. Les images above the fold peuvent rester en loading="eager" (défaut) pour ne pas dégrader le LCP.

Le lazy loading accélère l’affichage de la page et améliore les Core Web Vitals (LCP, poids initial). Sur mobile et pour les pages à nombreuses images (galeries, catalogues), l’impact sur la performance et l’expérience est significatif. Mal appliqué (lazy sur le contenu principal visible), il peut au contraire dégrader le LCP. Sur un site e-commerce avec de nombreuses vignettes produit, activer le lazy sur les images hors premier écran réduit le temps de chargement et la consommation de données. C’est un levier simple et souvent sous-exploité sur les sites existants. Sur une grille catalogue de plusieurs dizaines de vignettes, le lazy natif fait souvent économiser 2 à 8 Mo au premier chargement — assez pour ramener un LCP mobile de « mauvais » à « à améliorer » sans toucher au hero.

• Lazy sur tout ce qui est below the fold ; eager (ou pas d'attribut) sur le hero et l'image LCP. Déclarer width et height pour éviter le CLS. Pour les galeries infinies, le lazy natif suffit dans la plupart des cas.

• Mettre loading="lazy" sur l'image hero ou la première grande image (LCP), ce qui retarde son affichage et dégrade la métrique. Lazy-loader toutes les images sans distinction peut nuire à l'expérience sur connexion rapide.