Catégories
Astuces et Design

Cinq façons de charger des images paresseusement pour de meilleures performances de site Web – SitePoint

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

Même lorsqu'elles sont correctement optimisées, 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'image qui n'interfère pas avec la perception de la vitesse.

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

Le chargement d'images paresseux signifie le chargement d'images sur des sites Web de manière asynchrone – c'est-à-dire une fois que le contenu au-dessus de la ligne de flottaison est entièrement chargé, ou même conditionnellement, uniquement lorsqu'elles apparaissent dans la fenêtre d'affichage 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:

Chargement paresseux en action sur Unsplash.com

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

Il y a 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é 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 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'à l'emplacement où les images seraient visibles à l'intérieur de la fenêtre, ces images ne seront jamais chargées si les utilisateurs n'y arrivent jamais. 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 je suis tombé sur ces cinq techniques intéressantes.

# 1 Native Lazy Loading

Le chargement paresseux natif des images et des 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 du src la valeur de l'attribut, simplement du vieux HTML.

le loading L'attribut 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. loading peut prendre l'une de ces trois valeurs:

  • lazy: fonctionne très bien pour le chargement paresseux
  • eager: demande au navigateur de charger immédiatement le contenu spécifié
  • auto: laisse l'option au chargement paresseux ou non au chargement paresseux jusqu'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 loading , tous les navigateurs ne sont pas encore intégrés.

Pour un article détaillé sur cette fonctionnalité géniale pour le chargement d'images paresseuses, y compris les solutions de contournement du navigateur, ne manquez pas le «chargement paresseux d'images natives pour le Web d'Addy Osmani!».

# 2 Chargement différé à l'aide de l'API Intersection Observer

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 permet d'observer de manière asynchrone les changements dans l'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre de visualisation 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.

Denys Mishunov a un excellent tutoriel à la fois sur l'observateur d'intersection et sur le chargement d'images paresseuses en l'utilisant. Voici à quoi ressemble sa solution.

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

tester l'image

Remarquez comment le chemin d'accès à l'image est contenu dans un data-src attribut, pas un src attribut. La raison en est que l'utilisation 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 un min-height valeur, disons 100px. Cela donne à chaque espace réservé 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 config objet et l'enregistrer avec un intersectionObserver exemple:

// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
  // iterate over each entry
  entries.forEach(entry => {
    // process just the images that are intersecting.
    // isIntersecting is a property exposed by the interface
    if(entry.isIntersecting) {
      // custom function that copies the path to the img
      // from data-src to src
      preloadImage(entry.target);
      // the image is now in place, stop watching
      self.unobserve(entry.target);
    }
  });
}, config);

Enfin, vous parcourez toutes vos images et les ajoutez à ce iterationObserver exemple:

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, elle est efficace, et a le intersectionObserver 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 toujours 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

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 bundle de module de votre choix:

npm install --save lozad

yarn add lozad
import lozad from '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 un < script> étiquette:


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 la façon dont vous pouvez utiliser 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 si vous recherchez simplement une implémentation rapide qui s'applique à une variété de types de contenu, Lozad est un excellent choix.

Seulement, faites attention au support 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 une copie floue et basse résolution de l'image, tandis que sa version haute résolution est chargée paresseusement:

Image d'espace réservé floue sur le site Web Medium
Image d'espace réservé floue sur le site Web Medium
Image haute résolution paresseuse sur le site Web Medium.
Image haute résolution paresseuse sur le site Web Medium

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

Ma technique préférée est celle de Craig Buckler. Voici toutes les qualités de cette solution:

  • Performances: seulement 463 octets de CSS et 1 007 octets de code JavaScript minifié
  • Prise en charge des écrans rétine
  • Sans dépendance: aucune jQuery ou autres bibliothèques et frameworks requis
  • Amélioré progressivement pour contrer les anciens navigateurs et l'échec de JavaScript

Vous pouvez tout lire à ce sujet dans Comment créer votre propre chargeur d'images progressif et télécharger le code sur le dépôt GitHub du projet.

# 5 Yall.js

Yall est un script riche en fonctionnalités et à chargement paresseux pour les images, les vidéos et les iframes. Plus précisément, il utilise l'API Intersection Observer et se rabat intelligemment sur les techniques traditionnelles de gestion d'événements, si nécessaire.

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



Ensuite, pour charger paresseusement un simple img élément, tout ce que vous devez faire dans votre balisage est:

Texte alternatif pour décrire l'image.

Notez les points suivants:

  • vous ajoutez la classe paresseux à l'élément
  • la valeur de src est une image d'espace réservé
  • le chemin vers l'image que vous souhaitez charger paresseux est à l'intérieur du data-src attribut

Parmi les avantages de Yall:

  • grandes performances avec l'API Intersection Observer
  • support fantastique du navigateur (il 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 du projet sur GitHub.

Conclusion

Et voilà, cinq façons de charger des images paresseuses que vous pouvez commencer à expérimenter et à tester dans vos projets.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *