Afin d'optimiser le chargement de nos pages, il est recommandé de charger en différé, voir à la demande certaines ressources comme les images. Pour faire cela, on utilise le lazy-loading.
Jusqu'à présent, nous devions faire cela avec de JavaScript (avec par exemple LazySizes). Les prochaines versions de Chrome et Firefox vont intégrer cela nativement via un nouvel attribut sur les balises img et iframe : loading.
Voici un example :
<img src="uneimage.jpg" loading="lazy" alt="...">
<iframe src="player.html" loading="lazy"></iframe>
Grâce à ces nouveaux attributs, ces ressources se chargeront que lorsqu'il y a besoin.
En effet, beaucoup de nos images sont souvent cachées au chargement de la page car sous la ligne de flottaison, surtout sur mobiles.
L'attribut loading
Il va permettre de différer le chargement des images et iframes hors de la zone visible à l'écran tant que l'utilisateur ne défile pas à proximité de ceux-ci.
Cet attribut supporte les valeurs suivantes :
- lazy : indique que l'élément est un bon candidat pour le lazy-loading
- eager : indique que l'élément n'est pas un bon candidat pour le lazy-loading. Chargement immédiat.
- auto : le navigateur détermine alors s'il le charge immédiatement ou en lazy-loading
Si vous ne spécifiez rien, la valeur sera auto par défaut.
Pour plus de détails, je vous invite l'article complet Native image lazy-loading for the web (en anglais), rédigé par Addy Osmani (Engineering Manager chez Google travaillant sur Chrome).
3