Imagine une page avec 50 images. Est-ce vraiment nécessaire de télécharger les 50 immédiatement alors que le visiteur ne voit que les 3 premières ? Pas forcément. C'est là que le lazy loading, ou chargement différé, devient intéressant. L'idée est simple : ne pas forcément charger immédiatement ce qui n'est pas encore nécessaire.
Le lazy loading, ou chargement différé, consiste à attendre avant de charger certaines ressources qui ne sont pas immédiatement nécessaires. Prenons une image située tout en bas d'une longue page. Lorsque le visiteur arrive, cette image est très loin de la zone qu'il regarde. Elle n'a donc pas forcément besoin d'être téléchargée immédiatement. Le navigateur peut attendre que l'image approche de la zone visible avant de la charger.
Imaginons une page contenant beaucoup d'images. Sans chargement différé, le navigateur peut devoir télécharger de nombreuses images alors que le visiteur ne les voit pas encore. Avec le lazy loading, certaines images peuvent attendre. La quantité de données à télécharger au début peut donc être réduite. Le navigateur peut ainsi se concentrer davantage sur les éléments nécessaires à l'affichage initial.
Tu as un article de 2 500 mots avec 15 illustrations. Lorsque le visiteur arrive sur la page, seules les premières images sont visibles. Les autres se trouvent plus bas dans l'article. Sans chargement différé, le navigateur peut commencer à télécharger de nombreuses images alors qu'elles ne sont pas encore visibles. Avec un lazy loading correctement configuré, les images situées plus loin peuvent attendre avant d'être téléchargées.
Regarde tes images
Commence par identifier les images situées sous la ligne de flottaison, dans des articles longs, dans des galeries ou dans des listes importantes. Ce sont de bonnes candidates pour un chargement différé.
Identifie l'image principale
Une image immédiatement visible ne doit pas forcément être chargée en différé. Si elle participe à l'affichage initial de la page, la retarder peut être contre-productif.
Vérifie ton CMS
De nombreux CMS modernes proposent déjà du lazy loading natif ou via une extension. Avant d'installer un outil supplémentaire, vérifie donc ce que ton CMS propose déjà.
Évite les configurations agressives
Ne cherche pas à retarder absolument tout. Le but est de charger plus intelligemment, pas de rendre l'affichage incomplet.
Teste
Recharge la page et observe les ressources dans les outils développeur de ton navigateur. L'objectif est de vérifier que le lazy loading produit réellement le résultat attendu.
| Terme | Définition simple |
|---|---|
| Lazy loading | Chargement différé d'une ressource jusqu'à ce qu'elle devienne nécessaire |
| Chargement différé | Autre manière de parler du lazy loading |
| Ligne de flottaison | Partie visible d'une page avant de faire défiler |
| Ressource | Élément chargé par le navigateur |
| Above the fold | Zone visible immédiatement à l'arrivée sur une page |
Question 1 — Quel est le principe du lazy loading ?
Question 2 — Faut-il appliquer le lazy loading à toutes les images ?
Question 3 — Quelle image est une bonne candidate au lazy loading ?
Question 4 — Quel est l'objectif principal du lazy loading ?
4/4
Parfait ! Tu comprends comment charger intelligemment les ressources.
Tu sais maintenant quoi charger et quand le charger. Le lazy loading permet de différer certaines ressources qui ne sont pas immédiatement nécessaires.
Mais il existe une autre technique essentielle : éviter de télécharger à nouveau des ressources que le navigateur possède déjà. C'est le rôle de la mise en cache.
La Boussole SEO