Une page web contient souvent plus d'images que ce qu'un visiteur verra réellement à l'écran avant de faire défiler la page. Le lazy loading (chargement différé) part d'une logique simple : pourquoi télécharger immédiatement une image située tout en bas de la page, alors que le visiteur ne la verra peut-être jamais s'il ne descend pas jusque-là ?
Comment fonctionne le chargement différé
Le navigateur retarde le téléchargement d'une image tant qu'elle reste en dehors de la zone visible à l'écran (hors du « viewport »), et déclenche son chargement seulement lorsque le défilement de la page l'approche. Depuis plusieurs années, cette fonctionnalité est disponible nativement dans les navigateurs modernes via le simple attribut HTML loading="lazy" ajouté à une balise image, sans nécessiter de bibliothèque JavaScript externe comme c'était le cas auparavant.
Le bénéfice réel
Sur une page avec de nombreuses images (catalogue produit, galerie, article long avec illustrations), le lazy loading réduit significativement le volume de données téléchargées lors du chargement initial, puisque seules les images réellement visibles au premier affichage sont chargées immédiatement. Pour un visiteur qui ne lit que le début d'un article ou qui quitte une page de catalogue après les premiers résultats, cela représente une économie de bande passante directement proportionnelle au nombre d'images jamais réellement vues.
Le piège à éviter : l'image principale
Appliquer le lazy loading à l'image la plus visible dès l'ouverture de la page — typiquement une image d'en-tête ou une photo principale au-dessus de la ligne de flottaison — produit l'effet inverse de celui recherché. Le navigateur retarde alors le chargement d'une ressource dont il a besoin immédiatement pour afficher la page, ce qui dégrade la métrique LCP (Largest Contentful Paint), l'un des Core Web Vitals surveillés par Google. La bonne pratique consiste à :
- Charger normalement, voire en priorité, les images visibles sans défilement dès l'arrivée sur la page.
- Appliquer le lazy loading uniquement aux images situées plus bas dans la page, hors de la zone immédiatement visible.
WordPress applique d'ailleurs cette logique nativement depuis plusieurs versions du cœur : le chargement différé est activé automatiquement, mais exclut généralement la première image détectée dans le contenu pour éviter précisément ce piège.
Au-delà des images : les iframes
Le même principe s'applique aux éléments <iframe>, utilisés notamment pour intégrer des vidéos YouTube ou des cartes Google Maps : différer leur chargement jusqu'à ce qu'ils deviennent visibles évite de charger un contenu tiers potentiellement lourd pour une portion de page que le visiteur ne consultera peut-être jamais.
Le piège des carrousels et des galeries
Un carrousel d'images (plusieurs visuels qui défilent automatiquement ou au clic) pose un problème particulier pour le lazy loading : techniquement, toutes les images du carrousel sont présentes dans la page dès le départ, même si une seule est visible à la fois. Appliquer un lazy loading générique à l'ensemble de ces images peut :
- Retarder le chargement de la deuxième image du carrousel, visible seulement quelques secondes après l'arrivée sur la page, provoquant un affichage vide ou incomplet au moment de la transition.
- Entrer en conflit avec le script JavaScript qui gère le défilement automatique, si celui-ci n'est pas conçu pour attendre que chaque image soit effectivement chargée avant de l'afficher.
Pour ce type de composant, un chargement eager (immédiat) des deux ou trois premières images, combiné à un lazy loading uniquement pour les visuels plus loin dans le défilement, reste l'approche la plus sûre, au prix d'une configuration plus fine que le simple attribut natif par défaut.
Le lazy loading fonctionne-t-il sans JavaScript ?
Oui, l'attribut natif loading="lazy" est pris en charge directement par le navigateur, sans nécessiter de script externe. Les anciennes solutions basées sur JavaScript restent utiles uniquement pour des comportements plus personnalisés que le standard natif.
Faut-il lazy-loader toutes les images d'un site ?
Non, uniquement celles situées en dehors de la zone visible au premier chargement. L'image principale visible immédiatement doit au contraire charger sans délai pour ne pas pénaliser la vitesse perçue de la page.
Nos offres d'hébergement WordPress et d'hébergement mutualisé s'appuient sur les réglages natifs de performance du CMS, incluant cette gestion intelligente du chargement différé, pour un site rapide sans configuration technique supplémentaire de votre part.
