Cinq techniques pour charger paresseusement des images pour des performances de site Web –

Cet article fait partie d'une série créée en partenariat avec SiteGround . Merci de soutenir les partenaires qui rendent SitePoint possible.

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

Même lorsque est optimisé correctement les images peuvent peser un peu. Cela peut avoir un impact négatif sur le temps d'attente avant que les visiteurs puissent 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 des images qui n'interfère pas avec la perception de la vitesse.

Dans cet article, vous découvrirez cinq approches du chargement paresseux des images 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 après le contenu affiché au-dessus du pli. entièrement chargées, ou même conditionnellement, uniquement lorsqu'elles apparaissent dans la fenêtre du navigateur. Cela signifie que si les utilisateurs ne défilent pas complètement, les images placées au bas de la page ne seront même pas chargées.

Plusieurs sites Web utilisent cette approche, mais elle est particulièrement visible sur les sites contenant beaucoup d'images. Essayez de parcourir votre terrain de chasse en ligne préféré pour des photos haute résolution. Vous vous rendrez vite compte que le site Web ne charge qu'un nombre limité d'images. Lorsque vous faites défiler la page, vous verrez des images d’espace réservé se remplir rapidement d’images réelles pour la prévisualisation. Par exemple, remarquez le chargeur sur Unsplash.com : le défilement de cette partie de la page entraîne le remplacement d'un paramètre fictif par une photo en plein résolution:

Si vous vous souciez du chargement des images paresseux

Il existe au moins deux excellentes raisons de considérer le chargement paresseux des images pour votre site Web:

• Si votre site Web utilise JavaScript pour afficher du contenu ou pour le fournir 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 s’exécuter. Sur un site contenant un nombre important d’images, le chargement paresseux – ou le chargement d’images de manière asynchrone – peut faire la différence entre les utilisateurs séjournant ou quittant votre site Web.
• Etant donné que la plupart des solutions de chargement paresseux fonctionnent en chargeant des images uniquement si l'utilisateur a fait défiler l'écran à l'emplacement où les images seraient visibles dans la fenêtre d'affichage, ces images ne seront jamais chargées si les utilisateurs ne parviennent jamais à ce point. Cela signifie des économies considérables en bande passante, pour lesquelles la plupart des utilisateurs, en particulier ceux accédant au Web sur des appareils mobiles et des connexions lentes, vous remercieront.

Le chargement lent des images contribue à la performance du site Web, mais quelle est la meilleure façon de le faire?

Il n’existe pas de solution parfaite.

Si vous vivez et respirez JavaScript, la mise en œuvre 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.

Vous pouvez également naviguer sur le Web pour trouver des 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 paresseux à l'aide de l'API Intersection Observer

L'API Intersection Observer est une interface moderne que vous pouvez utiliser pour le chargement paresseux d'images et d'autres contenus.

Voici comment MDN introduit 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 de visualisation d'un document de niveau supérieur.
  

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

Denys Mishunov propose un excellent didacticiel sur Intersection Observer et sur le chargement paresseux d'images qui l'utilisent. Voici sa solution.

Disons que vous souhaitez charger une galerie d’images paresseuse. Le balisage de chaque image ressemblerait à ceci:

Notez comment le chemin d'accès à l'image est contenu dans un attribut data-src et non pas un attribut src . . La raison en est que l'utilisation de src signifie que l'image serait immédiatement chargée, ce qui n'est pas ce que vous voulez.

Dans le CSS, vous attribuez à chaque image une valeur min-height . , disons 100px . Cela donne à chaque espace réservé pour l'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 vous l'enregistrez avec une instance de intersectionObserver :

 // crée un objet de configuration: rootMargin and 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
// d'intersectionObserver
let observer = new intersectionObserver (fonction (entrées, auto) {
  // itérer sur chaque entrée
  entries.forEach (entry => {
    // 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 d'accès à 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 d'itérationObserver:

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

Avantages de cette solution: mise en oeuvre simple, efficace, et intersectionObserver fait le gros 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, n’est pas toujours pris 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 .

# 2 de Robin Osborne, Progressively Enhanced Lazy Loading

Robin Osborne propose une solution extrêmement ingénieuse basée sur l'amélioration progressive . Dans ce cas, le chargement différé lui-même, obtenu à l'aide de JavaScript, est considéré comme une amélioration par rapport au HTML et aux CSS normaux.

Pourquoi l'amélioration progressive? Eh bien, si vous affichez des images à l'aide d'une solution JavaScript, qu'arrivera-t-il si JavaScript est désactivé ou si une erreur empêche le script de fonctionner comme prévu? Dans ce cas, sans amélioration progressive, les utilisateurs ne verront probablement aucune image. Pas cool.

Vous pouvez voir les détails d'une version de base de la solution d'Osborne dans ce Pen et une version plus complète, qui prend en compte les arguments de en JavaScript rompu ici .

Cette technique présente de nombreux avantages:

• L’approche d’amélioration progressive garantit aux utilisateurs un accès permanent au contenu
• . JavaScript n'est pas disponible, mais également dans les cas où JavaScript est brisé : nous savons tous à quel point les scripts sont sujets aux erreurs, en particulier dans un environnement où un nombre important de scripts sont en cours d'exécution.
• charge les images sur le défilement, de sorte que toutes les images ne seront pas chargées si les utilisateurs ne font pas défiler jusqu'à leur emplacement dans le navigateur.
• Il ne s'appuie sur aucune dépendance externe, aucun cadre ni plugin n'est donc nécessaire.

Vous peut apprendre tous les détails de l'approche de Robin Osborne sur son ​​blog .

# 3 Lozad.js

Une solution simple et rapide pour mettre en œuvre le chargement paresseux d'images consiste à laisser une bibliothèque JS s'occuper de tout le travail à votre place.

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

Vous pouvez inclure Lozad avec npm / Yarn et l'importer à l'aide de votre bundler de module choisi:

 npm install - -save lozad

fils add lozad 

 import lozad depuis 'lozad'; 

Vous pouvez également télécharger la bibliothèque à l'aide d'un CDN et l'ajouter au bas de la page HTML d'un script <
> [19459025>>19459025] tag:

Ensuite, pour une implémentation de base, ajoutez la classe lozad à l'actif de votre marquage:

Enfin, instanciez Lozad dans votre document JS:

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

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

Si vous ne voulez pas plonger dans les travaux de Intersection Observer API 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, soyez attentif au support du navigateur et intégrez éventuellement cette bibliothèque à un polyfill pour Intersection. Observer API.

N ° 4 Chargement paresseux avec effet d'image floue

Si vous êtes un lecteur Medium vous avez certainement remarqué comment le site charge l'image principale à l'intérieur d'un message.

The first Ce que vous voyez est une copie floue et basse résolution de l'image alors que sa version haute résolution est chargée paresseuse:

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

Image chargée paresseuse en haute résolution sur le site Medium.

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

   Ma technique préférée est celle de Craig Buckler. Voici tout le bien de cette solution:
 

• Performances: seulement 463 octets de CSS et 1 007 octets de code JavaScript minifié
• Prise en charge des écrans de rétine
• Sans dépendance: aucune bibliothèque ni framework jQuery requis
• Amélioré progressivement pour contrecarrer les anciens navigateurs et les échecs JavaScript

Vous pouvez en savoir plus à ce sujet dans Comment construire votre propre chargeur d'images progressif et télécharger le code sur le projet GitHub repo .

# 5 Yall.js [19659006] Yall est un script de chargement paresseux 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 de gestion d’événements traditionnelles, le cas échéant.

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

Ensuite, pour charger paresseux un simple élément img il vous suffit de:

Notez ce qui suit:

• ] Vous ajoutez la classe lazy à l'élément
• . La valeur de src est une image de remplacement
• . Le chemin d'accès à l'image que vous voulez charger paresseux se trouve à l'intérieur de la . ] attribut data-src .

Parmi les avantages de Yall, on peut citer:

• Excellentes performances avec l'API Intersection Observer
• Prise en charge de navigateur fantastique (elle retourne à 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 manières de chargement paresseux d'images que vous pouvez commencer à expérimenter et à tester dans vos projets.

Maria Antonietta Perna est corédactrice du canal HTML / CSS de SitePoint et développeur web front-end. Elle aime bricoler avec les normes CSS rigoureuses et est curieuse d’apprendre des approches pédagogiques du code frontal. Lorsqu'elle ne code pas pour le Web ou n'écrit pas pour le Web, elle aime les livres de philosophie, les longues promenades et la bonne nourriture.