Pourquoi un carrousel de logos de sponsors, positionné juste sous l’en-tête d’une page d’accueil, mettait-il plus d’une seconde à afficher ses images alors que le reste de la page se chargeait normalement ? La réponse tenait dans un seul attribut ajouté automatiquement par WordPress depuis la version 5.5 : loading="lazy".
Le carrousel affichait douze logos de partenaires en défilement automatique, positionné en haut de page, donc visible dès l’affichage initial sans le moindre défilement de la part du visiteur. Le lazy-load natif de WordPress, activé par défaut sur toutes les images du contenu, s’appliquait pourtant aussi à ces images pourtant présentes dans la zone visible immédiate.
Comprendre le comportement par défaut
Depuis WordPress 5.5, l’attribut loading="lazy" est ajouté automatiquement aux balises <img> générées par le contenu, via la fonction wp_get_attachment_image et les filtres associés. Ce comportement, bénéfique dans l’immense majorité des cas pour retarder le chargement des images situées plus bas dans la page, devient contre-productif dès qu’il s’applique à des images situées dans la zone visible au chargement, ce qu’on appelle la zone au-dessus de la ligne de flottaison.
Le navigateur, respectant l’attribut lazy, retarde le chargement de l’image jusqu’à ce qu’elle s’approche de la zone visible à l’écran. Pour une image déjà visible dès le rendu initial, ce délai n’a aucune justification et retarde inutilement l’affichage complet de la page.
Le filtre wp_lazy_loading_enabled
WordPress expose le filtre wp_lazy_loading_enabled, qui permet de désactiver le lazy-load pour un contexte précis, identifié par le tag de la balise concernée et le contexte d’appel transmis en paramètre.
<?php
add_filter( 'wp_lazy_loading_enabled', function ( $default, $tag_name, $context ) {
if ( 'sponsors_carrousel' === $context ) {
return false;
}
return $default;
}, 10, 3 );
Pour que ce filtre s’applique précisément au carrousel visé, le contexte personnalisé sponsors_carrousel doit être transmis lors de l’appel à la fonction de génération d’image, via le paramètre context accepté par wp_get_attachment_image.
Adapter l’appel d’image côté template
Le template du carrousel appelait initialement wp_get_attachment_image( $id, 'medium' ) sans préciser de contexte, ce qui rendait impossible un ciblage fin via le filtre. L’ajout d’un contexte explicite a permis de réserver l’exclusion du lazy-load strictement à ce composant, sans effet de bord sur les autres images du site.
<?php
echo wp_get_attachment_image( $id, 'medium', false, array(
'loading' => false,
) );
Un second réglage, plus direct, consiste à transmettre l’attribut loading avec la valeur false directement dans le tableau d’attributs de wp_get_attachment_image, ce qui retire l’attribut de chargement différé sans passer par le filtre global. Les deux approches ont été testées, la seconde retenue pour sa simplicité une fois le contexte du carrousel isolé dans une fonction dédiée.
Variantes selon la position du composant
- Composant visible dès le chargement (bandeau, carrousel d’en-tête, logos partenaires en haut de page) : désactiver le lazy-load systématiquement
- Composant visible après un défilement modéré (deuxième ou troisième section de la page d’accueil) : conserver le lazy-load natif, le gain reste positif
- Composant affiché en bas de page ou en pied de page : lazy-load pleinement justifié, aucune modification nécessaire
Résultat après correctif
Une fois l’attribut de chargement différé retiré des images du carrousel, celles-ci s’affichent avec le reste du contenu visible initial, sans délai supplémentaire. Le Largest Contentful Paint de la page, qui pointait justement vers l’un de ces logos sur certains profils de mesure, a gagné plusieurs centaines de millisecondes sur les relevés de terrain suivants.
Le lazy-load natif reste une excellente valeur par défaut, mais une valeur par défaut n’est jamais universelle. Tout composant visible sans interaction du visiteur mérite d’être vérifié individuellement, plutôt que de faire confiance aveuglément au comportement global du cœur de WordPress.
En résumé
Le filtre wp_lazy_loading_enabled, combiné à un contexte d’appel explicite transmis à wp_get_attachment_image, permet d’exclure précisément un composant du comportement global de chargement différé, sans désactiver le mécanisme pour le reste du site. Ce correctif ciblé, plutôt qu’une désactivation globale du lazy-load, reste la bonne échelle d’intervention dès qu’un seul composant visible au chargement se trouve pénalisé par un comportement par ailleurs bénéfique partout ailleurs.
