Lazy loading WordPress : images, vidéos et piège du LCP

Ce qu’est le lazy loading (et pourquoi c’est mal compris)

Le lazy loading consiste à retarder le chargement d’un média jusqu’à ce qu’il approche de la zone visible à l’écran. L’idée est simple : pourquoi charger une image en bas de page dès l’arrivée du visiteur, si celui-ci ne scrollera peut-être jamais jusque-là ? Bien appliqué, ça réduit le poids initial de la page et accélère le rendu.

Mal appliqué — et c’est le cas sur une bonne partie des sites WordPress —, le lazy loading retarde exactement les éléments qu’il ne fallait pas retarder : l’image principale en haut de page, celle qui définit le LCP (Largest Contentful Paint), un des trois Core Web Vitals mesurés par Google. Ce guide t’explique ce que WordPress gère déjà seul, ce qui lui échappe encore, et où se situe le piège le plus fréquent.

Ce tutoriel s’adresse à toute personne qui gère un site WordPress (PME, e-commerce, site vitrine) et veut comprendre pourquoi son score PageSpeed stagne malgré des images optimisées.

Prérequis

• Accès à l’administration WordPress
• Un thème ou builder identifié (Elementor, WPBakery, ou thème natif)
• Un outil de mesure : PageSpeed Insights ou Lighthouse (intégré à Chrome DevTools)
• Accès FTP/SSH si tu dois éditer du code (optionnel selon les étapes)

1. Vérifier ce que WordPress fait déjà nativement

Depuis la version 5.5 (2020), WordPress applique automatiquement l’attribut loading="lazy" sur les balises <img> du contenu, à l’exception de la ou des premières images détectées dans le flux principal. Depuis WordPress 6.3, ce comportement s’est affiné : le CMS tente d’identifier automatiquement l’image “au-dessus de la ligne de flottaison” pour ne pas la mettre en lazy load.

Concrètement, si tu inspectes le code source de ta page (clic droit > Afficher le code source), tu dois voir quelque chose comme :

<img src="photo.jpg" loading="lazy" width="800" height="600" alt="...">

Ce mécanisme fonctionne bien pour :

• les images insérées via l’éditeur de blocs (Gutenberg),
• les images de la galerie native,
• certaines miniatures de thèmes récents.

Il ne fonctionne pas pour :

• les images injectées en background-image via CSS,
• les iframes (vidéos YouTube/Vimeo embarquées, Google Maps),
• les balises <video> natives,
• certains sliders et carrousels générés par des builders comme Elementor ou WPBakery.

Si ton site tourne sous un de ces builders, jette un œil à nos guides dédiés : Elementor lent et WPBakery détaillent les réglages spécifiques à chaque outil.

2. Identifier ce qui échappe au lazy load natif

Avant d’ajouter quoi que ce soit, fais l’inventaire. Ouvre les DevTools (F12), onglet Network, filtre “Img” et “Media”, puis recharge la page en scrollant lentement. Observe :

• Les vidéos embarquées (YouTube, Vimeo) se chargent-elles toutes dès l’arrivée sur la page, même celles en bas de page ?
• Les images de fond (bannières, sections héro secondaires) apparaissent-elles dans le poids initial ?
• Le slider d’accueil charge-t-il ses 6 slides d’un coup, ou seulement le premier ?

Ce diagnostic te dit précisément où intervenir. Souvent, le vrai poids mort d’une page WordPress vient moins des images du contenu (déjà gérées nativement) que des iframes vidéo et des sections en arrière-plan CSS des page builders.

3. Ajouter un plugin uniquement quand c’est justifié

Un plugin de lazy loading dédié (a3 Lazy Load, WP Rocket dans son module intégré, ou Autoptimize) a du sens dans trois cas précis :

