Les images sont essentielles pour chaque site Web et chaque application aujourd’hui. Qu’il s’agisse de bannières publicitaires, d’images de produits ou de logos, il est impossible d’imaginer un site Web sans images. Malheureusement, les images sont de grande taille, ce qui en fait le principal contributeur à la taille de la page. Selon les dernières données d’archive HTTP , la taille moyenne des pages sur desktop est de 1511 Ko. Les images représentent près de 650 Ko de cette taille, soit environ 45% de la taille totale de la page. Maintenant, bien que nous ne puissions pas supprimer les images, nous devons quand même charger nos pages Web très rapidement. Dans ce guide, nous parlerons du chargement des images en lazy loading, une technique qui aide à améliorer le temps de chargement de la page et à réduire la taille de la page tout en conservant toutes les images de la page.

Qu’est-ce que le lazy loading (ou chargement paresseux) ?

Le mot «lazy» en anglais est souvent attribué au fait d’éviter le travail le plus longtemps possible.

De même, le lazy loading diffère le chargement des ressources sur la page tant qu’elles ne sont pas nécessaires. Au lieu de charger ces ressources dès que la page se charge, ce qui se produit normalement, nous reportons le chargement de ces ressources à un moment ultérieur lorsqu’elles sont réellement nécessaires.

Le Lazy Loading est un ensemble de techniques de développement Web et d’applications qui reporte le chargement des ressources d’une page à un moment ultérieur – lorsque ces ressources sont réellement nécessaires au lieu de les charger en amont. Ces techniques aident à améliorer les performances, à mieux utiliser les ressources de l’appareil et à réduire les coûts associés.

La technique du chargement différé peut être appliquée à presque toutes les ressources d’une page. Par exemple, dans une application à une seule page, si un fichier JS n’est requis que plus tard, il est préférable de ne pas le charger initialement . Si une image n’est pas nécessaire, chargez-la plus tard lorsque cela est réellement nécessaire.

Ici, nous nous en tiendrons aux chargement des images en lazy loading et à la manière de le faire sur votre site Web.

Pourquoi opter pour le chargement différé des images en lazy loading ?

Lazy Loading diffère le chargement d’une image qui n’est pas nécessaire sur la page immédiatement. Une image qui n’est pas visible pour l’utilisateur lorsque la page est affichée est chargée ultérieurement lorsque l’utilisateur fait défiler et que l’image devient réellement visible. Si l’utilisateur ne fait jamais défiler, une image qui n’est pas visible pour l’utilisateur n’est jamais chargée.

Cela présente deux avantages principaux.

1. Amélioration du rendement

Le plus important pour vous en tant qu’administrateur de site Web : de meilleures performances et un meilleur temps de chargement. Avec le chargement différé, vous réduisez le nombre d’images à charger initialement sur la page. Des demandes de ressources moindres signifient moins d’octets à télécharger et moins de concurrence pour la bande passante de l’utilisateur. Cela garantit que l’appareil peut télécharger et traiter les ressources restantes beaucoup plus rapidement. Par conséquent, la page devient utilisable beaucoup plus tôt par rapport au cas sans chargement différé.

2. réduction des coûts

Le deuxième avantage pour vous concerne les coûts de livraison. La livraison d’images ou la livraison de toute autre ressource est généralement facturée en fonction du nombre d’octets transférés. Comme mentionné précédemment, avec un lazy loading, si l’image n’est pas visible, elle ne sera jamais chargée. Ainsi, vous réduisez le nombre total d’octets fournis sur la page. Surtout pour les utilisateurs qui rebondissent sur la page ou n’interagissent qu’avec la partie supérieure de la page. Cette réduction des octets transférés depuis votre réseau de distribution réduit les coûts de livraison. Cela deviendra plus évident lorsque nous explorerons le lazy loading dans les sections à venir.

Quelles images peuvent être chargées en lazy loading ?

L’idée de base du lazy loading est simple : différer le chargement de tout ce qui n’est pas nécessaire pour le moment. Pour les images, cela se traduit généralement par le fait que toute image qui n’est pas visible par l’utilisateur à l’avance peut être chargée en différée. Lorsque l’utilisateur fait défiler la page, les espaces réservés à l’image commencent à apparaître dans la fenêtre d’affichage (partie visible de la page Web). Nous déclenchons la charge pour ces images lorsqu’elles deviennent visibles.

