Un site riche en images peut vite devenir lent. Le chargement différé (lazy loading) consiste à ne charger une image ou une vidéo qu’au moment où le visiteur s’en approche en faisant défiler la page. Bonne nouvelle : WordPress le fait déjà en grande partie tout seul. Voici comment en tirer le meilleur, et quand un plugin reste utile.
Le lazy loading, comment ça marche ?
Sans chargement différé, le navigateur télécharge toutes les images d’une page dès l’ouverture, même celles situées tout en bas et que le visiteur ne verra peut-être jamais. Avec le lazy loading, seules les images visibles (ou proches de l’écran) sont chargées. Résultat : une page qui s’affiche plus vite, moins de données consommées sur mobile et un serveur moins sollicité.
Aujourd’hui, ce mécanisme est intégré directement aux navigateurs grâce à l’attribut HTML loading="lazy". Comme l’explique le guide web.dev de Google, il est pris en charge par Chrome, Edge, Firefox et Safari, et les navigateurs qui ne le connaissent pas l’ignorent simplement, sans effet négatif.
WordPress le fait déjà pour vous
Depuis la version 5.5, WordPress ajoute automatiquement loading="lazy" aux images, comme détaillé sur le blog officiel des développeurs WordPress. Cela concerne notamment :
- les images insérées dans le contenu des articles et des pages ;
- les extraits et les widgets texte ;
- les avatars des commentaires ;
- les images affichées par le thème via les fonctions standard de WordPress.
Pour que cela fonctionne, les images doivent avoir une largeur et une hauteur définies, ce que WordPress complète lui-même pour les images de la médiathèque. Les versions récentes vont plus loin : elles évitent de différer la première grande image de la page, afin qu’elle s’affiche immédiatement.
Le piège à éviter : différer les images du haut de page
Le lazy loading n’est utile que pour les images situées plus bas dans la page. L’image principale visible à l’ouverture (bannière, image à la une) doit au contraire se charger tout de suite : la différer ralentit l’affichage et pénalise l’indicateur Largest Contentful Paint suivi par Google. Si vous ajoutez un plugin, vérifiez qu’il permet d’exclure ces images.
Quand un plugin reste utile
Pour la plupart des sites, le comportement natif suffit. Un plugin apporte surtout des réglages plus fins ou l’optimisation d’autres éléments que les images. Quelques extensions gratuites et maintenues :
- Smush : compression et redimensionnement des images, conversion dans des formats légers et chargement différé configurable.
- a3 Lazy Load : chargement différé des images, iframes et vidéos, avec des options d’exclusion et d’effets d’apparition.
- Lazy Load for Videos : remplace les vidéos YouTube et Vimeo intégrées par une simple vignette, le lecteur n’étant chargé qu’au clic. Idéal pour les pages qui contiennent beaucoup de vidéos, comme les blogs consacrés aux images aériennes.
- LiteSpeed Cache et Autoptimize : des extensions d’optimisation globale (cache, CSS, JavaScript) qui intègrent aussi des options de chargement différé.
Attention à ne pas cumuler plusieurs solutions qui font la même chose : deux systèmes de lazy loading actifs en même temps peuvent provoquer des images qui ne s’affichent pas. Activez une seule option, puis testez vos pages.
Mesurer le résultat
Après chaque réglage, testez votre site avec un outil comme PageSpeed Insights. Comparez le temps d’affichage de la plus grande image et le poids total de la page avant et après. Pensez aussi à vérifier sur mobile, où le gain est souvent le plus visible.
Ce qu’il faut retenir
- WordPress applique déjà le lazy loading natif aux images, sans plugin.
- Les images visibles dès l’ouverture de la page ne doivent pas être différées.
- Un plugin est utile pour les vidéos, les iframes ou des réglages plus fins, mais une seule solution à la fois.