1. Tu as des iframes vidéo en nombre (page portfolio, blog avec vidéos embarquées) : un plugin peut remplacer l’iframe par une simple miniature cliquable jusqu’au clic réel, ce qui évite de charger le lecteur YouTube entier (souvent plusieurs centaines de Ko de JS) avant même que l’utilisateur ne veuille regarder.
2. Tu utilises des background-image en CSS que WordPress ne détecte pas nativement.
3. Ton thème ou builder est ancien et n’implémente pas encore l’attribut loading="lazy" correctement.

Dans tous les autres cas — site en blocs Gutenberg récents, thème à jour — ajouter un plugin de lazy loading en plus du natif WordPress est redondant, et peut même créer des conflits (double application de l’attribut, scripts JS qui interceptent le scroll en double).

Si ton site combine plusieurs plugins de performance, vérifie aussi les interactions avec ton plugin de cache : certains modules cache incluent déjà un lazy load, inutile de superposer.

4. Corriger le piège du LCP : ne pas lazy-loader le haut de page

C’est l’erreur la plus fréquente et la plus coûteuse en score. Un plugin de lazy load mal configuré applique loading="lazy" à toutes les images, y compris celle qui définit ton LCP — souvent l’image héro en haut de page. Résultat : le navigateur attend un signal de scroll avant même de commencer à charger l’image la plus importante de la page. Ton LCP explose, parfois de 1 à 3 secondes.

La correction :

• Repère l’image ou la vidéo qui compose ton LCP (Lighthouse te l’indique directement dans son rapport, section “Largest Contentful Paint element”).
• Force loading="eager" sur cette image précise, ou exclue-la manuellement des règles du plugin (la plupart proposent une liste d’exclusion par classe CSS ou par ID).
• Ajoute plutôt fetchpriority="high" sur cette image pour indiquer au navigateur de la prioriser, en complément du retrait du lazy load.

Ce réglage à lui seul améliore souvent le LCP plus que n’importe quelle optimisation d’image en poids de fichier. D’ailleurs, si le problème vient de la qualité ou du poids des visuels eux-mêmes, notre comparatif des plugins d’optimisation d’images complète bien cette étape.

5. Tester et mesurer après mise en place

Ne fais pas confiance à ton impression visuelle — mesure. Lance PageSpeed Insights (mobile et desktop) avant et après chaque changement, en gardant une note du score et du temps de LCP. Vérifie aussi le comportement en navigation réelle (scroll manuel) pour confirmer que le lazy load se déclenche bien avant l’arrivée visuelle de l’élément — pas pile au moment où l’utilisateur le voit, ce qui créerait un effet de “pop-in” visible.

Si malgré ces réglages ton site reste lent globalement, le problème dépasse probablement le seul lazy loading — consulte notre diagnostic complet de site WordPress lent ou le guide d’optimisation WordPress pour une vue d’ensemble.

Pièges courants

• Lazy-loader l’image héro : le piège numéro un, détaillé plus haut. Toujours vérifier l’élément LCP identifié par Lighthouse.
• Cumuler deux systèmes de lazy load (natif + plugin + module de cache) : ça crée des conflits JS et parfois des images qui ne s’affichent jamais. Si tu constates des images floues ou manquantes après une optimisation, vérifie d’abord ce cumul.
• Oublier les dimensions width/height sur les images : sans elles, le navigateur ne peut pas réserver l’espace, ce qui cause des décalages de mise en page (CLS) même avec un bon lazy loading.
• Appliquer le lazy load aux logos et icônes du header : ce sont des éléments minuscules, toujours visibles immédiatement — le lazy load n’apporte aucun gain et peut créer un flash visuel désagréable.
• Ignorer les vidéos auto-hébergées : une balise <video> sans preload="none" peut précharger plusieurs mégaoctets même hors champ de vision.

Le lazy loading n’est pas une option à activer ou désactiver en bloc : c’est un réglage fin, image par image. WordPress fait la moitié du travail depuis 2020 — le reste consiste à corriger ses angles morts (iframes, arrière-plans, builders) sans jamais toucher à l’image qui ouvre la page.