Lazy load WordPress : ce que fait le natif, LCP et vidéos

Le lazy load WordPress est natif : depuis WordPress 5.5, le CMS ajoute tout seul l’attribut loading="lazy" aux images, et depuis WordPress 5.7 aux iframes (vidéos YouTube, cartes). Tu n’as donc pas besoin d’un plugin pour l’activer. Le vrai travail consiste à vérifier que l’image du haut de page (celle qui compte pour le LCP) n’est pas retardée, à traiter les vidéos et à savoir désactiver ou exclure le lazy loading quand il gêne.

Ce guide reprend ce que WordPress fait version par version, d’après les notes officielles de l’équipe Core, puis les réglages concrets : vérifier, exclure, désactiver, compléter.

Lazy loading et LCP : les deux définitions à connaître

Le lazy loading (chargement différé) désigne la technique qui retarde le chargement d’un média jusqu’à ce qu’il approche de la zone visible de l’écran (MDN Web Docs). Une image en bas de page n’est téléchargée que si le visiteur fait défiler la page jusqu’à elle.

Le LCP (Largest Contentful Paint) désigne le temps mis pour afficher le plus grand élément visible au chargement, souvent l’image principale. C’est un des trois Core Web Vitals de Google. Son seuil « bon » est de 2,5 secondes ou moins, mesuré au 75e centile des chargements réels (web.dev, LCP).

Les deux sont liés : le lazy loading allège la page, mais appliqué à l’image du haut, il dégrade le LCP. Google le dit clairement : ne pas lazy-loader les images visibles dès le chargement, surtout l’image LCP. Pour mesurer l’enjeu, au 90e centile, les sites envoient plus de 5 Mo d’images, sur mobile comme sur ordinateur (web.dev, lazy loading natif des images).

Ce que WordPress fait nativement, version par version

Le lazy loading natif de WordPress s’est construit en quatre étapes. Chacune est documentée sur make.wordpress.org/core.

Quelques précisions qui expliquent la plupart des cas « ça ne marche pas » :

• Les dimensions sont obligatoires. WordPress n’ajoute loading="lazy" qu’aux balises <img> qui ont à la fois width et height. Il complète ces attributs quand il le peut. Même règle pour les iframes depuis la 5.7.
• La première image est épargnée depuis la 5.9. Sur 50 thèmes populaires testés par l’équipe Core, ce changement a amélioré le LCP partout, jusqu’à 30 % de chargement plus rapide (note 5.9).
• Depuis la 6.3, ce sont les trois premiers éléments. Le filtre wp_omit_loading_attr_threshold vaut 3 par défaut, pour mieux gérer les mises en page en colonnes (référence développeur).
• fetchpriority="high" est automatique depuis la 6.3. WordPress l’ajoute à l’image qu’il juge la plus probable pour le LCP. Selon la note officielle, cet attribut améliore en général le LCP de 5 à 10 %. Une image doit faire au moins 50 000 pixels carrés pour être éligible, seuil réglable par le filtre wp_min_priority_img_pixels (référence développeur).

En clair : sur un WordPress à jour avec un thème qui passe par les fonctions standard, le lazy loading des images et l’exclusion du haut de page sont déjà gérés. Les problèmes viennent surtout des thèmes, builders et plugins qui génèrent leurs images autrement.

Vérifier le lazy loading sur ton site WordPress

Avant de toucher à quoi que ce soit, regarde ce que reçoit vraiment le navigateur.

1. Ouvre une page, clic droit puis « Afficher le code source ».
2. Cherche loading="lazy" : les images du bas de page doivent l’avoir.
3. Cherche ton image principale (bannière, image à la une) : elle ne doit pas avoir loading="lazy", et idéalement porter fetchpriority="high".
4. Lance PageSpeed Insights ou Lighthouse (Chrome DevTools, onglet Lighthouse) : le rapport désigne l’élément LCP de la page.

Une image correctement différée ressemble à ceci :

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

Si l’élément LCP porte loading="lazy", passe à la section suivante. Si des images du bas de page n’ont pas l’attribut, vérifie d’abord qu’elles ont bien width et height.

Exclure l’image LCP du lazy load WordPress

C’est le réglage qui rapporte le plus. Trois cas, du plus simple au plus fin.

Cas 1 : l’image LCP est dans le contenu mais au-delà des trois premières. Augmente le seuil avec le filtre wp_omit_loading_attr_threshold (dans le functions.php d’un thème enfant ou un petit plugin maison) :

add_filter( 'wp_omit_loading_attr_threshold', function () {
    return 4;
} );

Cas 2 : exclure une image précise. Le filtre wp_img_tag_add_loading_attr reçoit la valeur de l’attribut, la balise <img> complète et le contexte. Retourner false supprime l’attribut, retourner 'eager' force un chargement immédiat (référence développeur). Exemple pour toute image qui porte la classe hero :

add_filter( 'wp_img_tag_add_loading_attr', function ( $value, $image, $context ) {
    if ( false !== strpos( $image, 'hero' ) ) {
        return false;
    }
    return $value;
}, 10, 3 );

