Lazy Loading et mise en cache : améliorer sensiblement le temps de chargement

Deux termes reviennent sans cesse quand il est question d'un site web rapide : le Lazy Loading et la mise en cache. Ils sonnent techniques, mais derrière se cache une idée toute simple, à savoir n'envoyer au visiteur que ce dont il a besoin sur le moment, et ne rien charger deux fois. C'est justement cela qui rend une page sensiblement plus rapide.

Je vous explique ici ce que signifient ces deux notions, pourquoi elles vont de pair et combien de vitesse elles apportent réellement, sans charabia technique, avec des images du quotidien.

Ce que signifie vraiment le Lazy Loading

Imaginez que vous entriez dans un restaurant et que le serveur vous pose immédiatement sur la table chaque plat de toute la carte, entrée, plat principal, dessert, tout d'un coup. Absurde, non ? Vous recevez le dessert quand vous en êtes au dessert.

C'est exactement ainsi que fonctionne le Lazy Loading, c'est-à-dire le chargement différé. Au lieu de charger toute la page avec toutes les images d'un seul coup, le navigateur ne va d'abord chercher que ce qui est visible en haut. Les images plus bas ne sont chargées que lorsque vous y faites défiler.

Cela a un effet concret : la première impression est là en une fraction du temps. Et si le visiteur ne défile pas jusqu'en bas, les images du bas n'ont jamais été transférées inutilement, ce qui économise du temps de chargement et du volume de données, surtout sur le mobile.

Ce que signifie la mise en cache

La mise en cache est le pendant. Ici, il ne s'agit pas de ce qui est chargé, mais de la fréquence. Un cache est une mémoire temporaire : les contenus qui ne changent guère sont stockés, afin de ne pas devoir être récupérés à nouveau sur le serveur la fois suivante.

Pensez à votre bistrot habituel. Lors de la première visite, le patron doit vous découvrir, prendre votre commande, tout est nouveau. À la dixième fois, il sait déjà ce que vous buvez. Cela va plus vite, parce que beaucoup de choses sont déjà connues. Un cache retient les éléments d'un site web exactement de cette façon.

La mise en cache se produit à plusieurs endroits :

• Dans le navigateur du visiteur : le logo, les polices et la mise en page sont stockés localement. Au deuxième affichage de la page, ils sont immédiatement là.
• Sur le serveur : des pages toutes prêtes sont conservées, au lieu de les reconstruire à chaque appel.
• Dans le réseau de diffusion (CDN) : les contenus se trouvent sur des serveurs proches du visiteur, les chemins sont ainsi courts.

Pourquoi les deux vont de pair

Le Lazy Loading et la mise en cache tirent à la même corde, mais abordent le problème par deux côtés. L'un fait en sorte qu'à la première visite, on ne charge pas trop de choses d'un coup. L'autre fait en sorte qu'à la deuxième visite, beaucoup n'ait plus du tout besoin d'être rechargé.

Ensemble, cela donne une page qui se construit rapidement au premier clic et devient encore plus preste à chaque clic suivant. C'est précisément cette sensation, que ça avance tout simplement, qui retient les visiteurs et fait que Google classe votre page comme agréable.

Qu'est-ce que cela apporte en pratique ?

Plus que beaucoup ne le pensent. Les images sont presque toujours le plus gros morceau d'un site web. Si vous avez une page chargée d'images et que la moitié d'entre elles ne se charge qu'au défilement, cela réduit souvent déjà de moitié ce qui est transféré au démarrage. La première impression est ainsi là bien plus tôt.

Pour la mise en cache, le bond est le plus grand lors des visites répétées. Qui a déjà ouvert votre page une fois n'en charge souvent qu'une fraction la deuxième fois, le reste se trouve déjà dans la mémoire temporaire. Pour les clients fidèles qui passent régulièrement, la page paraît de ce fait presque sans latence.

Dois-je m'en occuper moi-même ?

La réponse honnête : vous devriez savoir que cela existe, mais c'est à celui qui construit votre page de s'en occuper. Sur un site web bien fait, le Lazy Loading et une mise en cache raisonnable sont configurés d'emblée. Vous n'avez aucun interrupteur à basculer.

Ce à quoi vous pouvez faire attention :

• Les images ne devraient se charger que lorsqu'elles apparaissent à l'écran, c'est aujourd'hui la norme avec un petit ajout dans le code.
• Votre serveur ou hébergeur devrait mettre les contenus en cache et les diffuser avec les bons réglages.
• Après des changements importants, le cache doit être vidé, sinon les visiteurs voient éventuellement encore l'ancienne version.

Sur les sites construits par kit, c'est justement le dernier point qui est un piège fréquent : on modifie quelque chose, mais on voit encore soi-même l'ancien, parce que son propre navigateur affiche une version mise en cache. Pas de quoi paniquer, un bref vidage suffit le plus souvent.

Une rapidité qu'on ne voit pas, mais qu'on ressent

Le beau côté du Lazy Loading et de la mise en cache, c'est qu'ils travaillent de façon invisible. Personne ne les remarque directement. Seul le résultat est perceptible : la page est là tout de suite, le défilement est fluide, à la deuxième visite tout va encore plus vite. C'est cette facilité qui reste en tête.

Je construis mes sites web de manière à ce que cette technique soit présente dès le départ, code léger, images optimisées, un cache bien pensé. Si vous voulez savoir quel gain de vitesse est possible sur votre page, jetez volontiers un œil à d'autres articles ou contactez-moi directement via le formulaire de contact. Je vous dis honnêtement où se trouve le plus grand levier.