À l’aide de l’outil d’audit Google Lighthouse, vous pouvez savoir quelles images sont susceptibles d’être chargées par défaut et combien d’octets vous pouvez enregistrer sur le chargement initial de la page . L’audit effectué par cet outil comporte une section dédiée aux images hors écran . Vous pouvez également utiliser l’analyseur de site Web d’ImageKit pour déterminer si votre site Web utilise un chargement différé ou non, en plus des autres optimisations liées à l’image sur votre page.

Le chargement différé est essentiel non seulement pour de bonnes performances, mais aussi pour offrir une bonne expérience utilisateur à vos utilisateurs. Étant donné que combiner performance et expérience utilisateur avec un chargement différé est important et difficile, nous continuerons à aborder ce sujet plus en détail tout au long de ce guide après avoir examiné différentes manières de charger des images par chargement.

Techniques de lazy loading pour les images

Les images d’une page Web peuvent être chargées de deux manières – en utilisant la balise <img /> ou en utilisant la propriété CSS "background". Nous allons d’abord examiner la plus commune des deux, la balise <img />, puis passer aux images d’arrière-plan CSS.

Le concept général de lazy loading des images dans la balise <img />

Les images de lazy loading peuvent être décomposées en deux étapes

La première étape consiste à empêcher le chargement de l’image à l’avance. Pour les images chargées à l’aide de la balise <img />, le navigateur utilise l’attribut src de la balise pour déclencher le chargement de l’image. Peu importe que ce soit la 1ère ou la 1000ème image de votre HTML et bien hors écran. Si le navigateur obtient l’attribut src, cela déclenche le chargement de l’image.

Ainsi, pour charger de telles images, placez l’URL de l’image dans un attribut autre que src. Disons que nous spécifions l’URL de l’image dans l’attribut data-src de la balise image. Maintenant que src est vide, le navigateur ne déclenche pas le chargement de l’image.

<img data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg" />

Maintenant que nous avons arrêté la charge initiale, nous devons dire au navigateur quand charger l’image. Pour cela, nous vérifions que dès que l’image (c’est-à-dire son espace réservé) entre dans la fenêtre, nous déclenchons le chargement. Pour vérifier quand une image entre dans la fenêtre, il y a deux façons. Regardons les deux avec des exemples.

Déclencher une charge d’image à l’aide d’événements Javascript

Dans cette technique, nous utilisons des écouteurs d’événement sur les événements scrollresize et orientationChange dans le navigateur. L’événement scroll est évident pour vérifier quand l’utilisateur fait défiler la page. Les événements resize et orientationChange sont tout aussi importants pour le chargement différé. L’événement resize se produit lorsque la taille de la fenêtre du navigateur change. L’événement orientationChange est déclenché lorsque le périphérique est pivoté du mode paysage au mode portrait ou inversement. Dans ce cas, le nombre d’images visibles à l’écran changera. Il faudrait donc déclencher une charge pour ces images.

Lorsque l’un de ces événements se produit, nous trouvons toutes les images sur la page qui doivent être chargées en différé et qui n’ont pas encore été chargées. A partir de ces images, nous vérifions celles qui sont maintenant dans la fenêtre d’affichage. Ceci est fait en utilisant le décalage supérieur de l’image, le haut du document et la hauteur de la fenêtre. S’il est entré dans la fenêtre d’affichage, nous choisissons l’URL de l’attribut data-src et la mettons dans l’attribut src. Cela déclenche le chargement de l’image. Nous supprimons également la classe lazy qui identifie les images à charger en différé pour les événements qui se déclenchent ultérieurement. Une fois toutes les images chargées, nous supprimons les écouteurs d’événement.

Lorsque nous faisons défiler, l’événement de défilement se déclenche plusieurs fois rapidement. Ainsi, pour les performances, nous ajoutons un petit délai qui limite l’exécution de la fonction de chargement différé.

Voici un exemple concret de cette approche.

<img  src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/zendevs-pano-code-red.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/wordpress-581849_1920.jpg?tr=w-400,h-300" />
/* Code Css */
img {
  background: #c9c9c9;
  width: 400px;
  height: 300px;
  display: block;
  margin: 1rem auto;
  border: 0;
}
// code javascript
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;
  
  function lazyload () {
    if(lazyloadThrottleTimeout) {
      clearTimeout(lazyloadThrottleTimeout);
    }    
    
    lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
    }, 20);
  }
  
  document.addEventListener("scroll", lazyload);
  window.addEventListener("resize", lazyload);
  window.addEventListener("orientationChange", lazyload);
});

