Sommaire
Qu’est-ce que le Lazy Loading ou chargement paresseux ?
Le Lazy Loading est une technique d’optimisation du contenu en ligne, qu’il s’agisse d’un site Web ou d’une application Web, le chargement paresseux aide à charger uniquement la section requise et retarde le reste jusqu’à ce que l’utilisateur en ait besoin.
Une forme de chargement paresseux est défilement infini, dans lequel, le contenu de la page Web est chargé au fur et à mesure que l’utilisateur fait défiler la page. C’est une technique populaire utilisée par divers sites Web.
Pourquoi opter pour des images à Lazy Loading ?
Le chargement paresseux/ Lazy Loading reporte le chargement d’une image qui n’est pas immédiatement nécessaire sur la page. Une image, qui n’est pas visible pour l’utilisateur au moment du chargement de la page, est chargée plus tard, lorsque l’utilisateur fait défiler la page et que l’image devient réellement visible.
Si l’utilisateur ne fait jamais défiler la page, une image qui n’est pas visible pour l’utilisateur ne sera jamais chargée. Amélioration des performancesC’est le plus important pour vous en tant qu’administrateur de site Web – de meilleures performances et un meilleur temps de chargement.
Avec le chargement paresseux, vous réduisez le nombre d’images qui doivent être chargées sur la page initialement. Moins de demandes de ressources signifie moins d’octets à télécharger et moins de concurrence pour la bande passante limitée dont dispose l’utilisateur.
Ainsi, l’appareil est en mesure de télécharger et de traiter les ressources restantes beaucoup plus rapidement. Par conséquent, la page devient utilisable beaucoup plus rapidement qu’une page sans chargement paresseux.
Le deuxième avantage pour vous est en termes de coûts de livraison. La livraison d’une image, ou de tout autre bien, est généralement facturée sur la base du nombre d’octets transférés. Comme indiqué précédemment, avec le chargement paresseux, si l’image n’est pas visible, elle n’est jamais chargée. Ainsi, vous réduisez le nombre total d’octets transférés sur la page, en particulier pour les utilisateurs qui rebondissent sur la page ou n’interagissent qu’avec la partie supérieure de la page.
Cette réduction du nombre d’octets transférés par votre réseau de distribution réduit les coûts de distribution. Ce point deviendra plus évident lorsque nous explorerons plus avant le chargement paresseux.
Quelles images peuvent être chargées paresseusement ?
L’idée de base du Lazy Loading est simple : il s’agit de 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 pour l’utilisateur peut être chargée paresseusement.
Au fur et à mesure que l’utilisateur fait défiler la page, les espaces réservés aux images commencent à apparaître dans la partie visible de la page web. Vous pouvez découvrir quelles images sont candidates au chargement paresseux et combien d’octets vous pouvez économiser lors du chargement initial de la page en utilisant l’outil d’audit Google Lighthouse.
L’audit réalisé 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 identifier si votre site Web utilise le chargement paresseux ou non, en plus d’autres optimisations critiques liées aux images sur votre page.
Le chargement paresseux est essentiel non seulement pour une bonne performance, mais aussi pour offrir une bonne expérience utilisateur.
Comment tester si le chargement paresseux fonctionne ?
Une fois que vous avez mis en œuvre le lazy loading, vous voudrez vérifier si le comportement des images sur votre site Web est conforme à l’intention.
Le moyen le plus simple est d’ouvrir les outils de développement dans le navigateur Chrome, puis d’aller dans l’onglet Réseau > Images.
Ici, lorsque vous rafraîchissez la page pour la première fois, seules les images qui doivent être chargées en premier devraient être chargées.
Ensuite, lorsque vous commencez à faire défiler la page vers le bas, d’autres demandes de chargement d’images sont déclenchées et chargées.Vous pouvez également remarquer les délais de chargement des images dans la colonne de chute d’eau de cette vue.
Une autre solution consiste à exécuter le rapport d’audit de Google Chrome Lighthouse sur votre page après avoir mis en œuvre les changements, et à rechercher des suggestions dans la section “Images hors écran”.
Les Avantages du Lazy Loading
- Le chargement à la demande réduit la consommation de temps et l’utilisation de la mémoire, optimisant ainsi la diffusion du contenu. Comme seule une fraction de la page Web, qui est requise, est chargée en premier, le temps nécessaire est donc moindre et le chargement du reste de la section est retardé, ce qui économise du stockage. Tout cela améliore l’expérience de l’utilisateur car le contenu demandé est alimenté en un rien de temps.
- L’exécution de code inutile est évitée.
- L’utilisation optimale des ressources de temps et d’espace en fait une approche rentable du point de vue des hommes d’affaires. (propriétaires du site)
Les Inconvénients du Lazy Loading
- Premièrement, les lignes de code supplémentaires, à ajouter à celles existantes, pour implémenter le lazy load rendent le code un peu compliqué.
- Deuxièmement, le chargement paresseux peut parfois affecter le classement du site Web sur les moteurs de recherche, en raison d’une mauvaise indexation du contenu déchargé.
Conclusion sur le lazy loading
Bien qu’il existe certains pièges du chargement paresseux, les grands avantages, comme l’utilisation optimale des deux principales ressources (temps et espace) et bien d’autres, nous font oublier ses inconvénients.
