Différer les images d'arrière-plan pour des Core Web Vitals plus rapides

Différer les images d'arrière-plan

Les images d'arrière-plan sont rarement une bonne chose pour les Core Web Vitals. Les images d'arrière-plan ne sont pas responsives, elles ne peuvent pas accéder à l'attribut natif loading et nous ne pouvons pas contrôler nativement la priorité des images d'arrière-plan.

Les images d'arrière-plan causeront souvent des problèmes avec les Core Web Vitals. Différer les images d'arrière-plan sans importance améliorera dans de nombreux cas votre Largest Contentful Paint.

Dernière révision par Arjen Karel en février 2026

Selon le chapitre Performance du Web Almanac 2024 (l'édition la plus récente avec des données sur le type d'élément LCP), 9 % des pages mobiles ont une image d'arrière-plan CSS comme élément LCP. Parmi celles-ci, seules 2 % la préchargent (preload). Cela signifie que sur environ 1 site Web sur 11, l'image la plus importante de la page est invisible pour le scanner de préchargement du navigateur et commence à charger tardivement.

Sur les sites surveillés par CoreDash, les pages où l'élément LCP est une balise <img> régulière ont un LCP p75 qui est environ 620 ms plus rapide que les pages où le LCP est une image d'arrière-plan CSS. La différence provient presque entièrement du retard de chargement des ressources (resource load delay) : le navigateur découvre immédiatement une <img> via le scanner de préchargement, mais une image d'arrière-plan doit attendre que le CSS soit téléchargé et analysé.

Je vois trop souvent cet anti-modèle incluant des images d'arrière-plan sur les sites Web. Surtout sur les sites Web WordPress qui utilisent des constructeurs de pages (page builders) comme Elementor.

1. Toutes les images, y compris l'image LCP (l'image hero) sont chargées paresseusement (lazy loaded)
2. Certains éléments d'image qui ne sont pas vraiment importants (comme un espaceur, un arrière-plan de boîte de recherche, etc.) sont liés comme images d'arrière-plan dans une feuille de style

Dans ce court article, je vais vous montrer comment charger paresseusement ces images d'arrière-plan afin de prioriser d'autres images, plus importantes, sur la page.

Un mot d'avertissement !

Laissez-moi commencer par un mot d'avertissement ! Lorsque l'élément LCP est retardé par des images d'arrière-plan, des erreurs ont été commises et vous devriez de préférence les corriger de la bonne manière (précharger l'image LCP, ne pas charger paresseusement l'image LCP, éviter complètement les images d'arrière-plan). Malheureusement, il y a parfois tout simplement trop d'héritage (legacy) et vous n'avez pas d'autre alternative à court terme que de rafistoler le site du mieux que vous pouvez. C'est à ce moment-là que vous pouvez appliquer un correctif comme celui que je vous présente ici aujourd'hui !

Méthode 1 : Tout différer

La méthode de tout différer est juste une façon barbare de faire les choses. Mais elle est facile à implémenter, et elle fonctionnera bien pour améliorer les Core Web Vitals ! Avec cette méthode, toutes les images d'arrière-plan sont différées jusqu'à ce que l'événement DOMContentLoaded ait été déclenché. Cela donnera au navigateur un peu de temps supplémentaire pour planifier les ressources les plus importantes en premier.

Voici les étapes impliquées : tout d'abord, nous allons annuler la propriété de style background-image pour tous les éléments qui ont une image d'arrière-plan. Une fois le contenu du DOM chargé, nous allons supprimer à nouveau cette substitution. À ce moment-là, les images qui ne sont pas d'arrière-plan seront dans la file d'attente pour le téléchargement. Ce serait un excellent moment pour mettre ensuite en file d'attente les images d'arrière-plan moins importantes pour le téléchargement.

Le code

Créez d'abord un style et placez-le dans le HEAD de la page. Il est important que ce style ait un id car nous allons utiliser cet id pour supprimer cette balise de style plus tard. Bien sûr, au lieu du joker (*), vous pourriez également ajouter uniquement les noms de classe CSS qui ont réellement une image d'arrière-plan.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

Ensuite, lorsque le contenu du DOM aura été chargé, l'image LCP sera probablement déjà dans la file d'attente pour le téléchargement. À ce stade, il est sûr de mettre en file d'attente les images d'arrière-plan.

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

Si le LCP ne se déclenche pas pour un téléchargement précoce, c'est probablement à cause de JavaScript. Dans ce cas, vous pourriez essayer de remplacer 'DOMContentLoaded' par l'événement 'load'.

Lors de tests effectués par DebugBear, le préchargement d'un élément LCP avec image d'arrière-plan a réduit le LCP de 3,4 secondes à 1,7 seconde. Le délai de chargement des ressources est passé de 75 % du temps total du LCP à seulement 2 %.

Méthode 2 : Charger paresseusement les images d'arrière-plan

La méthode de chargement paresseux des images d'arrière-plan est légèrement plus douce, avancée et nécessite plus d'intervention personnelle.

Elle fonctionne comme suit : premièrement, nous allons identifier manuellement tous les éléments avec une image d'arrière-plan. Nous devons ajouter un nom de classe à ces éléments (.lazybg). Ensuite, nous observerons ces éléments avec l'IntersectionObserver et une fois qu'ils sont proches de la viewport visible, nous allons charger paresseusement l'image d'arrière-plan.

Le code

Créez d'abord un style et placez-le dans le HEAD de la page. Ce style ressemble au style précédent mais au lieu de supprimer la propriété d'image d'arrière-plan pour tous les éléments de la page, nous allons juste la supprimer pour les éléments avec un certain nom de classe.

<style>
    .lazybg {background-image: none !important}
</style>

Ensuite, lorsque le contenu du DOM aura été chargé, nous commencerons à observer les éléments qui ont une image d'arrière-plan. Lorsque cet élément défilera dans la viewport, nous supprimerons la classe .lazybg pour déclencher un téléchargement en arrière-plan.

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // the observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

L'avantage de cette méthode est que les images d'arrière-plan qui ne sont pas dans la viewport visible ne sont pas mises en file d'attente pour le téléchargement. Cela libère des ressources pour le navigateur pendant la phase de chargement. Pour d'autres techniques de ce type, voir comment différer les images hors écran (offscreen images).

Conclusion

Les deux méthodes sont efficaces pour différer l'image d'arrière-plan en faveur d'images plus importantes comme l'image Largest Contentful Paint. La première méthode est très facile à implémenter et obtient des résultats rapides. La deuxième méthode ajoute un véritable comportement de chargement paresseux aux images d'arrière-plan et fournira une plus grande amélioration du PageSpeed.

Soyez prudent lorsque vous appliquez l'une de ces méthodes. Si vous devez différer des images d'arrière-plan, votre page est ce que j'aime appeler 'lente par conception (slow by design)'. La méthode préférée pour corriger cela serait de réécrire vos pages et d'éviter l'utilisation d'images d'arrière-plan.