Lazy loading (informatique et web)

Programmes et dépendances

Généralement, en informatique, lorsqu’on initialise un système, celui-ci charge, avec le programme de démarrage, l’ensemble de ce qu’on appelle ses dépendances, c’est à dire des composants logiciels qui seront éventuellement nécessaires au bon fonctionnement du programme au cours de l’utilisation. Hors, bien souvent, ces dépendances sont chargées alors même qu’elles ne seront jamais utilisées par l’utilisateur. Elles mobilisent donc inutilement des ressources matérielles, et ralentissent les performances globales du système.

Définition

Le lazy loading (ou lazy load, « chargement fainéant » en français) 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 nécessaire au cours de l’utilisation, ce composant sera chargé à ce moment-là. 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

La vitesse d’affichage est déterminante pour un site 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. 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.

Quels composants sont chargés par une page web ?

Hors, une page web, lorsqu’elle est affichée dans un navigateur, charge de nombreux composants :

1. Des scripts divers : 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, donnant ainsi à  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.

Mise en oeuvre 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. Par exemple, pour WordPress, on pourra par exemple utiliser le plugin a3 Lazy Load.

Pour aller plus loin, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »