# Le lazy-load qui ralentit votre LCP : exclure les premières images

> Placer loading=lazy sur l'image principale d'une page dégrade son LCP au lieu de l'améliorer. Comment repérer et corriger cette erreur fréquente.

- Auteur : Clément Hadrot
- Publié le : 2022-11-18
- Mis à jour le : 2022-11-18
- Catégorie : Performance
- URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/lazy-load-ralentit-lcp-exclure-premieres-images/

## L’essentiel

- Le lazy-load retarde volontairement le chargement, contre-productif pour l'image la plus importante
- WordPress applique loading=lazy par défaut à toutes les images depuis la version 5.5
- Un simple attribut suffit à exclure la bonne image

**Symptôme.** Sur un audit de routine, le score LCP d'une page d'accueil affichait 4,1 secondes, un résultat décevant pour un site par ailleurs bien optimisé : cache de page actif, images converties en WebP, CDN en place. En creusant le rapport Lighthouse, l'élément identifié comme Largest Contentful Paint était l'image principale du bandeau d'accueil, chargée en `loading="lazy"`. Le diagnostic était sous nos yeux depuis le début : l'image la plus importante de la page attendait, littéralement, avant de commencer à se charger.

## Diagnostic : comprendre ce que fait vraiment loading=lazy

Depuis WordPress 5.5, sorti en août 2020, l'attribut `loading="lazy"` est ajouté automatiquement à toutes les images du contenu, à l'exception de la première image affichée dans la boucle principale sur certains contextes. Ce comportement par défaut est excellent pour les images situées plus bas dans la page, hors du champ visible initial : elles ne consomment de bande passante que lorsque le visiteur défile jusqu'à elles.

Le problème survient quand cette règle s'applique aussi à une image affichée immédiatement au chargement, en particulier une image de bandeau gérée par le thème plutôt que par la boucle de contenu, où l'exclusion automatique de WordPress ne s'applique pas toujours.

## Diagnostic : repérer l'image fautive

L'onglet Performance des outils de développement Chrome identifie précisément quel élément a été retenu comme Largest Contentful Paint, avec son horodatage de chargement. Confirmez ensuite dans le code source si cette image porte l'attribut `loading="lazy"` :

```
curl -s https://exemple-client.test/ | grep -o '<img[^>]*bandeau[^>]*>'
```

> L'essentiel à retenir : Le lazy-load retarde volontairement le chargement, contre-productif pour l'image la plus importante ; WordPress applique loading=lazy par défaut à toutes les images depuis la version 5.5 ; Un simple attribut suffit à exclure la bonne image

## Correctif : exclure l'image dans un thème classique

Dans un thème classique (PHP), l'image de bandeau est généralement codée en dur dans le template, ce qui permet de retirer simplement l'attribut ou de forcer un chargement prioritaire :

```
<img src="<?php echo esc_url( $image_bandeau ); ?>"
     loading="eager"
     alt="<?php echo esc_attr( $alt_bandeau ); ?>" />
```

La valeur `eager` indique explicitement au navigateur de charger l'image immédiatement, sans attendre. Sur les images gérées par la fonction `the_content()`, où WordPress applique son propre filtre automatique, un filtre dédié permet d'exclure la première image de l'article :

```
function wpm_exclure_premiere_image_lazy( $attr, $attachment, $size ) {
    static $compteur = 0;
    $compteur++;

    if ( 1 === $compteur && is_singular() ) {
        $attr['loading'] = 'eager';
    }

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpm_exclure_premiere_image_lazy', 10, 3 );
```

## Correctif : le cas d'un thème par blocs

Sur un thème par blocs, l'image de couverture ou l'image à la une utilisée en haut de page passe par le rendu natif du bloc `core/image` ou `core/cover`. WordPress exclut normalement du lazy-load la première image détectée dans le flux, via le filtre interne `wp_omit_loading_attr_threshold`, mais ce seuil peut être ajusté si votre gabarit place plusieurs éléments avant l'image principale (un bandeau d'annonce, par exemple) :

```
add_filter( 'wp_omit_loading_attr_threshold', function () {
    return 3;
} );
```

Ce filtre augmente le nombre d'images exclues du lazy-load en début de page, utile si votre mise en page place l'image la plus importante après une ou deux autres images non critiques.

## Prévention

- Identifiez systématiquement l'élément LCP réel de chaque gabarit avant d'appliquer une règle générale de lazy-load.
- Ne laissez jamais le comportement par défaut décider seul pour une image gérée en dehors de la boucle de contenu standard.
- Revérifiez après chaque changement de thème ou de mise en page, l'ordre des éléments visibles peut déplacer l'élément LCP.

> Le lazy-load est une optimisation, pas un réflexe à appliquer partout : la question à se poser reste toujours « cette image sera-t-elle visible dès le chargement ? ».

## Pour aller plus loin

Sur ce projet, retirer le lazy-load de la seule image de bandeau a fait passer le LCP de 4,1 secondes à 1,9 seconde, sans toucher à aucune autre optimisation déjà en place. C'est un rappel utile : une bonne pratique générale, appliquée sans discernement au mauvais endroit, peut devenir la principale cause de lenteur d'une page par ailleurs bien construite.