# wp_lazy_loading_enabled exclut les images d’un carrousel de sponsors

> Un carrousel de logos de sponsors chargé en différé retarde son propre affichage. Correction ciblée via le filtre wp_lazy_loading_enabled.

- Auteur : WordPress Développement
- Publié le : 2023-08-28
- Mis à jour le : 2023-08-28
- Catégorie : Performance
- URL : https://www.wpmoderne.fr/performance/wp-lazy-loading-enabled-carrousel-sponsors/

## L’essentiel

- Le lazy-load natif s'applique par défaut à toutes les images du contenu
- Un carrousel visible dès le chargement ne devrait jamais être différé
- Le filtre permet une exclusion ciblée sans toucher au reste du site

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`.

> L'essentiel à retenir : Le lazy-load natif s'applique par défaut à toutes les images du contenu ; Un carrousel visible dès le chargement ne devrait jamais être différé ; Le filtre permet une exclusion ciblée sans toucher au reste du site

## 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.