Le lazy loading : comment cela fonctionne et l'utiliser ?

À l'ère du tout numérique, les performances des sites en ligne sont essentielles pour assurer la continuité des activités, attirer des ventes répétées et obtenir un avantage concurrentiel. Le lazy loading accélère les performances des sites web et des applications. De nombreuses techniques de mise en œuvre sont toutefois disponibles, il convient donc de faire un choix judicieux. Il faut notamment se familiariser avec les pratiques universelles et les approches spécifiques au langage et au système d'exploitation.

Définition du lazy loading

Le lazy loading ou chargement différé est une technique qui permet de charger les ressources d'un site web en différant le chargement des ressources non critiques, non essentielles, au début du temps de chargement d'une page.

Il s'agit d'une technique qui peut être utilisée pour empêcher un navigateur de charger des ressources non critiques sur une page web lorsqu'il commence à générer la page. Le navigateur ne chargera ces ressources différées que lorsqu'elles seront nécessaires.

Pour clarifier ce point avec une définition simple, les ressources critiques sont celles qui sont nécessaires immédiatement après le début du chargement de la page, tandis que les ressources non critiques ne sont pas immédiatement nécessaires. Cela inclut entre autres les éléments de la page qui ne sont pas visibles sur l'écran d'accueil, affichés uniquement lorsque l'internaute utilise la barre de défilement.

Enfin, le lazy loading de vidéos est également populaire dans le domaine du développement web. Il est particulièrement efficace, car les fichiers vidéo sont généralement les plus grosses ressources chargées dans une page web. Au lieu d'envoyer l'intégralité de la vidéo sur l'appareil du client, le serveur web n'envoie que de petites portions de la vidéo pendant que l'utilisateur la regarde. Les sites web populaires de partage de vidéos comme YouTube et Vimeo utilisent le lazy loading pour réduire la bande passante et empêcher les utilisateurs de télécharger plus de contenu vidéo que nécessaire. Cette technique est particulièrement utile pour les utilisateurs disposant de connexions Internet à compteur, comme les forfaits de données mobiles.

Définition du eager loading et différence avec le lazy loading

Le eager loading est l'opposé de lazy loading. Il s'agit d'une technique qui consiste à charger toutes les ressources d'une page web en une seule fois. Il s'agit du paramètre de chargement par défaut de la plupart des sites web.

Avec la technique du eager loading, toutes les ressources, qu'elles soient critiques ou non-critiques, sont chargées en une seule fois, et le navigateur les rend toutes disponibles à l'ouverture de la page. Aucune des ressources n'est différée pour être chargée lorsque l'utilisateur fait défiler la page.

La technique eager loading charge donc tous les éléments ou ressources d'une page web en une seule fois, tandis que la technique lazy loading fait le contraire. Elle sélectionne les éléments à charger et reporte d'autres à plus tard. Le mot « lazy », ou paresseux en français, prend alors tout son sens.

Avec le eager loading, toutes les ressources sont téléchargées et rendues par un navigateur en une seule fois, la demande de ces ressources est donc envoyée en une seule fois, mais si cette demande est très importante, elle prendra beaucoup de temps à être exécutée.

Mais pour le lazy loading, seule la demande pour les ressources critiques est envoyée en premier. Les autres ressources seront chargées au fur et à mesure et en fonction de la navigation sur la page. Cela entraîne l'envoi de différentes demandes à différents intervalles de temps en fonction de ce que l'utilisateur, impliquant généralement une meilleure fluidité.

Ce sont les principales différences entre ces deux techniques de chargement. En fonction de la structure de votre site web, vous devez choisir laquelle de ces deux techniques de chargement permettra d'améliorer l'expérience utilisateur de votre site.

Quand utiliser le lazy loading ?

Le lazy loading est idéal lorsqu'un site web contient de nombreuses ressources lourdes telles que des images, des vidéos, des GIF, des éléments intégrés par des tiers, etc. C'est le cas de la plupart des sites de e-commerce.

Étant donné que le chargement de toutes ces ressources en une seule fois prend beaucoup de temps et augmente le temps de chargement de la page, il peut être bénéfique d'utiliser le lazy loading pour faciliter la navigation sur le site.

Optimiser la vitesse de chargement des pages est un des critères principaux du bon fonctionnement d'un site web, tant en matière d'expérience utilisateur que de référencement naturel. Les algorithmes des moteurs de recherche comme Google tiennent en effet compte de cette vitesse de chargement pour établir le classement dans les pages de résultats de recherche.

Comment déployer le lazy loading ?

Au moment de la mise en œuvre technique du chargement différé sur votre site web, il est impératif devez choisir une méthode qui sera prise en charge par les principaux navigateurs. Il existe plusieurs façons de mettre en œuvre le lazy loading :

• L'utilisation d'un plugin
• L'utilisation du lazy loading natif

Déployer le lazy loading avec un plugin

Il existe de nombreux plugins dédiés qui peuvent ajouter la fonctionnalité de lazy loading à votre site web. Voici deux exemples :

• a3 Lazy Load : Il s'agit d'un plugin simple à utiliser, mais puissant, qui peut charger « paresseusement » les images, les vidéos et les iframes sur un site. Il comporte de multiples fonctionnalités et est compatible avec d'autres plugins populaires comme WP Super Cache, WooCommerce, Imagify ou Advanced Custom Fields. Il est assez facile d'installer et de configurer ce plugin, car toutes les options sont auto-explicatives.
• WP Rocket : Un plugin de performance premium tout-en-un. Il comprend un large éventail de fonctionnalités pour vous aider à accélérer votre site WordPress, y compris l'option de chargement différé. Vous pouvez activer cette fonctionnalité depuis votre interface d'administration WordPress. Vous pouvez également utiliser WP Rocket pour mettre en œuvre la mise en cache, la minification et la compression GZip.

Déployer le lazy loading natif

L'attribut « loading » permet de charger paresseusement les images sans avoir besoin d'écrire du code personnalisé.

Cet attribut est pris en charge par la plupart des navigateurs populaires comme Chrome, Firefox, Opera, Edge et est actuellement mis en œuvre dans Safari. À noter que le lazy loading natif est pris en charge par Chrome 76 et les versions ultérieures.

Pour les personnes qui connaissent les bases du code, elles peuvent ajouter cet attribut à leurs images manuellement. Cependant, le moyen le plus simple est d'utiliser le plugin de Google qui automatisera la tâche.

Comment savoir lorsqu'un lazy loading fonctionne ?

Il existe plusieurs façons de vérifier qu'un site charge correctement les ressources en lazy loading.

La méthode la plus simple consiste à observer comment les images s'affichent lorsque l'utilisateur fait défiler une page. Si elles apparaissent progressivement, cela signifie que le chargement différé fonctionne bien.

Autre manière, plus technique, de tester l'efficacité du lazy loading : se référer aux outils « Developer » dans son navigateur.

• Cliquer avec le bouton droit de la souris sur la page web
• Choisir l'élément « Inspecter »
• Aller dans l'onglet « Réseau » ou « Network ». Dans cet onglet, sélectionner le filtre Img pour Images et faire défiler la page web. Si les images n'apparaissent pas en une seule fois, mais au fil de la navigation, cela signifie que le lazy loading fonctionne correctement.

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil website grader ; ou découvrez les modèles de site web gratuits de HubSpot.