Si vous aviez remarqué, la 1 première image de l’exemple est chargée en amont. L’URL est présente directement dans l’attribut src au lieu de l’attribut data-src. Ceci est essentiel pour une bonne expérience utilisateur. Ces images étant en haut de la page, elles doivent être visibles dès que possible. Nous ne devons pas attendre qu’un événement ou une exécution JS les charge.

Utilisation de l’API Intersection Observer pour déclencher le chargement des images

Intersection Observer API est une API relativement nouvelle dans les navigateurs. Il est très simple de détecter le moment où un élément entre dans la fenêtre d’affichage et d’agir quand il le fait. Dans la méthode précédente, nous devions lier des événements, garder à l’esprit les performances et implémenter un moyen de calculer si l’élément était dans la fenêtre d’affichage ou non. L’API Intersection Observer rend cela très simple, aide à éviter les calculs et offre de bonnes performances.

Vous trouverez ci-dessous un exemple d’utilisation de l’API Intersection Observer pour charger des images en différé. Nous attachons l’observateur sur toutes les images à charger en lazy load. Une fois que l’API détecte que l’élément est entré dans la fenêtre, en utilisant la propriété isIntersecting, nous sélectionnons l’URL de l’attribut data-src et la déplaçons dans l’attribut src pour que le navigateur déclenche le chargement de l’image. Une fois que cela est fait, nous supprimons la classe lazy de l’image et supprimons également l’observateur de cette image.

<img  src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/zendevs-pano-code-red.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/wordpress-581849_1920.jpg?tr=w-400,h-300" />
/* Code Css */
img {
  background: #c9c9c9;
  width: 400px;
  height: 300px;
  display: block;
  margin: 1rem auto;
  border: 0;
}
// code javascript
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

Si vous comparez les temps de chargement des images pour les deux méthodes, les écouteurs d’événement et Intersection Observer, vous constaterez qu’en utilisant l’API Intersection Observer, le chargement de l’image est beaucoup plus rapide et le site ne semble pas lent. Dans la méthode impliquant des écouteurs d’événement, nous avons dû ajouter un délai d’expiration pour le rendre performant, ce qui a un impact légèrement négatif sur l’expérience utilisateur lorsque le chargement de l’image est déclenché avec un léger retard.

Cependant, comme tout ce qui est nouveau dans les navigateurs, la prise en charge de l’API Intersection Observer n’est pas disponible sur tous les navigateurs. Nous devons donc utiliser la méthode de l’écouteur d’événements dans les navigateurs où l’API Intersection Observer n’est pas prise en charge. Nous en avons tenu compte dans l’exemple ci-dessus.

Lazy Loading Images d’arrière-plan CSS

Après les balises <img />, les images d’arrière-plan constituent le moyen le plus courant de charger des images sur une page Web. Pour les balises <img />, le navigateur a une approche très simple: si l’URL de l’image est disponible, chargez l’image.

Avec les images d’arrière-plan CSS, ce n’est pas si simple. Pour charger des images d’arrière-plan CSS, le navigateur doit créer l’arborescence DOM (Document Object Model) ainsi que l’arborescence CSSOM (CSS Object Model) pour déterminer si le style CSS s’applique à un nœud DOM du document actuel. Si la règle CSS spécifiant l’image d’arrière-plan ne s’applique pas à un élément du document, le navigateur ne charge pas l’image d’arrière-plan. Si la règle CSS est applicable à un élément du document en cours, le navigateur charge l’image.

Cela peut sembler complexe au début, mais ce même comportement constitue la base de la technique de lazy loading des images d’arrière-plan. En d’autres termes, nous obligeons le navigateur à ne pas appliquer la propriété CSS background-image à un élément, jusqu’à ce que cet élément entre dans la fenêtre d’affichage.

Voici un exemple de chargement lazy loading pour une image de fond CSS.

