Bonne pratique
Lorsqu’un internaute ne consulte pas la totalité d’une page web, par défaut toutes les ressources (images, vidéos, iframes...) situées en dehors de la zone visitée, en dessous de la ligne de flottaison, sont chargées inutilement. Pour éviter cela, il est possible d'utiliser la technique du chargement paresseux (lazy loading) qui consiste à ne charger un élement que lorsque son emplacement devient visible à l’écran.
Il est possible, en HTML, d'ajouter un attribut loading à vos images et à vos iframes pour que le navigateur s'occupe
de ne télécharger que les images qui apparaissent à l'écran. Cependant, cet attribut est très récent : il ne sera
pas pris en compte sur d'anciennes versions de navigateurs. Dans un souci de compatibilité accrue, on pourra néanmoins
utiliser des mini-bibliothèques Javascript, très légères, qui s'occuperont de lazy-loader vos images comme :
- LOZAD 1,9 Ko (gzip)
- Vanilla-lazyload 3,5 Ko (gzip)
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
En utilisant le composant image de Next.js, nous exploitons le lazy loading natif pour optimiser l'affichage des images. Cette méthode évite de charger des images en dehors du viewport, réduisant ainsi la consommation de bande passante et améliorant les temps de chargement.
Next.js offre une compatibilité accrue grâce à sa prise en charge moderne des navigateurs tout en fournissant des options de fallback pour les versions plus anciennes. Ainsi, vos utilisateurs bénéficient d'une expérience fluide et éco-responsable sans nécessiter de bibliothèques tierces supplémentaires.
Règle de validation
Le nombre d'images, d'iframes et de vidéos appelés sans lazy loading, en dessous de la ligne de flottaison doit être inférieur ou égal à 0%
Ressources économisées