Glossaire Web — Design / UX
Lazy loading (chargement différé)
Le lazy loading (chargement différé ou paresseux) est une technique d’optimisation qui consiste à ne charger les ressources d’une page (images, vidéos, iframes) qu’au moment où elles deviennent visibles pour l’utilisateur lors du scroll. Plutôt que de télécharger toute la page d’un coup, on charge l’essentiel immédiatement et le reste à la demande. Résultat : un chargement initial beaucoup plus rapide et une économie de bande passante significative.
Pourquoi utiliser le lazy loading ?
- Vitesse de chargement initiale — la page s’affiche plus vite car seules les ressources visibles above the fold sont chargées. Impact direct sur le LCP (Core Web Vitals).
- Économie de bande passante — si un visiteur ne scrolle pas jusqu’en bas de la page, les images en bas ne sont jamais chargées. Économie de data, précieuse sur mobile.
- Réduction des coûts serveur — moins de requêtes HTTP = moins de charge serveur = hébergement mieux optimisé.
- Meilleure UX — le site semble plus réactif. Les premières interactions sont possibles plus rapidement.
- Impact SEO — Google considère la vitesse comme un facteur de classement. Un site plus rapide = un meilleur référencement.
Comment fonctionne le lazy loading ?
Techniquement, le lazy loading surveille la position du visiteur dans la page. Quand une ressource approche de la zone visible, le navigateur déclenche son chargement. Le visiteur ne voit pas la différence : au moment où il arrive sur l’image, elle est déjà affichée.
Plusieurs méthodes existent :
- Lazy loading natif HTML — depuis 2019, l’attribut loading=”lazy” est intégré aux navigateurs. <img src=”photo.jpg” loading=”lazy”>. Simple, performant, sans JavaScript.
- Intersection Observer API — API JavaScript moderne qui détecte quand un élément entre dans la zone visible. Plus flexible que le lazy loading natif.
- Bibliothèques JavaScript — LazyLoad.js, lozad.js, vanilla-lazyload. Utilisées pour les cas complexes ou les anciens navigateurs.
Que doit-on ou non charger en lazy ?
- À charger en lazy — images below the fold, vidéos en bas de page, iframes (YouTube, Google Maps), images de bas de page, médias dans les sliders.
- À NE PAS charger en lazy — l’image principale de la hero section (impact LCP négatif), le logo du header, les icônes critiques, les polices web essentielles.
Lazy loading et WordPress
Depuis WordPress 5.5, le lazy loading natif est activé par défaut sur toutes les images. WordPress ajoute automatiquement loading=”lazy” sur les balises img. Cela concerne les images dans les articles, les pages, mais aussi les images importées via le média.
Pour aller plus loin, des extensions offrent un lazy loading plus avancé :
- WP Rocket — lazy loading pour images, iframes, vidéos. Remplacement automatique de YouTube par une image cliquable pour éviter de charger le player iframe lourd.
- a3 Lazy Load — plugin dédié avec options avancées.
- Smush / Imagify — ces optimiseurs d’images incluent aussi du lazy loading.
Les pièges à éviter
- Lazy loading sur l’image hero — l’image la plus importante above the fold ne doit JAMAIS être en lazy loading. Cela dégrade le LCP et pénalise le SEO.
- Oublier le placeholder — sans placeholder, l’espace de l’image n’est pas réservé pendant le chargement, ce qui crée du CLS (décalage de mise en page). Toujours définir width et height sur les balises img.
- Lazy loading trop agressif — charger uniquement quand l’image entre dans la viewport peut créer un effet “scintillant” désagréable. Charger 200-300px en avance donne une meilleure UX.
Le lazy loading bien configuré, c’est un gain de vitesse immédiat et gratuit sur n’importe quel site WordPress. Chez Jeff-Web, nous l’activons systématiquement via WP Rocket avec les bons réglages : pas de lazy sur la hero, placeholders avec dimensions explicites, préchargement des iframes YouTube. Des détails qui font la différence dans les Core Web Vitals.
Besoin d’un site web au design professionnel ?