[BP#37] Utiliser le chargement paresseux des images #44

DocRoms · 2021-10-18T20:16:46Z

DocRoms
Oct 18, 2021
Maintainer

La BP#37 stipule :

Règle
Lorsqu’un internaute ne consulte pas la totalité d’une page web, toutes les images situées en dehors de la zone visitée ont été chargées inutilement. La technique du chargement paresseux (lazy loading) consiste à ne charger une image que lorsque son emplacement devient visible à l’écran. Elle nécessite de programmer le mécanisme en JavaScript ou d’utiliser une bibliothèque comme jQuery « appear » pour détecter l’apparition à l’écran de la zone de l’image. À terme, le navigateur Chrome de Google devrait faire du lazy loading automa- tiquement. Mais on pourra le « forcer » ou le désactiver sur chaque image ou iframe.

Exemple
L’image originale n’est pas chargée par le DOM car elle est remplacée par un pixel transparent dont le poids est très faible. Son URL est néanmoins stockée dans l’attribut data-src pour permettre à JavaScript de la charger le moment opportun, c’est-à-dire dès que l’emplacement de l’image apparaîtra à l’écran. Détecter l’apparition de l’emplacement de l’image peut être réalisé grâce à la librairie jQuery « Appear ».

<img data-src="image.jpg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg AAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASs
JTYQAAAAASUVORK5CYII=" alt="logo green IT" />
<noscript><img src="image.jpg" alt="logo green IT"/></noscript>

1️⃣ On peut mettre cette règle à jour et indiquer qu'il est désormais possible de lazyLoader nativement les images sur certains navigateurs via l'attribut loading :

<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>

2️⃣ De plus , au lieu de parler d'un plugin de jQuery, qui est une librairie attroce et vieillisante ( 🙊 ) On pourrait dire qu'il existe vanilla-lazyload dans les cas ou la propriété native n'est pas supportée : c'est une librarire qui ne pèse que 2.4 kB 😸 .

3️⃣ Enfin, le lazyLoad existe aussi pour les iframes, qui peuvent peser bien plus qu'une simple image ;)
Je penses que l'on ne devrait pas spécifier le des images dans le titre, et rendre cette BP plus générique : Utiliser le chargement paresseux.

Sources :
Tableau de compatibilité pour l'attribut loading de la balise

Tableau de compatibilité pour l'attribut loading de la balise <iframe>

Article Google sur le lazyLoading