Chargement par paresse

Introduction

Le chargement par paresse est un modèle de conception et une technique d’optimisation où le système charge les ressources uniquement à la demande. Au lieu de tout charger lorsque la page se charge pour la première fois, le chargement par paresse améliore les temps de chargement et les performances de la page. Cela est particulièrement utile pour les pages avec beaucoup de contenu en dessous de la ligne de flottaison que les utilisateurs pourraient ne pas faire défiler pour voir.

Le chargement anticipé récupère et charge toutes les ressources immédiatement lorsque la page se charge, indépendamment du besoin immédiat. Cela peut ralentir le chargement initial de la page. Le chargement par paresse accélère la page en chargeant les ressources non critiques uniquement lorsque le navigateur en a besoin.

Les développeurs utilisent souvent le chargement par paresse pour les images. Cela peut également s’appliquer aux fichiers JavaScript, au CSS, ou à tout contenu non essentiel à la vue initiale de la page. Cette méthode économise les ressources réseau et informatiques, assurant une expérience utilisateur plus rapide en chargeant ces ressources uniquement lorsqu’elles sont nécessaires.

Avantages du chargement par paresse

Les principaux avantages de la mise en œuvre du chargement par paresse sont :

Temps de chargement initial plus rapide : Le chargement par paresse réduit le temps de chargement initial de la page en récupérant et en rendant uniquement les ressources immédiatement visibles par l’utilisateur. Cette optimisation aide à améliorer l’expérience utilisateur et les performances. Cela permet un rendu initial plus rapide de la page.
Réduction de l’utilisation de la bande passante et des ressources : Le chargement par paresse télécharge les ressources uniquement si et quand l’utilisateur en a besoin. Si un utilisateur ne fait jamais défiler jusqu’à une image chargée de manière paresseuse, cette image n’est jamais récupérée, économisant ainsi de la bande passante pour l’utilisateur et le serveur.
Performance améliorée : En réduisant la quantité de données à charger en amont, le chargement par paresse sollicite moins la connexion réseau de l’utilisateur, le processeur et la mémoire. Cela conduit à de meilleures performances globales et à une réactivité accrue, surtout sur les réseaux plus lents ou les appareils bas de gamme.
Amélioration de l’expérience utilisateur : Des temps de chargement plus rapides et des performances améliorées se traduisent par une expérience utilisateur plus positive et engageante. Les utilisateurs peuvent commencer à interagir avec la page plus tôt et ressentir moins de décalage ou de retards.

Cependant, le chargement par paresse n’est pas toujours la meilleure approche pour chaque situation. Pour les ressources critiques pour la page ou au-dessus de la ligne de flottaison, le chargement anticipé peut être préférable pour s’assurer qu’elles sont disponibles immédiatement. Le chargement par paresse peut également ne pas être nécessaire pour les ressources petites ou légères où la surcharge de la mise en œuvre du chargement par paresse l’emporte sur les avantages.

Chargement anticipé vs. Chargement par paresse

Lorsque vous choisissez entre le chargement par paresse et le chargement anticipé, prenez en compte les éléments suivants :

Visibilité : Si une ressource est immédiatement visible par l’utilisateur au-dessus de la ligne de flottaison, le chargement anticipé pourrait être le meilleur choix pour éviter tout délai de chargement de ce contenu. Le chargement par paresse convient mieux aux ressources situées en dessous de la ligne de flottaison ou nécessitant une interaction de l’utilisateur pour être affichées.
Importance : Les ressources critiques dont dépend la page doivent être chargées de manière anticipée pour éviter les retards. Les ressources secondaires ou optionnelles sont de bonnes candidates pour le chargement par paresse.
Taille : Le chargement par paresse est le plus bénéfique pour les ressources volumineuses ou lourdes qui prennent du temps à charger. Les ressources plus petites ne valent peut-être pas la surcharge du chargement par paresse.
Comportement des utilisateurs : Considérez comment les utilisateurs interagissent généralement avec la page. Si les analyses montrent que la plupart des utilisateurs font défiler et consultent le contenu en dessous de la ligne de flottaison, le chargement anticipé de ce contenu peut offrir une meilleure expérience. Si peu d’utilisateurs font défiler, le chargement par paresse minimisera les téléchargements inutiles.
Vitesse du réseau : Sur les réseaux plus lents, le chargement par paresse offre de plus grands avantages en réduisant la taille du téléchargement initial. Sur les réseaux plus rapides, le chargement anticipé peut être moins préjudiciable à l’expérience utilisateur.

Le bon équilibre entre le chargement par paresse et le chargement anticipé dépend des caractéristiques spécifiques et des exigences de chaque page ou application. Les tests de performance et la surveillance des métriques des utilisateurs réels peuvent aider à optimiser l’approche.

Méthodes de mise en œuvre du chargement par paresse

Il existe plusieurs façons de mettre en œuvre le chargement par paresse dans les pages Web :

JavaScript : En utilisant JavaScript, vous pouvez détecter quand un élément entre dans le champ de vision et charger dynamiquement sa ressource associée. Les bibliothèques comme lazysizes ou lazyload facilitent cette tâche. Exemple :

<img data-src="image.jpg" class="lazyload">

lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazyload"
});

API Intersection Observer : L’API Intersection Observer fournit un moyen natif de détecter quand un élément entre dans le champ de vision et prendre une action comme déclencher un chargement. Exemple :

let observer = new IntersectionObserver(callback, options);
observer.observe(element);

Attributs HTML : Les navigateurs modernes prennent en charge les images paresseuses nativement en utilisant l’attribut loading=”lazy”. Exemple :

<img src="image.jpg" loading="lazy" alt="...">

CSS : Les techniques CSS peuvent être utilisées pour créer des squelettes de placeholders qui s’affichent pendant le chargement du contenu. Exemple :

css

.lazy-loaded {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

Push serveur HTTP/2 : HTTP/2 fournit un mécanisme de push serveur où le serveur peut envoyer de manière anticipée des ressources au client en prévision de futures requêtes. Bien que cela ne soit pas strictement paresseux, cela peut être utilisé pour obtenir un effet similaire.

Le choix de la méthode de chargement par paresse dépend des exigences spécifiques, des considérations de compatibilité des navigateurs et de l’architecture globale de l’application.

Chargement par paresse des images

Les images sont des candidates de premier choix pour le chargement par paresse car elles représentent souvent une partie significative du poids d’une page. Il existe plusieurs moyens de charger les images de cette manière :

Attribut de chargement natif : La façon la plus simple est d’utiliser l’attribut de chargement natif du navigateur. Définissez loading=”lazy” sur la balise <img> :

<img src="image.jpg" alt="..." loading="lazy">

JavaScript : Utilisez JavaScript pour vérifier si l’image est dans le champ de vision et définir dynamiquement l’attribut src :

<img data-src="image.jpg" alt="...">
<script>
  const images = document.querySelectorAll('img[data-src]');
  const loadImage = (image) => {
    image.setAttribute('src', image.getAttribute('data-src'));
    image.onload = () => { image.removeAttribute('data-src'); };
  };
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  };
  const options = { rootMargin: '0px 0px 500px 0px' };
  const observer = new IntersectionObserver(callback, options);
  images.forEach(image => observer.observe(image));
</script>

CSS : Utilisez CSS pour créer un effet de placeholder pendant le chargement de l’image :

html

<div class="lazy-image">
  <img data-src="image.jpg" alt="...">
</div>

css

.lazy-image {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

Souvenez-vous de fournir un texte alternatif approprié pour l’accessibilité et de gérer les cas d’erreurs de manière élégante.

Conclusion

Le chargement par paresse est une technique précieuse pour améliorer les performances et l’expérience utilisateur des pages web en différant le chargement des ressources non critiques jusqu’à ce qu’elles soient nécessaires. Il peut réduire significativement les temps de chargement initiaux, économiser de la bande passante et améliorer les performances globales.

Lors de la décision d’utiliser le chargement par paresse, considérez des facteurs tels que la visibilité et l’importance de la ressource, sa taille, le comportement typique des utilisateurs et les conditions du réseau. Trouvez le juste équilibre entre le chargement par paresse et le chargement anticipé en fonction des besoins spécifiques de vos pages.

Le chargement par paresse peut être implémenté en utilisant diverses méthodes comme JavaScript, l’API Intersection Observer, les attributs HTML natifs, les techniques CSS, ou les optimisations côté serveur comme le push HTTP/2.

Les images sont couramment chargées de manière paresseuse, mais cette technique peut s’appliquer à tout type de contenu ou de ressource pour optimiser le chargement et les performances.

En réduisant le transfert de données et en optimisant le chargement des ressources, le chargement par paresse améliore non seulement les performances, mais peut également aider à atténuer les fuites potentielles de données ou violations qui peuvent se produire en transférant plus de données que nécessaire.