Skip to content

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.

 

 

 

Vous trouvez cet article intéressant ? Partagez le !
LinkedIn
Twitter
Facebook
Auteur : Louis-Alexandre
Auteur : Louis-Alexandre
Louis-Alexandre est co-fondateur de Jloo. Il fait du référencement naturel depuis 2006, principalement pour de sites e-commerce. Ex-pilote de moto en compétition, son goût du challenge s'exprime désormais en faisant atteindre la 1ère place dans Google aux clients de l'agence SEO Jloo.

Pas encore de commentaire, ajoutez votre voix ci-dessous !


Ajouter un commentaire

Votre adresse e-mail ne sera pas publiée.

DEMANDE D’INFORMATION OU D'AUDIT SEO GRATUIT
Si vous êtes pressé, le téléphone sera plus efficace ;-)
DEMANDE D’INFORMATION OU D’AUDIT SEO GRATUIT

Votre message est envoyé.

Clémentine ou Jessy vous recontacterons dans le plus bref délai. Merci de nous avoir consulté.

blank
blank