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

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 responsive, elles ne peuvent pas accéder à l'attribut de chargement natif et nous ne pouvons pas contrôler nativement la priorité des images d'arrière-plan.

Les images d'arrière-plan causent souvent des problèmes avec les Core Web Vitals. Différer les images d'arrière-plan peu importantes améliorera souvent vos Core Web Vitals.

Trop souvent, je vois cet anti-modèle incluant des images d'arrière-plan sur des sites web. Surtout sur les sites WordPress qui utilisent des constructeurs de pages comme Elementor.

1. Toutes les images, y compris l'image LCP (l'image héros), sont chargées en différé (lazy loaded)
2. Certains éléments d'image qui ne sont pas vraiment importants (comme un espacement, un arrière-plan de barre de recherche, etc.) sont liés comme images d'arrière-plan dans une feuille de style

Dans ce petit article, je vais vous montrer comment charger en différé (lazy-load) 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 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 lazy-load l'image LCP, éviter complètement les images d'arrière-plan). Malheureusement, il y a parfois trop de dettes techniques (legacy) et vous n'avez pas d'autre alternative à court terme que de réparer le site du mieux que vous pouvez. C'est là que vous pouvez appliquer un correctif comme celui que je vous présente aujourd'hui !

Méthode 1 : Tout différer 

La méthode "tout différer" est juste une façon barbare de faire les choses. Mais elle est facile à implémenter et 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 d'abord les ressources les plus importantes.

Voici les étapes impliquées : d'abord, nous allons surcharger la propriété de style background-image pour tous les éléments qui ont une image d'arrière-plan. Une fois que le contenu DOM a été chargé, nous allons supprimer cette surcharge. À ce moment-là, les images qui ne sont pas d'arrière-plan seront en 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.

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 aussi 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 DOM a été chargé, l'image LCP sera probablement déjà en 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 déclenche pas un téléchargement précoce, c'est probablement à cause de JavaScript. Dans ce cas, vous pourriez essayer de remplacer l'événement 'DOMContentLoaded' par l'événement 'load'.

Méthode 2 : Lazy-Load des images d'arrière-plan

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

Elle fonctionne comme suit : d'abord, 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'intersection observer et une fois qu'ils seront proches de la fenêtre visible (viewport), nous chargerons en différé (lazy-load) 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 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 simplement la supprimer pour les éléments avec un certain nom de classe.

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

Ensuite, lorsque le contenu DOM a été chargé, nous commencerons à observer les éléments qui ont une image d'arrière-plan. Lorsque cet élément défile dans la fenêtre visible (viewport), nous supprimerons la classe .lazybg pour déclencher un téléchargement d'arrière-plan. 

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

  // all elements wioth 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 fenêtre visible ne sont pas mises en file d'attente pour le téléchargement. Cela libère des ressources pour le navigateur pendant l'étape de chargement.

Conclusion

Les deux méthodes sont efficaces pour différer l'image d'arrière-plan au profit d'images plus importantes comme l'image du Largest Contentful Paint. La première méthode est très facile à implémenter et obtient des résultats rapides. La seconde méthode ajoute un véritable comportement de lazy load aux images d'arrière-plan et fournira un gain de pagespeed plus important. 

Soyez prudent lorsque vous appliquez l'une de ces méthodes. Si vous avez besoin de différer les images d'arrière-plan, votre page est ce que j'aime appeler 'lente par conception'. Les méthodes préférées pour corriger cela seraient de réécrire vos pages et d'éviter l'utilisation d'images d'arrière-plan.