Chargement Lazy

Le chargement différé (ou lazy loading) retarde le chargement des ressources jusqu'à ce qu'elles soient nécessaires, généralement en retardant l'affichage des images, des iframes et des composants jusqu'à ce qu'ils soient proches de la zone visible de l'écran. L'objectif est de réduire la charge de travail nécessaire au rendu initial, afin que le contenu immédiatement visible par le visiteur ne soit pas en concurrence avec du contenu situé bien en dessous de la ligne de flottaison et qui ne sera peut-être jamais consulté.

Cette technique est désormais facile à appliquer aux images et aux iframes : un attribut natif du navigateur s’en charge sans JavaScript, le navigateur décidant du moment du chargement en fonction de la proximité avec la fenêtre d’affichage et de l’état de la connexion. Pour les composants et les routes, le fractionnement du code produit un résultat équivalent en différant le chargement des paquets JavaScript jusqu’à ce qu’une route soit visitée ou qu’une fonctionnalité soit utilisée, ce qui peut réduire considérablement la quantité de script à télécharger et à exécuter avant qu’une page ne devienne interactive.

L'erreur la plus fréquente et la plus préjudiciable est d'appliquer cette technique sans discernement, y compris au contenu visible dès la première page. Le chargement différé de l'image principale retarde précisément l'élément qui détermine la plus grande surface d'affichage du contenu et produit un résultat pire que de ne pas appliquer cette technique du tout. La bonne pratique consiste à charger immédiatement le contenu visible au chargement de la page, idéalement avec une indication de priorité, et à ne différer que le contenu réellement situé en dessous. L'application systématique de cette technique via un plugin ou un paramètre global est la principale cause de dégradation des performances de chargement des sites après la mise en œuvre d'une optimisation.

La stabilité de la mise en page est le deuxième point à prendre en compte. Les images différées qui arrivent sans espace réservé provoquent un décalage du contenu pendant leur chargement, transformant ainsi une amélioration du temps de chargement en un problème d'instabilité visuelle. Il est donc indispensable de spécifier explicitement les dimensions ou le rapport hauteur/largeur de chaque élément différé. Un espace réservé occupant l'espace adéquat permet de rendre le chargement différé invisible pour l'utilisateur, au lieu de simplement l'accélérer.

Cette technique est parfois inadaptée. Le contenu indispensable à un indexage fiable par les moteurs de recherche, les pages imprimables où tout doit s'afficher correctement et les interfaces où les utilisateurs parcourent rapidement de longues listes souffrent tous d'un chargement différé excessif. Dans ce dernier cas, les images ne se chargeant qu'à l'approche de la zone visible arrivent trop tard pour un utilisateur qui fait défiler rapidement la page, ce qui provoque l'affichage d'une succession d'espaces vides. Il est alors nécessaire d'augmenter la marge de chargement ou d'adopter une autre stratégie.

Il convient également de s'intéresser aux conséquences d'un échec du chargement différé. Si les images sont chargées uniquement via JavaScript, lequel ne s'exécute pas (en raison d'une erreur, d'un script bloqué ou d'un navigateur incompatible), la page s'affiche sans ses images et aucune solution de repli n'est prévue. Le chargement différé natif du navigateur évite ce problème, ce qui explique pourquoi il est préférable aux implémentations basées sur des scripts lorsqu'il est suffisant. Lorsqu'une approche par script est indispensable, la mise en place d'une solution de repli qui charge le contenu en cas d'indisponibilité du mécanisme principal représente un effort minime permettant d'éviter un type de défaillance invisible lors des tests classiques, mais qui affecte une petite proportion, certes, mais bien réelle, de visiteurs.

Utilisée à bon escient, la technique du chargement différé est l'une des plus efficaces pour les pages comportant une quantité importante de contenu en bas de page, ce qui concerne la plupart des fiches produits, des articles et des longues pages marketing. En pratique, elle constitue un élément d'une stratégie de chargement plus globale abordée dans… performances web le travail, parallèlement au format et à la taille des images, à la priorisation des ressources et à la structure des paquets, et son impact est le plus important dans e-commerce dans les contextes où les pages de catégories contiennent des dizaines d'images et où les visiteurs mobiles supportent le coût total du chargement de toutes ces images en une seule fois.