<div id="container">
  <h3>Lazy loading CSS avec les images de fond</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ligula non lorem facilisis finibus. Suspendisse turpis lacus, tempus sit amet dignissim sit amet, pretium non sem. Ut malesuada purus ac magna placerat, tempus commodo turpis consectetur. Nunc vitae metus vehicula nunc congue varius. Suspendisse egestas urna non finibus feugiat. Vestibulum maximus, nunc et tempus convallis, dui ante vestibulum est, in lobortis purus sapien eget lacus. Suspendisse cursus enim non quam mollis imperdiet. Pellentesque convallis eget nunc vitae fringilla. Fusce interdum, velit semper varius aliquet, eros sapien facilisis erat, iaculis vulputate erat arcu vel neque. Suspendisse dignissim hendrerit lorem. Etiam metus ex, finibus vitae iaculis vitae, iaculis non ex. Phasellus commodo id ante id consequat. Nunc consectetur viverra lacus non fringilla. Pellentesque nec nisl vulputate, sagittis nisl id, venenatis nisi. Nunc malesuada tellus a elit suscipit tempor.
  </p>
  <p>
Nam lacinia tortor quis volutpat lacinia. Aliquam in orci in nunc vehicula maximus. Phasellus elementum nulla augue, at aliquam sem pulvinar dapibus. Vivamus molestie venenatis risus pulvinar interdum. Phasellus blandit tortor eget nulla sagittis auctor. Cras sed leo in velit lobortis euismod. Suspendisse non ante tellus.
  </p>
  <div id="bg-image" class="lazy"></div>
  <p>
Nam lacinia tortor quis volutpat lacinia. Aliquam in orci in nunc vehicula maximus. Phasellus elementum nulla augue, at aliquam sem pulvinar dapibus. Vivamus molestie venenatis risus pulvinar interdum. Phasellus blandit tortor eget nulla sagittis auctor. Cras sed leo in velit lobortis euismod. Suspendisse non ante tellus.
  </p>
</div>
/* Code Css */
#bg-image.lazy {
   background-image: none;
   background-color: #F1F1FA;
}
#bg-image {
  background-image: url("https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-600,h-400");
  max-width: 600px;
  height: 400px;
}
// code javascript
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

Une chose à noter ici est que le code Javascript pour le chargement différé est toujours le même. Nous utilisons la méthode API Intersection Observer avec un retour aux écouteurs d’événements. L’astuce réside dans le CSS.

L’élément avec l’ID bg-image a une background-image spécifiée dans le CSS. Cependant, lorsque la classe lazy est ajoutée à cet élément, dans le CSS, nous remplaçons la propriété background-image et la définissons sur none. Comme la règle, combinée #bg-image avec la classe .lazy a une préférence plus élevée en CSS que simplement #bg-image, le navigateur applique initialement la propriété background-image: none à l’élément. Lorsque nous défilons vers le bas, l’observateur d’intersection (ou les écouteurs d’événement) détecte que l’image se trouve dans la fenêtre d’affichage, elle supprime la classe lazy. Cela modifie le CSS applicable et applique la propriété réelle background-image à l’élément déclenchant le chargement de l’image d’arrière-plan.

Meilleure expérience utilisateur avec des images de lazy loading

Le lazy loading présente un grand avantage en termes de performances. Pour une entreprise de commerce électronique qui charge des centaines d’images de produits sur une page, le chargement différé peut améliorer considérablement le temps de chargement de la page initiale tout en réduisant la consommation de bande passante. Cependant, beaucoup d’entreprises n’optent pas pour le lazy loading, car elles estiment que cela va à l’encontre de la qualité de l’expérience utilisateur – le paramètre initial est moche, les temps de chargement sont lents, etc.

Expérience utilisateur avec chargement d’images en lazy load.

1. Utiliser les espaces réservés à l’image

Un espace réservé est ce qui apparaît dans le conteneur jusqu’à ce que l’image réelle soit chargée. Normalement, nous voyons des développeurs qui utilisent un espace réservé de couleur unie pour les images ou une image unique comme espace réservé pour toutes les images.

Nous avons utilisé la même chose dans notre exemple de code. Une couleur gris clair solide est utilisée pour tous nos arrière-plans d’image. Cependant, nous pouvons faire mieux pour fournir une expérience utilisateur plus agréable. Vous trouverez ci-dessous quelques exemples d’utilisation de meilleurs espaces réservés pour nos images.

a. Couleur dominante en fonction de l’image

Au lieu d’utiliser une couleur fixe pour l’espace réservé à l’image, nous trouvons la couleur dominante à partir de l’image d’origine et l’utilisons comme espace réservé. Cette technique est utilisée depuis un certain temps dans les résultats de recherche d’images Google et Pinterest.

