Utiliser le chargement paresseux

Ce que dit le référentiel

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)

Notre avis

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.