Mais c’est quoi exactement le lazy loading ?

En français, cela signifie « chargement paresseux » mais il convient de le traduire par « chargement différé ».
En effet, le Lazy Loading est une stratégie d’identification des ressources non bloquantes (non critiques) afin de ne les charger qu’au moment où elles sont vraiment utiles, réduisant ainsi le temps de chargement global de votre page Internet.

De manière plus générale, cela consiste à spécifier quels composants d’un programme doivent être chargés lors du démarrage de celui-ci. Si un composant logiciel non préalablement chargé se révèle ensuite nécessaire au cours de l’utilisation, ce n’est qu’à ce moment-là qu’il sera chargé. Cela aura pour effet d’accélérer le fonctionnement global du système, tout en induisant un temps d’attente lors de la sollicitation d’un composant non préalablement chargé.

Pour donner une image, appliqué à un système d’exploitation comme Windows, le lazy loading consiste à ne charger que les programmes fréquemment utilisés par l’utilisateur au démarrage du système afin d’économiser de la mémoire vive.

Application du lazy load aux sites web

Il convient ici de bien distinguer la vitesse de chargement d’une page web de la vitesse d’affichage de celui-ci. La première est une mesure technique, alors que la seconde est liée à la perception utilisateur. En effet, une page peut être affichée rapidement sans que son chargement soit terminé, offrant ainsi une expérience utilisateur jugée satisfaisante.

Dans le domaine du web et du développement web et mobile, la vitesse d’affichage d’un site web est très importante, et ce pour plusieurs raisons :

1. Elle est le premier critère d’ergonomie d’un site web, aussi bien pour un site vitrine que pour un site e-commerce.
2. Elle est prise en compte dans l’algorithme de classement des moteurs de recherche.

Contrairement à certaines idées reçues, le lazy loading n’empêche pas vos images d’être indexées par les moteurs de recherche.
Cela dit, toutes les techniques ne se valent pas. Les différentes bibliothèques et plugins disponibles sur le marché ne respectent pas nécessairement toutes les bonnes pratiques. Pour préserver votre référencement naturel, il est donc essentiel de bien comprendre le fonctionnement général du lazy loading.

Quels composants sont chargés par une page web ?

Lorsqu’elle est affichée dans un navigateur, une page Web charge de nombreux composants :
1. Divers scripts : boutons de partage des réseaux sociaux, systèmes de tracking des outils de web analytics, effets d’affichage. Ces scripts sont parfois chargés avant les composants visibles de la page. Cela donne à l’utilisateur la sensation que le site web est lent.
2. L’ensemble des images de la page, y compris celles situées sous la ligne de flottaison.

Qu’apporte le lazy loading pour un site web ?

Pour accélérer la vitesse d’affichage d’un site web, le lazy loading va donc consister à :

• Décaler le chargement des divers scripts de la page web, afin de favoriser un affichage rapide des composants visibles. On agit ainsi sur la vitesse d’affichage.
• Ne charger que les images situées au-dessus de la ligne de flottaison. Les autres images sont chargées au fur et à mesure que l’utilisateur scrolle. On améliore ainsi le temps de chargement initial de la page.

Genèse du processus et fonctionnement général

Au fil du temps et de l’évolution du web et de l’informatique, nous avons connu une forte augmentation du nombre et de la taille des ressources proposées aux internautes. Entre 2011 et 2019, le poids médian des ressources est passé de 10 Ko à 40 Ko sur ordinateur et de 5 Ko à 35 Ko sur mobile, tandis que la taille médiane des images est passée de 25 Ko à 90 Ko sur ordinateur et de 10 Ko à 85 Ko sur mobile. Pour les vidéos, c’est évidemment bien plus lourd encore !

De ce fait, lorsque vous surfez sur le Web, le navigateur a tendance à charger toutes les ressources nécessaires à l’affichage complet des éléments contenus dans la page. Or, certains objets chargés ne se trouvent pas dans la zone visible de l’utilisateur. Il est donc possible de libérer de la bande passante et réduire tous ces temps de chargement inutiles en utilisant le lazy loading.

De plus, les répercussions positives seront également perceptibles du côté du serveur : le processeur et la bande passante nécessaires pour fournir les ressources seront moins sollicités, réduisant ainsi les coûts d’hébergement et/ou de CDN.

À l’aide d’un script tel que LazyLoad, le navigateur charge uniquement les images et autres données lorsqu’elles apparaissent dans le « viewport » (zone de visualisation) de l’utilisateur lorsque celui-ci veut par exemple faire défiler la page ou augmenter la taille de la fenêtre.

Mise en œuvre du lazy loading

Le lazy load peut être mis en place en utilisant directement des langages de script. Mais la plupart du temps, il existe des plugins dédiés pour chaque CMS.
Si vous avez besoin d’informations complémentaires, n’hésitez pas à nous contacter et nous nous ferons une joie de vous aider !