# Lazy load des images d’arrière-plan Elementor : activer et vérifier le gain

> Activer le chargement différé des images de fond dans Elementor, exclure correctement le LCP et mesurer le gain sur des pages réelles.

- Auteur : Clément Hadrot
- Publié le : 2024-08-19
- Mis à jour le : 2024-08-19
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/lazy-load-images-arriere-plan-elementor/

## L’essentiel

- Les images de fond ne bénéficient pas du lazy-load natif du navigateur
- Exclure l'image visible en premier écran évite de pénaliser le LCP
- Le gain se mesure page par page, pas en théorie

Le lazy-loading natif introduit dans WordPress 5.5 s'applique à l'attribut `loading="lazy"` des balises `<img>`, mais il ne concerne pas les images posées en arrière-plan CSS via `background-image`, très utilisées dans Elementor pour les sections et containers avec effet de superposition. Sans mécanisme dédié, ces images de fond se chargent toutes en même temps, y compris celles situées loin en bas de page, jamais vues par une bonne partie des visiteurs.

Elementor propose son propre réglage de lazy-load pour ces images de fond, mais son activation demande de comprendre un piège précis : exclure la bonne image du mécanisme, sous peine de dégrader la métrique la plus visible de Core Web Vitals, le LCP.

## Où se trouve le réglage

Le lazy-loading des images de fond se configure au niveau du site dans **Elementor > Réglages > Avancé**, avec une case à cocher dédiée. Une fois activé, Elementor charge les images de fond via un script qui détecte leur entrée dans la zone visible de l'écran, plutôt que de les charger toutes au moment du parsing du HTML.

```
<div class="elementor-element" data-settings='{"background_background":"classic","lazyload":"yes"}'>
  <!-- l'image de fond n'est injectée en CSS
       qu'au moment où la section entre dans le viewport -->
</div>
```

## Le piège du LCP mal exclu

Le Largest Contentful Paint mesure le temps d'affichage du plus grand élément visible dans le premier écran. Si cet élément est justement une image de fond en lazy-load, le navigateur doit attendre le déclenchement du script de détection avant de charger l'image, ce qui retarde artificiellement le LCP au lieu de l'améliorer. C'est exactement ce qui s'est produit sur une page d'accueil testée : la section héro avec une image de fond en plein écran était incluse dans le lazy-load global, et le LCP mesuré par PageSpeed Insights a empiré après activation du réglage.

> L'essentiel à retenir : Les images de fond ne bénéficient pas du lazy-load natif du navigateur ; Exclure l'image visible en premier écran évite de pénaliser le LCP ; Le gain se mesure page par page, pas en théorie

La correction consiste à exclure explicitement la section concernée du lazy-load, widget par widget ou section par section, via le réglage local disponible dans l'onglet Avancé de chaque élément, en le repassant à « Par défaut » ou en désactivant l'option pour cet élément précis seulement.

## Méthode de vérification sur une page réelle

Le gain ne se mesure jamais en théorie : il dépend directement du nombre et du poids des images de fond présentes sur la page, et de leur position par rapport au premier écran. La méthode suivie sur ce projet a été systématique :

1. Mesurer le LCP et le poids total de la page avant toute activation, via PageSpeed Insights et l'onglet Réseau du navigateur.
2. Activer le lazy-load global, puis exclure explicitement la ou les images du premier écran.
3. Mesurer à nouveau sur la même page, dans les mêmes conditions de réseau simulé (3G rapide ou 4G selon l'audience cible).
4. Répéter la mesure sur au moins trois pages représentatives du site, car une page riche en images de fond en bas de page profitera bien plus du réglage qu'une page courte qui n'en a qu'une ou deux.

## Résultats mesurés

| Page | LCP avant | LCP après (avec exclusion correcte) | Poids initial chargé |
| --- | --- | --- | --- |
| Accueil | 3,4 s | 2,3 s | -680 Ko |
| Page « Nos services » (longue, riche en sections) | 2,9 s | 2,1 s | -1,2 Mo |
| Page contact (courte, peu d'images de fond) | 1,8 s | 1,7 s | -90 Ko |

## Les cas où le gain est marginal, voire nul

Sur des pages courtes qui tiennent presque entièrement dans le premier écran, le lazy-load des images de fond n'apporte quasiment rien puisque la quasi-totalité des images est de toute façon visible immédiatement et ne doit donc pas être différée. Activer le réglage globalement sans vérifier ce cas peut même ajouter un script de détection de scroll qui consomme un peu de ressources pour un bénéfice nul sur ces pages précises.

> Conseil maison : ne jamais activer ce réglage globalement puis passer à autre chose. Vérifier page par page les pages à fort trafic, et exclure systématiquement toute image présente dans le premier écran, pas seulement celle du widget héro principal.

## En résumé

Le lazy-load des images de fond d'Elementor est un réglage à fort potentiel mais qui punit sévèrement une mauvaise configuration, en particulier sur le LCP. Le gain réel se situe entre une réduction négligeable sur une page courte et plus d'une seconde sur une page riche en sections, à condition de toujours exclure les images visibles dès le premier écran. Sans cette vérification page par page, le réglage peut faire plus de mal que de bien à l'indicateur qu'il est censé améliorer.