Exemple d’image tiré de Pinterest
Pinterest utilisant des espaces réservés de couleur dominante

Cela peut sembler complexe à réaliser. Mais une manière très simple d’y parvenir est de réduire l’image à 1 × 1 pixel, puis de la mettre à l’échelle jusqu’à la taille de l’espace réservé – une approximation très grossière, mais une façon simple d’obtenir une seule couleur dominante.

La taille de l’espace réservé est de moins de 1 Koctets par rapport à l’image originale. Cela fournit une expérience de transition plus agréable de l’espace réservé à l’image réelle.

b. Espace réservé avec images de faible qualité (FQ)

Nous pouvons étendre l’idée ci-dessus d’utiliser un espace réservé à la couleur dominante. Au lieu d’utiliser une seule couleur, nous utilisons une version floue de qualité inférieure de l’image d’origine comme espace réservé. Cela donne non seulement un meilleur aspect, mais donne également à l’utilisateur une idée de ce à quoi s’attendre dans l’image réelle et donne l’impression que le chargement de l’image est en cours. C’est excellent pour améliorer l’expérience de chargement perçue. Cette technique a été utilisée par Facebook et Medium.com pour des images sur leurs sites Web et leurs applications.

Le LQIP a une taille de 1300 octets, soit presque 10 fois moins que l’image originale et une amélioration significative de l’expérience visuelle par rapport à toute autre technique de substitution.

Des exemples vidéo des deux techniques ci-dessus montrent clairement que l’utilisation d’espaces réservés de couleur dominante ou l’utilisation d’espaces réservés aux images de faible qualité facilitent la transition entre les paramètres fictifs et l’image réelle. place de cet espace réservé et améliore la perception du chargement.

2. Ajout de délai pour le chargement de l’image

Lorsque nous avons discuté des différentes méthodes pour déclencher la charge d’image ci-dessus, nous avons vérifié le moment où l’image entre dans la fenêtre, c’est-à-dire qu’elle coïncide avec le bord inférieur de la fenêtre.

Le problème

Souvent, les utilisateurs font défiler très rapidement la page et l’image nécessite un certain temps de chargement et apparaît à l’écran. Dans ce scénario, combiné au fait que l’événement de chargement d’image peut être déclenché avec un retard en raison de la limitation, vous devez souvent faire face au scénario où les espaces réservés entrent dans la fenêtre, l’utilisateur attend quelques millisecondes et l’image apparaît. Ce délai rend l’expérience utilisateur médiocre.

Bien que l’utilisation d’Observateurs d’Intersection pour charger l’image ou d’espaces réservés avec des images de mauvaise qualité offre de meilleures performances de chargement et d’expérience utilisateur, il y a un autre moyen que vous pouvez utiliser pour vous assurer que les images sont toujours chargées complètement lorsqu’elles entrent dans le viewport : introduire une marge au point de déclenchement de l’image.

La solution

Au lieu de charger l’image juste au moment où ils entrent exactement dans la fenêtre d’affichage, chargez les images lorsqu’elles sont, disons, 500 fois plus éloignées de la fenêtre d’affichage. Cela fournit du temps supplémentaire, entre le déclencheur de chargement et l’entrée réelle dans la fenêtre, pour que les images soient chargées.

Avec l’API Intersection Observer, vous pouvez utiliser le paramètre `root` avec le paramètre` rootMargin` (fonctionne comme une règle de marge CSS standard), pour augmenter le cadre de sélection effectif considéré pour trouver «l’intersection». Avec la méthode écouteur d’événement, au lieu de vérifier que la différence entre le bord de l’image et le bord de la fenêtre d’affichage est égale à 0, nous pouvons utiliser un nombre positif pour ajouter un seuil.

L’exemple ci dessous utilise un seuil de 500px pour charger des images.

<div id="container">
<img  src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-400,h-300" />
<img  src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-400,h-300" />
<img  src="https://www.zendevs.xyz/wp-content/uploads/2017/06/hackers-code-wordpress.jpeg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/zendevs-pano-code-red.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/wordpress-581849_1920.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/zendevs-pano-code-red.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/wordpress-581849_1920.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/zendevs-pano-code-red.jpg?tr=w-400,h-300" />
<img  class="lazy" data-src="https://www.zendevs.xyz/wp-content/uploads/2017/06/wordpress-581849_1920.jpg?tr=w-400,h-300" />
</div>
/* Code Css */
img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

