Qu'est-ce que le lazy loading ?

Qu'est-ce que le lazy loading ?

Le chargement paresseux est une technique qui permet d'attendre le chargement de certaines parties d'une page Web - notamment les images - jusqu'à ce qu'elles soient nécessaires. Au lieu de tout charger d'un coup, ce que l'on appelle le chargement « rapide », le navigateur ne demande pas certaines ressources avant que l'utilisateur n'interagisse de manière à ce que ces ressources soient nécessaires. Lorsqu'il est mis en œuvre correctement, le chargement paresseux peut accélérer le temps de chargement des pages.

Ce type de chargement est appelé « paresseux » parce qu'il encourage le navigateur Web à tergiverser. Lorsqu'il affiche une page Web à chargement paresseux, le navigateur dit essentiellement : "Je vais attendre de charger ces images jusqu'à ce que j'en aie vraiment « besoin ». Lorsqu'il affiche une page Web à chargement rapide, le navigateur adopte l'attitude inverse : « Je vais m'occuper de tout tout de suite ! » Si la procrastination a parfois une connotation négative dans le monde réel, elle est souvent plus efficace dans ce cas.

Par exemple, un article de blog peut contenir une image en haut de la page et un diagramme en bas de la page. Une personne lisant l'article de blog risque de ne pas atteindre le bas du texte avant plusieurs minutes. Le navigateur attend donc que le lecteur fasse défiler la page jusqu'à cette section pour charger le diagramme. De cette façon, la page se charge plus rapidement au début, car le navigateur charge une seule image au lieu de deux.

Comment fonctionne le chargement paresseux des images ?

La navigation de l'utilisateur est généralement ce qui déclenche le chargement paresseux des images. En particulier, lorsqu'un utilisateur fait défiler une page vers le bas, cela indique au navigateur de charger les images qui y apparaissent.

Lorsqu'une page Web se charge, la partie que l'utilisateur voit est appelée « au-dessus du pli », tandis que la partie que l'utilisateur ne voit pas encore est appelée "en dessous du pli."* Les images qui se trouvent au-dessus du pli doivent être chargées immédiatement, sinon l'expérience de l'utilisateur sera affectée. Mais l'utilisateur ne voit pas les images situées sous le pli avant de les faire défiler. Ainsi, les images situées sous le pli peuvent utiliser le chargement paresseux.

*Que signifie « fold » ? Les expressions « Above the fold » (au-dessus du pli) et « Below the fold » (au-dessous du pli) et sont issues de la mise en page des journaux. Les journaux sont généralement pliés en deux horizontalement, et la moitié avant - la zone au-dessus du pli - est ce que le lecteur voit en premier. Lorsque le terme est appliqué à une mise en page Web, le « pli » est le bas de l'écran de l'utilisateur.

Comment mettre en œuvre le chargement paresseux pour les images

Une façon de mettre en œuvre le chargement paresseux est d'utiliser l'attribut HTML loading dans une balise d'image. L'ajout de l'attribut loading= « lazy », comme dans l'exemple ci-dessous, indique au navigateur d'attendre pour charger l'image que l'utilisateur s'en approche :

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Les développeurs web peuvent également utiliser des frameworks de programmation pour mettre en œuvre un chargement paresseux plus sophistiqué. Angular est couramment utilisé à cette fin. La bibliothèque JavaScript React prend également en charge le chargement paresseux.

Cloudflare Mirage est une autre façon de mettre en œuvre le chargement paresseux. En plus de redimensionner automatiquement les images, Mirage agit comme un chargeur paresseux, ne chargeant les images qu'à la demande. La fonction Mirage de Cloudflare est disponible pour les clients de Cloudflare sur les plans libre-service Pro et Business, ainsi que pour les clients Enterprise.

Quelles autres ressources de la page peuvent utiliser le chargement paresseux ?

