Qu’est-ce que le chargement paresseux / Lazy Loading ?
Le chargement paresseux ou Lazy Loading consiste à retarder le chargement ou l’initialisation de ressources ou d’objets jusqu’à ce qu’ils soient réellement nécessaires afin d’améliorer les performances et d’économiser les ressources système. Par exemple, si une page Web contient une image que l’utilisateur doit faire défiler vers le bas pour la voir, vous pouvez afficher un espace réservé et faire du lazy loading sur l’image complète, uniquement lorsque l’utilisateur arrive à son emplacement.
Les avantages du chargement paresseux / Lazy Loading sont les suivants
- Réduction du temps de chargement initial – Le chargement paresseux d’une page Web réduit le poids de la page, ce qui permet un chargement plus rapide de la page.
- Conservation de la bande passante – Le chargement paresseux permet de conserver la bande passante en fournissant du contenu aux utilisateurs uniquement s’il est demandé.
- Conservation des ressources système – Le chargement paresseux permet de conserver les ressources du serveur et du client, car seule une partie des images, du JavaScript et des autres codes doit être rendue ou exécutée.
- Chargement paresseux lors du premier chargement et après le chargement de la page entière.
Chargement paresseux et chargement rapide
Alors que le chargement paresseux retarde l’initialisation d’une ressource, le chargement rapide initialise ou charge une ressource dès que le code est exécuté. Le chargement rapide implique également le préchargement des entités connexes référencées par une ressource. Par exemple, un script PHP avec une déclaration d’inclusion effectue un chargement rapide : dès qu’il est exécuté, le chargement rapide attire et charge les ressources incluses.
Le chargement rapide est utile lorsqu’il est possible ou nécessaire de charger des ressources en arrière-plan. Par exemple, certains sites Web affichent un écran de « chargement » et chargent rapidement toutes les ressources nécessaires à l’exécution de l’application Web.
Méthodes de mise en œuvre du chargement paresseux / Lazy Loading
Il existe plusieurs bibliothèques open source qui peuvent être utilisées pour mettre en œuvre le chargement paresseux, notamment :
Les méthodes permettant de mettre en œuvre le chargement paresseux dans votre code sont les suivantes :
Initialisation paresseuse – Cette méthode donne la valeur nulle aux objets. Les données des objets ne sont chargées qu’après et chaque fois qu’on les invoque, on vérifie si elles sont nulles, et si c’est le cas, on charge les données de l’objet.
Proxy virtuel – lors de l’accès à un objet, appelez un objet virtuel avec la même interface que l’objet réel. Lorsque l’objet virtuel est appelé, chargez l’objet réel, puis déléguez-lui.
Ghost – charger un objet dans un état partiel, en utilisant uniquement un identifiant. La première fois qu’une propriété de l’objet est appelée, les données complètes sont chargées.
Value holder – créez un objet générique qui gère le comportement de chargement paresseux. Cet objet doit apparaître à la place des champs de données d’un objet.
Meilleures pratiques en matière de chargement paresseux ou Lazy Loading
Lorsque vous effectuez un chargement paresseux ou Lazy Loading, tenez compte des conseils suivants :
- Ne chargez paresseusement que les ressources qui sont affichées en dessous du pli ou en dehors de la fenêtre d’affichage de l’utilisateur. Dans le code, ne chargez paresseusement que les objets qui ne sont pas nécessaires aux opérations initiales ou essentielles du système.
- Lorsque vous chargez paresseusement une image, décodez-la de manière asynchrone à l’aide de la méthode JavaScript decode() avant de l’insérer dans le DOM. Dans le cas contraire, les images de grande taille peuvent provoquer un blocage du navigateur.
- Traitez les erreurs au cas où l’image ou l’objet ne se charge pas.
- Proposez un noscript au cas où JavaScript ne serait pas disponible. Sinon, les utilisateurs dont le JavaScript est désactivé ne verront pas les ressources chargées paresseusement.
