Loading Attribute

Definition

Attribut loading='lazy' sur <img> et <iframe> qui diffère le chargement jusqu'à ce que l'élément approche du viewport. Natif, sans JS, il réduit le temps de chargement initial.

Analogie

Comme un serveur de restaurant qui ne prépare le dessert que quand le client a fini le plat principal.

Exemple de code

<!-- Images sous le fold : lazy -->
<img src="photo.jpg" loading="lazy" alt="Photo">
<!-- Image hero : eager (par défaut) -->
<img src="hero.jpg" loading="eager" alt="Hero">
<!-- Iframe lazy -->
<iframe src="video.html" loading="lazy"></iframe>

Cas d'usage

Sur toutes les images en dessous du fold pour réduire le poids initial de la page.

Anti-pattern

Termes lies