#container {
  height: 420px;
  overflow-y: scroll;
}
// code javascript
$(document).ready(function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      console.log(observer);
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    }, {
      root: document.querySelector("#container"),
      rootMargin: "0px 0px 500px 0px"
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = $(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
          var scrollTop = $(window).scrollTop();
          lazyloadImages.each(function() {
              var el = $(this);
              if(el.offset().top < window.innerHeight + scrollTop + 500) {
                var url = el.attr("data-src");
                el.attr("src", url);
                el.removeClass("lazy");
                lazyloadImages = $(".lazy");
              }
          });
          if(lazyloadImages.length == 0) { 
            $(document).off("scroll");
            $(window).off("resize");
          }
      }, 20);
    }

    $(document).on("scroll", lazyload);
    $(window).on("resize", lazyload);
  }
})

Lors du défilement, lorsque la troisième image est en vue, la 5ème image est chargée. Lorsque la 4ème image apparaît dans la vue, la 6ème image est chargée. De cette façon, nous donnons suffisamment de temps pour que les images se chargent complètement et, dans la plupart des cas, l’utilisateur ne verra aucun espace réservé.

Et si vous ne l’avez pas remarqué plus tôt, la troisième image est toujours chargée au préalable, même si elle est en dehors de la fenêtre d’affichage. Cela a également été fait en suivant le même principe – charge légèrement à l’avance au lieu de charger exactement au seuil pour une meilleure expérience utilisateur.

3. Éviter le changement de contenu avec lazy loading

C’est un autre point trivial qui, s’il est résolu, peut aider à maintenir une bonne expérience utilisateur.

Le problème

Lorsqu’il n’y a pas d’image, le navigateur ne connaît pas les dimensions du contenu à afficher dans le conteneur englobant. Et si on ne le spécifie pas à l’aide de CSS, le conteneur englobant n’aurait aucune dimension, à savoir 0 x 0 pixels. Ensuite, lorsque l’image est chargée, le navigateur redimensionne le conteneur englobant pour l’adapter à l’image. Ce changement soudain de la disposition provoque le déplacement d’autres éléments et s’appelle le déplacement de contenu. Comme le montre cet article et cette vidéo sur le contenu de Smashing Magazine, il s’agit d’une expérience plutôt désagréable pour un utilisateur, car le contenu se déplace soudainement lorsque l’image est chargée.

La solution

Cela peut être évité en spécifiant une hauteur et / ou une largeur pour votre conteneur englobant afin que le navigateur puisse peindre le conteneur d’image avec une hauteur et une largeur connues. Plus tard, lorsque l’image se charge, puisque la taille du conteneur est déjà spécifiée et que l’image s’y intègre parfaitement, le reste du contenu autour de ce conteneur ne bouge pas.

4. Ne chargez pas toutes les images en lazy loading

C’est une autre erreur que les développeurs commettent souvent – charger en lazy load toutes les images de la page. Cela pourrait réduire le chargement initial de la page, mais entraînerait également une mauvaise expérience de l’utilisateur, car de nombreuses images, même en haut de la page Web, ne s’afficheront pas avant l’exécution du Javascript.

Nous pouvons suivre quelques principes généraux pour identifier les images à charger en lazy loading.

a. Toute image présente dans la fenêtre ou au début de la page Web ne doit pas être chargée en lazy load. Cela s’applique à toute image d’en-tête, bannière publicitaire, logos, etc., car l’utilisateur doit les voir dès que la page est chargée. Rappelez-vous également que les appareils mobiles et de bureau auront des tailles d’écran différentes et, par conséquent, un nombre différent d’images qui seront visibles sur l’écran au départ. Vous devez donc prendre en compte le type de périphérique pour déterminer les ressources à charger en amont et celles à charger en différé.

b. Toute image qui est juste légèrement en dehors de la fenêtre ne doit pas non plus être chargée en lazy load. Cela va selon le principe discuté ci-dessus – charger légèrement en avance. Alors, disons que toute image de 500px ou un seul défilement du bas de la fenêtre peut également être chargée en avance.

