Depuis WordPress 5.5, l’attribut loading="lazy" est ajouté automatiquement à la quasi-totalité des images de contenu, une optimisation bienvenue pour différer le chargement des images situées bas dans la page. Sur un site d’actualités, cette automatisation s’est retournée contre l’équipe technique : l’image principale de chaque article, celle qui s’affiche immédiatement en haut de page et constitue l’élément le plus grand visible au chargement, se voyait elle aussi différée par ce mécanisme.
Le résultat était visible dans le rapport Core Web Vitals : le Largest Contentful Paint, la métrique qui mesure le temps d’affichage du plus grand élément visible, s’est dégradé après la mise à jour vers WordPress 5.5, précisément à cause de cette image désormais chargée en différé alors qu’elle est visible dès l’arrivée sur la page.
Pourquoi WordPress applique le lazy-load même à cette image
Le mécanisme natif, porté par la fonction wp_filter_content_tags(), ajoute l’attribut loading="lazy" à toute image insérée dans le contenu via l’éditeur, sans distinguer sa position réelle à l’écran une fois la page rendue. WordPress ne peut pas connaître cette position au moment de générer le HTML côté serveur : le calcul dépend de la mise en page finale, de la taille d’écran du visiteur, et de la présence éventuelle d’éléments au-dessus dans le thème.
La solution : exclure explicitement l’image principale
Plutôt que de désactiver le lazy-load pour l’ensemble du site, ce qui reviendrait à perdre le bénéfice de l’optimisation sur toutes les images réellement basses dans la page, la bonne approche consiste à cibler précisément l’image concernée via le filtre wp_img_tag_add_loading_attr, introduit en même temps que le mécanisme lui-même :
add_filter( 'wp_img_tag_add_loading_attr', function ( $value, $image, $context ) {
if ( 'the_content' === $context && ! did_action( 'ma_recette_first_image_rendered' ) ) {
do_action( 'ma_recette_first_image_rendered' );
return false;
}
return $value;
}, 10, 3 );
Une alternative plus explicite : la fonction the_post_thumbnail
Sur ce projet, l’image principale de chaque article n’était en réalité pas insérée dans le contenu éditorial mais affichée via the_post_thumbnail(), l’image mise en avant. Cette fonction accepte un tableau d’attributs personnalisés, ce qui permet de forcer explicitement loading="eager" sans passer par le filtre précédent :
the_post_thumbnail( 'large', array(
'loading' => 'eager',
'fetchpriority' => 'high',
) );
L’attribut fetchpriority="high", plus récent, indique explicitement au navigateur de prioriser le téléchargement de cette image dès qu’il rencontre la balise, un signal complémentaire au retrait du lazy-load qui accélère encore l’affichage sur les connexions les plus lentes.
Ce qu’il ne fallait surtout pas faire
- Désactiver totalement le lazy-load natif via
add_filter( 'wp_lazy_loading_enabled', '__return_false' ), une solution radicale qui aurait fait perdre le bénéfice de l’optimisation sur toutes les images secondaires de chaque article. - Ajouter manuellement
loading="eager"dans le HTML de chaque article via l’éditeur, une solution non maintenable à l’échelle d’un site avec plusieurs rédacteurs qui publient quotidiennement.
Résultat mesuré après correction
Après la mise en place du filtre ciblé sur l’image mise en avant, le Largest Contentful Paint moyen relevé dans le rapport Search Console est repassé sous le seuil « Bon » en un peu moins de trois semaines, le temps que Google recalcule ses données terrain sur un échantillon suffisant de visites. Les images secondaires plus bas dans les articles ont continué de bénéficier du lazy-load natif sans changement, préservant le gain de bande passante initial sur les pages longues.
Avant d’activer une optimisation automatique du cœur de WordPress à l’échelle d’un site entier, vérifiez toujours son effet sur l’image la plus visible de chaque gabarit : c’est presque toujours elle qui décide du LCP, pas les images du bas de page.
En résumé
Le lazy-load natif de WordPress est une bonne optimisation par défaut, mais il ne connaît pas la mise en page réelle de chaque thème. Exclure explicitement l’image visible au premier écran, via un filtre ciblé ou les attributs de the_post_thumbnail(), permet de conserver tout le bénéfice du mécanisme sans en payer le prix sur la métrique la plus visible pour les visiteurs.
