Le chargement différé encore connu comme le lazy loading est l’une des méthodes d’optimisation de sites assez efficaces. Découvrez ici deux approches pour implémenter cette solution sur votre site web afin de l’optimiser.
Généralité sur le lazy loading : un aperçu de la solution
Le « lazy loading » est une technique utilisée en développement web pour optimiser les performances d’un site ou d’une application. Elle consiste à retarder le chargement de certaines ressources (comme des images, des scripts ou des contenus multimédias) jusqu’à ce qu’elles soient réellement nécessaires pour l’utilisateur.
Par exemple, sur une page web, si vous avez de nombreuses images en dessous de la ligne de visibilité initiale (en bas de la page), le lazy loading permet de retarder le chargement de ces images jusqu’à ce que l’utilisateur fasse défiler la page et les rende visibles.
En gros, c’est une solution qui permet d’accélérer le temps de chargement initial de la page, car seules les ressources nécessaires immédiatement sont chargées. Les autres seront chargées de manière dynamique au fur et à mesure que l’utilisateur interagit avec la page.
1ère méthode : servez-vous de l’attribut «loading» pour vos images
Cette méthode est l’une des plus simples à mettre en place dans le cadre du lazy loading pour le SEO. Elle vous permet de charger vos images sur vos sites web. L’attribut dit « loading » avec la valeur « lazy » émet au navigateur l’ordre de charger l’image de manière différée.
Cette commande est envoyée lorsque l’utilisateur défile la page afin que l’image devienne peu à peu visible dans la fenêtre de navigation. Cela permet en réalité de réduire le temps habituel d’affichage des pages. Par ailleurs, c’est une approche qui fonctionne sous HTML5.
2ème méthode : utilisez JavaScript
Si vous cherchez à appliquer un lazy loading sur d’autres ressources comme les vidéos et scripts, vous pouvez vous servir de JavaScript. En effet, il offre une très grande flexibilité, mais il faudra effectuer ici un fractionnement du code.
De cette manière, seul le code minimal nécessaire pour fournir la valeur d’entrée est envoyé. Dès lors, le temps nécessaire au chargement des diverses pages est beaucoup plus réduit. Les autres composantes de la page pourront être chargées par la suite sur demande.
Conclusion, chacune de ces méthodes présente ses avantages et possède un procédé d’exploitation qui lui est propre. Il vous reviendra de choisir suivant vos besoins, la méthode la plus adaptée.