c. Si la page n’est pas longue, il peut s’agir d’un simple défilement ou de quelques uns, ou s’il y a moins de 5 images en dehors de la fenêtre d’affichage, le lazy loading peut être complètement évité. Cela ne procurerait aucun avantage significatif à l’utilisateur final en termes de performances. Les JS supplémentaires que vous chargez sur la page pour permettre le chargement différé compenseront le gain dû au lazy loading d’un s’il y a un petit nombre d’images.

Les dépendances Javascript du Lazy Loading

L’idée même du chargement différé dépend de la disponibilité des capacités d’exécution Javascript dans le navigateur de l’utilisateur. Alors que la plupart de vos utilisateurs ont l’exécution de Javascript activée dans leur navigateur, comme c’est essentiel pour presque tous les sites Web de nos jours, vous pouvez imaginer q’un certain nombre n’autorisent pas l’exécution javascript dans le navigateur ou utilisent un navigateur qui ne supporte pas javascript du tout.

Vous pouvez soit leur montrer un message leur expliquant pourquoi les images ne se chargent pas et qu’ils doivent passer à un navigateur moderne ou activer Javascript. Ou vous pouvez également utiliser le tag noscript pour créer une expérience utilisable pour ces utilisateurs. L’utilisation de la balise noscript pour ces utilisateurs comporte des pièges. Ce fil de discussion sur Stack Overflow fait un excellent travail pour résoudre ces problèmes et est une lecture recommandée pour quiconque cherche à répondre à cet ensemble d’utilisateurs.

Les bibliothèques Javascript populaires pour un lazy loading sur votre site web

Les environnements de navigateur et les détails d’implémentation pouvant varier d’un navigateur à l’autre et d’un périphérique à l’autre, il est préférable d’utiliser une bibliothèque éprouvée pour le chargement différé. Voici une liste des bibliothèques populaires et des plugins spécifiques à la plate-forme qui vous permettront d’implémenter un lazy loading avec un effort minimal

yall.js (Yet Another Lazy Loader) – Utilise Intersection Observer et utilise le lazy loading basé sur des événements. Elle prend en charge tous les principaux types d’éléments HTML, mais pas les images d’arrière-plan. Fonctionne également sur IE11 +.

lazysizes – Fonctionnalités très populaires et étendues. Prend en charge les images réactives srcset et l’attribut tailles. Haute performance même sans Observateur Intersection.

jQuery Lazy – Une bibliothèque de chargement simple basée sur jquery.

WeltPixel Lazy Loading Enhanced – Une extension Magento 2 pour le chargement d’images en lazy loading

Magento Lazy Image Loader – Une extension Magento 1.x pour le chargement d’images en lazy load

WordPress A3 Lazy Load – Plugin de chargement d’images en différé pour WordPress

Comment tester si le lazy loading fonctionne ?

Une fois que vous avez implémenté le chargement différé, vous voudrez vérifier si le comportement des images sur votre site Web est comme prévu. Le moyen le plus simple serait d’ouvrir les outils de développement dans le navigateur Chrome.

Allez dans l’onglet Réseau > Images. Ici, lorsque vous actualisez la page pour la première fois, seules les images à charger doivent être chargées. Alors que vous commencez à faire défiler la page, d’autres requêtes de chargement d’image seront déclenchées et chargées. Vous pouvez également noter les délais de chargement de l’image dans la colonne en cascade dans cette vue. Cela vous aiderait à identifier les problèmes de chargement d’image, le cas échéant, ou les problèmes liés au déclenchement de la charge de l’image.

Vous pouvez également exécuter le rapport d’audit Google Chrome Lighthouse sur votre page après avoir implémenté les modifications et rechercher des suggestions dans la section «Images hors écran» .

Conclusion

Nous avons couvert presque tout ce qui concerne les images de lazy loading dans cet article. Le lazy loading, s’il est correctement implémenté, améliorera considérablement les performances de chargement de vos pages Web, réduira la taille de la page et les coûts de livraison en réduisant les ressources inutiles chargées tout en conservant le contenu nécessaire sur la page. Vos utilisateurs aimeront aussi le fait que vos pages se chargeront beaucoup plus rapidement !

Alors qu’attendez vous ? Lancez vous dans la mise en place du chargement d’images en lazy loading !

Catégories : HTML/CSS

siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

0 commentaire

Laisser un commentaire

Emplacement de l’avatar

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

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.

The reCAPTCHA verification period has expired. Please reload the page.