• JavaScript : JavaScript est ce que l'on appelle une ressource bloquant le rendu - ce qui signifie qu'un navigateur ne peut pas rendre la page tant que le code JavaScript n'est pas chargé. Le code JavaScript peut être divisé en modules plus petits qui sont chargés en cas de besoin, ce qui réduit le temps de chargement des pages qui doivent exécuter JavaScript (learn more).
• CSS : CSS est également une ressource qui bloque le rendu. La division d'un fichier CSS en plusieurs fichiers qui ne se chargent qu'en cas de besoin peut contribuer à réduire le temps pendant lequel le navigateur est empêché d'afficher le reste de la page. Les fichiers CSS non bloquants doivent avoir leur propre lien avec une propriété media ajoutée pour indiquer au navigateur quand les charger (en savoir plus).
• iframes : les iframes sont utilisées pour intégrer le contenu d'une source externe dans une page web. Les balises iframe peuvent inclure le même attribut HTML chargement décrit ci-dessus pour les images.

Quels sont les avantages du chargement paresseux ?

Chargement plus rapide des pages : toutes choses égales par ailleurs, les pages Web dont les fichiers sont de petite taille se chargent plus rapidement. Avec le chargement paresseux, une page Web commence par être plus petite que sa taille réelle et se charge donc plus rapidement. La rapidité des performances web présente de nombreux avantages, dont un meilleur SEO, des taux de conversion plus élevés, et une meilleure expérience utilisateur.

Pas de contenu inutile : supposons qu'une page charge plusieurs images en dessous du titre mais que l'utilisateur quitte la page avant de la faire défiler. Dans ce cas, la bande passante utilisée pour fournir les images et le temps passé par le navigateur à les demander et à les rendre ont été essentiellement gaspillés. En revanche, le chargement paresseux garantit que ces images ne sont chargées que lorsque cela est nécessaire. Cela permet d'économiser du temps et de la puissance de traitement, mais aussi de l'argent pour le propriétaire du site Web, car il utilise moins de bande passante.

Quels sont les inconvénients du chargement paresseux ?

Les utilisateurs peuvent demander des ressources plus rapidement que prévu : par exemple, si un utilisateur fait défiler rapidement une page, il peut devoir attendre le chargement des images. Cela pourrait avoir un impact négatif sur l'expérience utilisateur.

Communication supplémentaire avec le serveur: au lieu de demander tout le contenu de la page en une seule fois, le navigateur peut être amené à envoyer plusieurs demandes de contenu aux serveurs du site Web au fur et à mesure que l'utilisateur interagit avec la page. L'utilisation d'un réseau de diffusion de contenu (RDC) minimise cet inconvénient potentiel, car les images sont mises en cache par le RDC et le navigateur n'a pas besoin d'envoyer une requête jusqu'au serveur d'origine pour les récupérer.

Code supplémentaire à traiter par le navigateur : si un développeur ajoute plusieurs lignes de JavaScript à une page Web pour indiquer au navigateur comment charger paresseusement les ressources de la page, cela ajoute à la quantité de code que le navigateur doit charger et traiter. S'il est effectué de manière inefficace, ce léger temps de chargement et de traitement supplémentaire peut l'emporter sur le temps gagné par le chargement paresseux.

Qu'est-ce que le lazy loading ?

Le chargement rapide consiste à charger toutes les ressources de la page Web en même temps, ou dès que possible. Certaines applications qui utilisent le chargement rapide peuvent afficher un écran « Loading ». Les applications Web complexes et exigeantes en code, comme les jeux en ligne, peuvent préférer utiliser le chargement rapide.

Comment les développeurs peuvent-ils accélérer une page web ?

Un certain nombre de facteurs influent sur les performances du Web, mais ces trois étapes constituent un bon point de départ pour rendre un site Web plus rapide :

1. Utilisez un RDC: lorsque le contenu web est mis en cache dans un RDC, la communication avec le serveur d'origine est réduite au minimum, que le chargement paresseux soit utilisé ou non. Les RDC fournissent également le contenu aux utilisateurs plus rapidement car ils sont généralement plus proches de l'utilisateur que le serveur d'origine.
2. Optimisez les images : Des images trop grandes auront un impact sur les performances, même si le chargement paresseux est utilisé. En réduisant la taille des fichiers d'image chaque fois que possible, on s'assure que les images se chargent rapidement.
3. Minimiser le code : la Minimisation est le processus consistant à supprimer tous les caractères inutiles du code CSS et JavaScript sans en altérer la fonctionnalité. Cela inclut la suppression des espaces blancs, des commentaires et des points-virgules. La minification réduit la taille du fichier de code, ce qui augmente la vitesse de chargement.

Voir d'autres moyens d'améliorer les performances des pages Web : Conseils pour améliorer la vitesse des sites Web