Mon hero est une image d'arrière-plan : pourquoi elle ralentit le LCP et comment corriger (Divi, Elementor)

Votre hero est une section pleine largeur avec une image d'arrière-plan, réglée dans Divi, Elementor ou un autre builder. PageSpeed désigne cette section comme l'élément Largest Contentful Paint, et liste « Découverte des requêtes LCP » parmi ses avertissements. Vous avez déjà compressé l'image. C'est toujours lent.

Le poids est rarement le problème principal. Le problème, c'est le moment où le navigateur apprend que l'image existe.

Pourquoi une image d'arrière-plan démarre tard

Une balise <img> classique est dans le HTML : le navigateur la repère dès les premiers octets et peut la demander immédiatement. Une image d'arrière-plan vit dans le CSS. Le navigateur ne la trouve qu'après quatre étapes :

• télécharger le HTML ;
• télécharger la feuille de style qui contient la règle, souvent un fichier par page généré par le builder ;
• appliquer les styles et faire correspondre la règle à la section ;
• alors seulement, demander l'image.

Deux habitudes des builders aggravent les choses. L'arrière-plan n'a souvent aucune variante de taille : un seul fichier de 1920 pixels pour tous les écrans, téléphones compris. Et beaucoup de thèmes et d'extensions chargent les arrière-plans en différé avec un script qui ajoute l'image une fois la section visible. Si ce script est lui-même reporté jusqu'à la première interaction, le hero attend que le visiteur bouge.

Le vérifier sur votre page

• Dans les DevTools, inspectez la section hero et cherchez background-image dans les styles calculés. Notez l'URL du fichier.
• Dans le panneau Network, en émulation mobile, rechargez et retrouvez ce fichier : regardez à quel point il démarre tard par rapport au HTML et aux feuilles de style.
• Cherchez dans les classes et les attributs de la section un marqueur de chargement différé, souvent une classe comme lazyload ou un attribut comme data-bg.

Correctif A (le meilleur) : transformer le hero en vraie image

Placez une balise <img> dans la section, positionnée pour la couvrir. Le rendu est identique, et le navigateur la voit désormais dans le HTML, peut choisir une largeur dans son srcset, et peut lui donner une priorité haute :

<section class="hero">
  <img class="hero__bg" src="/uploads/hero-1920.webp"
       srcset="/uploads/hero-768.webp 768w, /uploads/hero-1920.webp 1920w"
       sizes="100vw" width="1920" height="900" alt="" fetchpriority="high">
  <div class="hero__content"><!-- titre, bouton --></div>
</section>

<style>
  .hero { position: relative; }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
</style>

Dans la plupart des builders, c'est un module image placé dans la section avec le même CSS, ou un bloc HTML personnalisé. L'attribut alt vide la garde décorative, comme l'était l'arrière-plan.

Correctif B : garder l'arrière-plan, mais le faire partir tôt

Si le design doit rester un arrière-plan :

• Préchargez-le, avec un preload par appareil si le builder utilise un arrière-plan différent sur mobile. La méthode est dans notre guide sur l'image LCP par appareil.
• Sortez le hero de tout chargement différé des arrière-plans : dans les réglages du builder, dans l'extension qui l'ajoute, ou en excluant cette section.
• Donnez aux téléphones un fichier plus léger : Divi comme Elementor permettent de définir une image d'arrière-plan différente par appareil. Importez-y une version à la taille mobile.
• Mettez la règle du hero dans le critical CSS, pour qu'elle s'applique dès le premier affichage au lieu d'attendre la feuille de style complète.

Vérifier le résultat

• Panneau Network, émulation mobile : l'image du hero démarre juste après le HTML, pas après les feuilles de style.
• Sa taille correspond à l'appareil.
• Elle apparaît sans bouger la souris ni faire défiler.

Avec Mantys Core

En résumé

• Une image d'arrière-plan est découverte tard : le HTML, puis le CSS, puis la correspondance des styles, puis l'image.
• Elle n'a pas de srcset, et les builders la chargent souvent en différé avec un script.
• Meilleur correctif : une vraie image qui couvre la section, avec srcset et priorité haute.
• Sinon : un preload par appareil, pas de chargement différé sur le hero, un fichier à la taille mobile, et sa règle dans le critical CSS.