Cinq façons de charger des images paresseusement pour de meilleures performances de site 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 est correctement optimisé les images peuvent peser un peu. Cela peut avoir un impact négatif sur le temps que les visiteurs doivent attendre avant d'accéder au contenu de votre site Web. Il y a de fortes chances qu'ils s'impatientent et naviguent ailleurs, à moins que vous ne trouviez une solution au chargement d'images qui n'interfère pas avec la perception de la vitesse.

Dans cet article, vous découvrirez cinq approches du chargement d'images paresseuses. 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 paresseux?

Le chargement d'images paresseuses signifie le chargement d'images sur des sites Web de manière asynchrone, c'est-à-dire après le contenu au-dessus de la ligne de flottaison est entièrement chargé, voire conditionnellement, uniquement lorsqu'il apparaît dans la fenêtre du navigateur. Cela signifie que si les utilisateurs ne défilent pas complètement vers le bas, les images placées au 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 riches 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. En faisant défiler la page, vous verrez des images d'espace réservé se remplir rapidement d'images réelles pour un aperçu. Par exemple, remarquez le chargeur sur Unsplash.com : le défilement de cette partie de la page en vue déclenche le remplacement d'un espace réservé par une photo en pleine résolution:

Pourquoi devriez-vous vous soucier du chargement d'images paresseuses?

Il existe au moins quelques excellentes raisons pour lesquelles vous devriez envisager de charger des images paresseuses pour votre site Web:

• Si votre site Web utilise JavaScript pour afficher du contenu ou fournir une sorte de fonctionnalité pour les 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 avec un nombre important d'images, le chargement paresseux – ou le chargement d'images de manière asynchrone – pourrait faire la différence entre les utilisateurs qui restent ou quittent votre site Web.
• Étant donné que la plupart des solutions de chargement paresseux fonctionnent en chargeant des images uniquement si l'utilisateur a fait défiler jusqu'à emplacement où les images seraient visibles à l'intérieur de la fenêtre, ces images ne seront jamais chargées si les utilisateurs ne parviennent jamais à ce point. Cela signifie des économies considérables de bande passante, pour lesquelles la plupart des utilisateurs, en particulier ceux qui accèdent au Web sur des appareils mobiles et des connexions lentes, vous remercieront.

Eh bien, le chargement d'images paresseuses contribue aux performances du site Web, mais quelle est la meilleure façon de procéder

Il n'y a pas de moyen parfait.

Si vous vivez et respirez JavaScript, l'implémentation de votre propre solution de chargement paresseux ne devrait pas être un problème. Rien ne vous donne plus de contrôle que de coder quelque chose vous-même.

Alternativement, vous pouvez parcourir le Web pour trouver des approches viables et commencer à les expérimenter. C'est exactement ce que j'ai fait et j'ai découvert ces cinq techniques intéressantes.

# 1 Le chargement paresseux natif

Le chargement paresseux natif d'images et d'iframes est super cool. Rien de plus simple que le balisage ci-dessous:

Comme vous pouvez le voir, pas de JavaScript, pas d'échange dynamique de la valeur de l'attribut src tout simplement du vieux HTML.

L'attribut de chargement nous donne la possibilité de retarder les images hors écran et les iframes jusqu'à ce que les utilisateurs défilent jusqu'à leur emplacement sur la page. chargement peut prendre l'une de ces trois valeurs:

• paresseux : fonctionne très bien pour le chargement paresseux
• désireux : demande au navigateur de charger le contenu spécifié tout de suite
• auto : laisse l'option de chargement paresseux ou de non chargement paresseux au navigateur.

Cette méthode n'a pas de rivaux: elle n'a aucun frais généraux, elle est propre et simple. Cependant, bien qu'au moment de la rédaction de ce document, la plupart des principaux navigateurs prennent en charge un bon support pour l'attribut de chargement tous les navigateurs ne sont pas encore intégrés.

Pour un article détaillé sur ce sujet fonctionnalité géniale pour les images à chargement paresseux, y compris les solutions de contournement de la prise en charge du navigateur, ne manquez pas « Chargement paresseux d'images natives d'Addy Osmani pour le Web! ».

# 2 Chargement paresseux en utilisant l'API Intersection Observer [19659005] L'API Intersection Observer est une interface moderne que vous pouvez exploiter pour le chargement d'images et d'autres contenus paresseux.

Voici comment MDN présente cette API:

L'API Intersection Observer fournit un moyen de manière asynchrone observer les changements dans 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, c'est l'intersection d'un élément avec un autre.

Denys Mishunov a une grande tuteur ial sur l'observateur d'intersection et sur le chargement d'images paresseuses l'utilisant. Voici à quoi ressemble sa solution.

Supposons que vous souhaitiez charger paresseusement une galerie d'images. Le balisage de chaque image ressemblerait à ceci:

Remarquez comment le chemin d'accès à l'image est contenu dans un attribut data-src et non un attribut src . 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 voulez.

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

 img {
  hauteur min: 100px;
  / * plus de styles ici * /
}

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

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

// enregistre l'objet config avec une instance
// de intersectionObserver
let observer = new intersectionObserver (fonction (entrées, auto) {
  // itère sur chaque entrée
  entries.forEach (entrée => {
    // traite uniquement 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'img
      // de data-src à src
      preloadImage (entry.target);
      // l'image est maintenant en place, arrêtez de regarder
      self.unobserve (entry.target);
    }
  });
}, config);

Enfin, vous parcourez toutes vos images et les ajoutez à cette instance iterationObserver :

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

Les mérites de cette solution: c'est un jeu d'enfant à mettre en œuvre, c'est efficace, et le intersectionObserver fait le gros du travail en termes de calculs.

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

Vous pouvez en savoir plus sur l'API Intersection Observer et les détails de cette implémentation dans l'article de Denys .

# 3 Lozad.js [19659005] Une alternative rapide et facile pour implémenter le chargement paresseux d'images est de laisser une bibliothèque JS faire la plupart du travail pour vous.

Lozad est un chargeur paresseux hautement performant, léger et configurable en JavaScript pur sans dépendances. Vous pouvez l'utiliser pour charger des images, des vidéos, des iframes paresseux et plus encore, et il utilise l'API Intersection Observer.

Vous pouvez inclure Lozad avec npm / Yarn et l'importer en utilisant le module de votre choix:

 npm install - -sauver lozad

fil ajouter lozad

 importer lozad de 'lozad';

Alternativement, vous pouvez simplement télécharger la bibliothèque à l'aide d'un CDN et l'ajouter au bas de la page HTML dans une balise :

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

Enfin, instanciez Lozad dans votre document JS:

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

Vous trouverez tous les détails sur l'utilisation de la bibliothèque sur le référentiel Lozad GitHub .

Si vous ne voulez pas vous plonger dans le fonctionnement de l'API Intersection Observer ou vous 'recherchons simplement une implémentation rapide qui s'applique à une variété de types de contenu, Lozad est un excellent choix.

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

# 4 Chargement paresseux avec effet d'image floue

Si vous êtes un lecteur moyen vous avez certainement remarqué comment le site charge l'image principale dans un message.

La première chose que vous voyez est un copie floue et basse résolution de l'image, tandis que sa version haute résolution est chargée paresseusement: