L'attribut loading="lazy" indique au navigateur de différer le chargement d'une image ou d'une iframe jusqu'à ce qu'elle soit sur le point d'entrer dans le viewport — économisant la bande passante et accélérant le chargement initial, sans JavaScript.
lazy — charger uniquement quand le défilement l'approche du viewport.eager (par défaut) — charger immédiatement, indépendamment de la position.Le navigateur utilise une marge (charge légèrement avant que l'élément ne défile en vue) afin que l'image soit généralement prête quand l'utilisateur la voit.
<img src="x.jpg" loading="lazy" width="800" height="600" />
Sans dimensions (ou aspect-ratio), l'image chargée tardivement n'a pas d'espace réservé, donc quand elle se charge la page saute — détériorant le Cumulative Layout Shift (CLS). Réservez toujours l'espace.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Faire du lazy-loading de l'image Largest Contentful Paint détériore réellement les performances — cela retarde le pixel le plus important. Faites du lazy-loading uniquement pour les médias hors écran.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
Le lazy-loading natif loading="lazy" a éliminé le besoin de ceci dans la plupart des cas (bien que IntersectionObserver soit toujours utile pour la logique personnalisée).
Le lazy-loading natif réduit les octets et les requêtes initiaux pour les longues pages avec beaucoup d'images — une grande victoire mobile — gratuitement.
Les nuances importent : réservez les dimensions pour protéger CLS, et gardez les images au-dessus du pli/LCP en eager (même fetchpriority="high") afin que le contenu important se charge toujours rapidement.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don