5 méthodes LazyLoad pour améliorer les performances de vos sites Web

Les images étant parmi les types de contenu les plus populaires sur le web, le temps de chargement des pages sur les sites web peut facilement devenir un problème.

Même lorsque correctement optimisé les images peuvent peser assez lourd. Cela peut avoir un impact négatif sur le temps que les visiteurs doivent attendre avant de pouvoir accéder au contenu de votre site Web. Il y a de fortes chances pour qu’ils s’impatientent et naviguent ailleurs, à moins que vous ne trouviez une solution au chargement des images qui n’interfère pas avec la perception de la vitesse.

Dans cet article, vous découvrirez cinq approches du chargement Lazyload des images que vous pouvez ajouter à votre boîte à outils d’optimisation Web pour améliorer l’expérience utilisateur sur votre site Web.

Qu’est-ce que le chargement lazyload ?

Le chargement Lazyload des images consiste à charger les images sur les sites Web de manière asynchrone, c’est-à-dire après le chargement complet du contenu en amont, ou même sous condition, uniquement lorsqu’elles apparaissent dans la fenêtre du navigateur. Cela signifie que si les utilisateurs ne font pas défiler la page jusqu’en bas, les images placées en bas de la page ne seront même pas chargées.

Un certain nombre de sites Web utilisent cette approche, mais elle est particulièrement visible sur les sites à forte teneur en images. Essayez de parcourir votre terrain de chasse en ligne préféré pour trouver des photos haute résolution et vous vous rendrez vite compte que le site Web ne charge qu’un nombre limité d’images. Au fur et à mesure que vous faites défiler la page, vous verrez que les images de remplacement se remplissent rapidement d’images réelles pour l’aperçu. Par exemple, remarquez le chargement sur Unsplash.com: le fait de faire défiler cette partie de la page pour l’afficher déclenche le remplacement d’un espace réservé par une photo en pleine résolution.

Pourquoi s’intéresser au chargement Lazyload des images ?

Il y a au moins deux excellentes raisons pour lesquelles vous devriez envisager d’utiliser des images à chargement Lazyload sur votre site Web :

• Si votre site Web utilise JavaScript pour afficher du contenu ou fournir une fonctionnalité quelconque aux utilisateurs, le chargement du DOM devient rapidement critique. Il est courant que les scripts attendent que le DOM soit complètement chargé avant de commencer à s’exécuter. Sur un site comportant un nombre important d’images, le chargement Lazyload – ou le chargement asynchrone des images – peut faire la différence entre les utilisateurs qui restent ou quittent votre site Web.
• Étant donné que la plupart des solutions de chargement Lazyload fonctionnent en chargeant les images uniquement si l’utilisateur a fait défiler la page jusqu’à l’endroit où les images seraient visibles dans la fenêtre d’affichage, ces images ne seront jamais chargées si les utilisateurs n’atteignent jamais ce point. Cela signifie des économies considérables de bande passante, pour lesquelles la plupart des utilisateurs, notamment ceux qui accèdent au Web sur des appareils mobiles et des connexions lentes, vous remercieront.

Le chargement Lazyload des images contribue aux performances des sites Web, mais quelle est la meilleure façon de procéder ?

Il n’y a pas de méthode parfaite.

Si vous vivez et respirez JavaScript, la mise en œuvre de votre propre solution de chargement Lazyload ne devrait pas poser de problème. Rien ne vous donne plus de contrôle que de coder quelque chose vous-même.

Vous pouvez également parcourir le Web à la recherche d’approches viables et commencer à les expérimenter. C’est ce que j’ai fait et j’ai découvert ces cinq techniques intéressantes.

#1 Chargement LazyLoad natif

Le chargement Lazyload natif des images et des iframes est super cool. Rien ne pourrait être plus simple que le balisage ci-dessous :

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

Comme vous pouvez le constater, il n’y a pas de JavaScript, pas d’échange dynamique de l’image et des iframes. src juste du bon vieux HTML.

Le site loading nous donne la possibilité de retarder les images hors écran et les iframes jusqu’à ce que les utilisateurs les fassent défiler jusqu’à leur emplacement sur la page. loading peut prendre l’une de ces trois valeurs :

• lazy: fonctionne très bien pour le chargement Lazyload
• eager: demande au navigateur de charger immédiatement le contenu spécifié.
• auto: laisse l’option de chargement Lazyload ou non au navigateur.

Cette méthode n’a pas de rivaux : elle n’a pas de frais généraux, elle est propre et simple. Cependant, bien qu’à l’heure où nous écrivons ces lignes, la plupart des principaux navigateurs disposent de la fonction un bon support pour la méthode loading attribut, tous les navigateurs ne sont pas encore à bord.

#2 Chargement Lazyload à l’aide de l’API Intersection Observer

Le site API de l’observateur d’intersection est une interface moderne que vous pouvez utiliser pour le chargement Lazyload d’images et d’autres contenus.

Voici comment MDN présente cette API :

L’API Intersection Observer permet d’observer de manière asynchrone les modifications de l’intersection d’un élément cible avec un élément ancêtre ou avec la fenêtre d’un document de niveau supérieur.

En d’autres termes, ce qui est observé de manière asynchrone est l’intersection d’un élément avec un autre.

Imaginons que vous souhaitiez charger en Lazyload une galerie d’images. Le balisage de chaque image ressemblerait à ceci :

