HTML : L'attribut Loading ⌛ sur les IMG et IFRAME sauvera-t-il la planète ?
Le Lazy loading des images et des iframes fait officiellement partie des spécifications du HTML poussées par le Whatwg.
L'attribut propriétaire "loading" a été normalisé et intégré aux spécifications du HTML très récemment.
Voici comment ce nouvel attribut s'utilise, le plus simplement du monde :
<img src="mon-image.png" loading="lazy" alt="mon image" >
A quoi sert le Lazy Loading ?
Le lazy loading permet de raccourcir le temps de chargement de pages Web contenant beaucoup d'images. Seules les images faisant partie de la zone d'affichage de la page sont réellement chargées par le navigateur.
Cela s'applique aussi aux iframes.
Le temps de chargement des pages est aujourd'hui un critère que Google utilise pour catégoriser ses résultats des recherches sur son moteur de recherche. Le Lazy loading peut vous aider à optimiser le temps de chargement de vos pages très simplement.
Le lazy loading = GreenIT ?
En plus de diminuer le temps d'affichage des pages, cet attribut permet de diminuer la consommation de la bande passante d'Internet, seules les images utiles seront téléchargées par le navigateur.
Malgré lui, cet attribut permettra des économies d'énergies à l'échelle de la planète.
Pouvons-nous utiliser dès aujourd'hui ce nouvel attribut ?
Cet attribut normalisé est à la base un attribut propriétaire. Il existe depuis plusieurs mois sur le Web et est supporté par la majorité des navigateurs. Seul Safari ne le supporte pas encore.
https://caniuse.com/loading-lazy-attr
Comment faisions-nous avant ?
Avant le début du support de cette norme par les navigateurs, le Web disposait d'une tonne de librairies Javascript pour permettre de charger des images et des iframes de manière progressive (ex : Lozad.js).
Ces librairies ne sont plus nécessaires depuis le support natif de cet attribut par la majorité des navigateurs.
Sur Wordpress, certains plugins comme Rocket Lazy Load permettent d'optimiser le temps de chargement des images automatiquement.
Sur Ghost, la plateforme CMS que j'utilise, il va falloir attendre une prochaine release pour que ma pull request soit peut-être acceptée et intégrée.
Conclusion
Cet attribut est très bénéfique pour permettre de diminuer la consommation de ressources inutiles sur le Web. En plus d'être très simple à intégrer sur un site existant, il vous permettra d'optimiser le temps de chargement de vos pages et de gagner des points en SEO.