Pourquoi l’image principale d’une page met-elle plus de temps à s’afficher après l’installation d’un plugin de cache censé accélérer le site ? La réponse tient à un détail que peu de développeurs vérifient : deux mécanismes de chargement différé peuvent s’appliquer simultanément à la même balise <img>, chacun ignorant l’existence de l’autre.
Depuis la version 5.5, WordPress applique automatiquement l’attribut loading="lazy" aux images situées sous la ligne de flottaison, en se basant sur une heuristique simple liée à leur position dans le document. WP Rocket, de son côté, propose sa propre fonctionnalité de lazy-load, activée par défaut sur les installations récentes, qui remplace les balises src par des attributs différés traités en JavaScript.
Le symptôme : une image visible qui arrive en retard
Le cas se manifeste typiquement sur l’image d’en-tête d’un article, positionnée tout en haut de page et donc visible dès le chargement initial, sans le moindre défilement. Une image dans cette position ne devrait jamais être différée, sous peine de dégrader le Largest Contentful Paint, la métrique qui mesure le temps d’affichage du plus grand élément visible à l’écran.
Or, l’inspection du DOM révèle que cette image porte à la fois l’attribut natif loading="lazy" ajouté par WordPress et une classe rocket-lazyload ajoutée par le plugin de cache, avec un attribut data-lazy-src à la place du src réel. Le navigateur attend alors qu’un script JavaScript s’exécute pour révéler l’image, ce qui retarde son affichage bien après le moment où elle aurait pu apparaître nativement.
Diagnostic : deux couches qui ne se coordonnent pas
Le problème ne vient pas d’un bug à proprement parler, mais d’une absence de coordination entre deux mécanismes qui, pris séparément, fonctionnent correctement. WP Rocket exclut en théorie automatiquement une image lorsqu’elle est explicitement marquée comme prioritaire, mais cette détection automatique échoue régulièrement sur des thèmes personnalisés qui génèrent leur balisage d’image en dehors des fonctions standards de WordPress, comme the_post_thumbnail().
Correctif : n’en garder qu’un sur l’image critique
La correction consiste à exclure explicitement l’image concernée du lazy-load de WP Rocket, tout en s’assurant que WordPress ne lui applique pas non plus son propre chargement différé natif. Deux méthodes complémentaires :
<img src="/wp-content/uploads/image-entete.jpg"
loading="eager"
class="rocket-lazyload-exclude"
alt="Description de l'image" />Côté PHP, pour automatiser cette exclusion sur toutes les images d’en-tête générées par le thème, le filtre natif de WordPress permet de désactiver le lazy-load au cas par cas :
add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name ) {
if ( $tag_name === 'img' && is_singular() && in_the_loop() ) {
return false;
}
return $default;
}, 10, 2 );Cette exclusion doit rester ciblée à l’image concernée : désactiver le lazy-load sur l’ensemble du site annulerait les bénéfices du chargement différé pour toutes les images situées plus bas dans la page, qui elles doivent rester différées pour ne pas ralentir le chargement initial.
Vérifier le résultat
- Inspecter le DOM pour confirmer l’absence des deux mécanismes concurrents sur l’image ciblée.
- Mesurer le Largest Contentful Paint avant et après correction, avec l’onglet Performance des outils de développement ou un outil de terrain.
- Vérifier que les images plus bas dans la page restent bien en chargement différé, pour ne pas régresser sur le reste du site.
Sur nos projets, la règle est simple : une seule image par page a le droit d’être exclue du lazy-load, celle qui apparaît sans le moindre défilement. Toute image supplémentaire exclue « par précaution » finit par annuler les gains de performance obtenus ailleurs.
En résumé
La coexistence du lazy-load natif de WordPress et de celui d’un plugin de cache n’est pas un problème en soi, tant que l’image visible au premier chargement échappe explicitement aux deux mécanismes. Le correctif tient en une exclusion ciblée, jamais en une désactivation globale d’une fonctionnalité par ailleurs bénéfique pour le reste de la page.