<img data-src="image.jpg" alt="test image">

Vous remarquerez que le chemin d’accès à l’image est contenu dans une balise data-src et non dans un attribut src attribut. La raison en est que l’utilisation de src signifie que l’image se chargerait immédiatement, ce qui n’est pas ce que vous souhaitez.

Dans le CSS, vous donnez à chaque image un min-height disons 100px. Cela donne à chaque emplacement d’image (l’élément img sans l’attribut src) une dimension verticale :

img {
  min-height: 100px;
  /* more styles here */
}

Dans le document JavaScript, vous créez ensuite un élément config et l’enregistrez avec un objet intersectionObserver instance :

// créer un objet de configuration : rootMargin et threshold 
// sont deux propriétés exposées par l'interface
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// enregistrer l'objet config avec une instance 
// d'intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
  // itérer sur chaque entrée
  entries.forEach(entry {
    // ne traiter que les images qui se croisent.
    // isIntersecting est une propriété exposée par l'interface
    if(entry.isIntersecting) {
    /. / Fonction personnalisée qui copie le chemin vers l'image 
      // de data-src à src
      preloadImage(entry.target);
      // l'image est maintenant en place, arrêtez de regarder
      self.unobserve(entry.target);
    }
  });
}, config);

Enfin, vous itérez sur toutes vos images et les ajoutez à ceci iterationObserver instance :

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img {
  observer.observe(img);
});

Les avantages de cette solution : elle est facile à mettre en œuvre, elle est efficace, et elle a l’avantage d’être facile à utiliser. intersectionObserver de faire le gros du travail en termes de calculs.

D’un autre côté, bien que l’API Intersection Observer soit prise en charge par la plupart des navigateurs dans leurs dernières versions, elle n’est pas systématiquement prise en charge par tous les navigateurs. Heureusement, un polyfill est disponible.

#3 Lozad.js – Lazyload js

Une alternative rapide et facile pour implémenter le chargement Lazyload des images est de laisser une bibliothèque JS faire le gros du travail pour vous.

Lozad est un chargeur Lazyload très performant, léger et configurable en JavaScript pur, sans aucune dépendance. Vous pouvez l’utiliser pour charger Lazyload des images, des vidéos, des iframes et bien plus encore, et il utilise l’API Intersection Observer.

Vous pouvez inclure Lozad avec npm/Yarn et l’importer à l’aide du module bundler de votre choix :

npm install --save lozad

yarn add lozad

import lozad from 'lozad';

Vous pouvez également télécharger la bibliothèque à l’aide d’un CDN et l’ajouter au bas de la page HTML dans un fichier de type < script> au bas de la page HTML :

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Ensuite, pour une implémentation de base, ajoutez la classe lozad à l’actif dans votre balisage :

<img class="lozad" data-src="img.jpg">

Enfin, instanciez Lozad dans votre document JS :

const observer = lozad();
observer.observe();

Vous trouverez tous les détails sur la façon d’utiliser la bibliothèque sur le site Web de l Dépôt GitHub de Lozad.

Si vous ne voulez pas vous plonger dans les rouages de l’API Intersection Observer ou si vous recherchez simplement une mise en œuvre rapide qui s’applique à une variété de types de contenu, Lozad est un excellent choix.

Seulement, soyez attentif à la prise en charge des navigateurs et intégrez éventuellement cette bibliothèque avec un polyfill pour l’API Intersection Observer.

#4 Chargement Lazyload avec effet d’image floue

La première chose que vous voyez est une copie floue et à basse résolution de l’image, tandis que sa version à haute résolution est chargée en Lazyload :

Vous pouvez charger en Lazyload des images avec cet effet de flou intéressant de plusieurs façons.

Voici tous les avantages de cette solution :

• Performances : seulement 463 octets de code CSS et 1 007 octets de code JavaScript réduit.
• Prise en charge des écrans rétina
• Sans dépendance : pas besoin de jQuery ni d’autres bibliothèques ou frameworks.
• Amélioration progressive pour contrer les navigateurs plus anciens et les JavaScript défaillants.

Pour réaliser ce genre d’effet, vous pouvez télécharger progressive-image.js.

#5 Yall.js – Lazyload js

Yall est un script de chargement Lazyload et riche en fonctionnalités pour les images, les vidéos et les iframes. Plus précisément, il utilise l’API Intersection Observer et recourt intelligemment aux techniques traditionnelles de gestion d’événements lorsque cela est nécessaire.

Lorsque vous incluez Yall dans votre document, vous devez l’initialiser comme suit :

<script src="yall.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", yall);
</script>

Ensuite, pour charger Lazyload un simple img tout ce que vous devez faire dans votre balisage est :

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

Notez ce qui suit :

• vous ajoutez la classe Lazyload à l’élément
• la valeur de src est une image de remplacement
• le chemin vers l’image que vous souhaitez charger Lazyload se trouve dans le champ data-src attribut

Parmi les avantages de Yall, citons :

• grande performance avec l’API Intersection Observer
• Prise en charge fantastique des navigateurs (elle remonte à IE11)
• aucune autre dépendance nécessaire

Pour en savoir plus sur ce que Yall peut offrir et pour des implémentations plus complexes, n’hésitez pas à consulter la page sur GitHub.

Conclusion

Et voilà – cinq méthodes de chargement Lazyload des images que vous pouvez commencer à expérimenter et à tester dans vos projets.