Cas 3 : l’image est affichée par ton thème. Si le gabarit utilise wp_get_attachment_image(), passe 'loading' => false dans ses attributs, comme le montre la note officielle de WordPress 5.5 :

echo wp_get_attachment_image( 42, 'large', false, array( 'loading' => false ) );

Si un plugin de performance applique son propre lazy load, ces filtres ne suffisent pas : il faut ajouter l’image à la liste d’exclusion du plugin.

Désactiver le lazy loading WordPress

Le filtre maître s’appelle wp_lazy_loading_enabled. Il existe depuis WordPress 5.5 et reçoit trois paramètres : la valeur par défaut, le nom de la balise (img ou iframe) et le contexte (référence développeur).

Pour tout désactiver :

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Pour ne désactiver que les iframes et garder les images :

add_filter( 'wp_lazy_loading_enabled', function ( $default, $tag_name ) {
    if ( 'iframe' === $tag_name ) {
        return false;
    }
    return $default;
}, 10, 2 );

La désactivation totale se justifie rarement. Elle a du sens dans un seul cas courant : un plugin de performance prend le relais. Sinon, préfère l’exclusion ciblée de la section précédente.

Lazy loading des vidéos et iframes dans WordPress

Les vidéos sont souvent le plus gros poids mort d’une page. Selon web.dev, lazy-loader les vidéos YouTube intégrées économise environ 500 Ko au chargement initial (web.dev, lazy loading des iframes).

Vidéos YouTube, Vimeo, Google Maps (iframes). Depuis WordPress 5.7, les iframes du contenu reçoivent loading="lazy", mais seulement si elles ont width et height. Or beaucoup de fournisseurs d’intégration (oEmbed) ne transmettent pas ces dimensions : la note 5.7 précise que le lazy loading ne s’applique alors pas. Vérifie donc dans le code source que tes iframes portent bien l’attribut. Pour exclure une iframe visible dès le chargement, le filtre dédié s’appelle wp_iframe_tag_add_loading_attr.

Aller plus loin : l’aperçu à la place du lecteur. Le lazy loading retarde l’iframe, mais le lecteur YouTube se charge quand même dès qu’il approche de l’écran. Une façade affiche seulement la miniature et ne charge le lecteur qu’au clic. WP Rocket propose cette option sous le nom « Replace YouTube iframe with preview image » (documentation WP Rocket).

Vidéos hébergées sur ton site (balise <video>). WordPress ne leur applique pas de lazy loading : ses notes 5.5 et 5.7 ne visent que les images et les iframes. Le levier principal est l’attribut preload. Avec preload="none", le navigateur ne précharge rien avant la lecture ; avec metadata, il ne récupère que les informations comme la durée. La valeur par défaut varie selon le navigateur (MDN, élément video). MDN documente aussi un attribut loading="lazy" sur <video> : vérifie sa prise en charge par les navigateurs sur la même page avant de t’y fier.

Faut-il un plugin de lazy load sur WordPress ?

Pour les images du contenu, non : WordPress le fait depuis la 5.5. Un plugin devient utile dans trois situations.

1. Images de fond en CSS. WordPress ne touche qu’aux balises <img> et <iframe>. Les bannières en background-image des builders lui échappent. WP Rocket, par exemple, propose un lazy load dédié aux images de fond CSS (documentation WP Rocket).
2. Beaucoup de vidéos intégrées. La façade YouTube décrite plus haut évite de charger le lecteur pour rien.
3. Un thème ou un builder qui génère ses images hors des fonctions WordPress, et qui ne reçoit donc jamais l’attribut natif.

Attention au cumul. La documentation de WP Rocket indique que son lazy load désactive automatiquement celui de WordPress quand il est actif. D’autres outils n’ont pas forcément ce garde-fou : deux systèmes en parallèle créent des conflits et parfois des images qui ne s’affichent pas. Beaucoup d’extensions de cache WordPress incluent déjà un module de lazy load, regarde leurs réglages avant d’installer un plugin de plus. Si le problème vient du poids des fichiers eux-mêmes, notre comparatif des plugins d’optimisation d’images prend le relais.

Pièges courants

• Lazy-loader l’image du haut de page : le piège numéro un. Toujours vérifier l’élément LCP désigné par Lighthouse.
• Oublier width et height : sans eux, WordPress n’ajoute pas l’attribut, et le navigateur ne peut pas réserver l’espace, ce qui provoque des décalages de mise en page (CLS).
• Différer le logo et les icônes de l’en-tête : toujours visibles, ils ne gagnent rien au lazy loading.
• Empiler natif, plugin et module de cache : un seul système de lazy load à la fois.
• Ignorer les vidéos hébergées : sans preload="none", une balise <video> peut précharger une partie du fichier même hors de l’écran.

Si ton site reste lent malgré ces réglages, le lazy loading n’est probablement pas le vrai problème : notre diagnostic d’un site WordPress très lent passe en revue les autres causes.

Questions fréquentes sur le lazy load WordPress