Achtergrondafbeeldingen uitstellen

Achtergrondafbeeldingen uitstellen.

Achtergrondafbeeldingen zijn zelden een goede zaak voor de Core Web Vitals. Achtergrondafbeeldingen zijn niet responsief, achtergrondafbeeldingen hebben geen toegang tot het native loading attribuut en we kunnen de prioriteit van achtergrondafbeeldingen niet native regelen.

Achtergrondafbeeldingen veroorzaken vaak problemen met de Core Web Vitals. Het uitstellen van onbelangrijke achtergrondafbeeldingen zal in veel gevallen je Core Web Vitals verbeteren.

Maar al te vaak zie ik dit anti-patroon inclusief achtergrondafbeeldingen op websites. Vooral op WordPress websites die page-builders zoals elementor gebruiken.

1. Alle afbeeldingen, inclusief de LCP afbeelding (de hero afbeelding) worden lazy loaded
2. Sommige afbeeldingselementen die niet echt belangrijk zijn (zoals een spacer, een zoekvak achtergrond etc) worden gelinkt als achtergrondafbeeldingen in een stylesheet

In dit kleine artikel zal ik je laten zien hoe je deze achtergrondafbeeldingen kunt lazy-loaden om andere, belangrijkere, afbeeldingen op de pagina te prioriteren.

Een woord van waarschuwing!

Laat ik beginnen met een woord van waarschuwing! Wanneer het LCP element wordt vertraagd door achtergrondafbeeldingen zijn er fouten gemaakt en zou je ze bij voorkeur op de juiste manier moeten repareren (preload de LCP afbeelding, lazy load de LCP afbeelding niet, vermijd achtergrondafbeeldingen helemaal). Helaas is er soms gewoon te veel legacy en heb je geen ander korte-termijn alternatief dan de site zo goed mogelijk op te lappen. Dat is wanneer je een fix kunt toepassen zoals ik je hier vandaag presenteer!

Methode 1: Alles uitstellen 

De alles uitstellen methode is gewoon een barbaarse manier van doen. Maar het is gemakkelijk te implementeren, en het zal goed werken om de Core Web Vitals te verbeteren!  Met deze methode worden alle achtergrondafbeeldingen uitgesteld totdat het DOMContentLoaded event is afgevuurd. Dit geeft de browser een beetje extra tijd om de belangrijkste resources eerst in te plannen.

Hier zijn de stappen die betrokken zijn: eerst gaan we de background-image stijleigenschap overrulen voor alle elementen die een achtergrondafbeelding hebben. Zodra de DOM content is geladen gaan we deze override weer verwijderen. Tegen die tijd zullen de niet-achtergrondafbeeldingen in de wachtrij staan voor download. Dit zou een geweldig moment zijn om dan de minder belangrijke achtergrondafbeeldingen in de wachtrij te zetten voor download.

De code

Maak eerst een stijl en plaats deze in de HEAD van de pagina. Het is belangrijk dat deze stijl een id heeft omdat we dit id gaan gebruiken om deze stijl tag later te verwijderen. Natuurlijk zou je in plaats van de wildcard (*) ook alleen de CSS classnames kunnen toevoegen die daadwerkelijk een achtergrondafbeelding hebben.

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

Vervolgens, wanneer de DOM content is geladen, zal de LCP afbeelding waarschijnlijk al in de wachtrij staan voor download. Op dit punt is het veilig om de achtergrondafbeeldingen in de wachtrij te zetten. 

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

Als de LCP niet triggert voor een vroege download komt dit waarschijnlijk door JavaScript. In dat geval zou je kunnen proberen het 'DOMContentLoaded' te wisselen voor het 'load' event.

Methode 2: Lazy-Load achtergrondafbeeldingen

De lazy-load achtergrondafbeeldingen methode is iets subtieler, geavanceerder en vereist meer een persoonlijke touch. 

Het werkt als volgt: eerst gaan we handmatig alle elementen met een achtergrondafbeelding identificeren. We moeten een classname toevoegen aan die elementen (.lazybg). Vervolgens zullen we deze elementen observeren met de intersection observer en zodra ze dicht bij de zichtbare viewport zijn gaan we de achtergrondafbeelding lazy-loaden.

De code

Maak eerst een stijl en plaats deze in de HEAD van de pagina. Deze stijl lijkt op de vorige stijl maar in plaats van de background image eigenschap te verwijderen voor alle elementen op de pagina gaan we het alleen verwijderen voor elementen met een bepaalde classname.

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

Vervolgens, wanneer de DOM content is geladen, zullen we beginnen met het observeren van de elementen die een achtergrondafbeelding hebben. Wanneer dat element in de viewport scrolt zullen we de .lazybg klasse verwijderen om een achtergrond download te triggeren. 

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

  // alle elementen met achtergrondafbeeldingen die lazy loaded moeten worden 
  const lazyImages = document.querySelectorAll('.lazybg');
 
  // opties voor de observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

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

    
  // observeer elke afbeelding
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // toon achtergrondafbeelding
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

Het voordeel van deze methode is dat achtergrondafbeeldingen die niet in de zichtbare viewport zijn niet in de wachtrij worden geplaatst voor download. Dit maakt bronnen vrij voor de browser tijdens de laadfase.

Conclusie

Beide methoden zijn effectief in het uitstellen van de achtergrondafbeelding ten gunste van belangrijkere afbeeldingen zoals de Largest Contentful Paint afbeelding. De eerste methode is erg gemakkelijk te implementeren en geeft snelle resultaten. De tweede methode voegt echt lazy load gedrag toe aan achtergrondafbeeldingen en zal een grotere pagespeed boost geven. 

Wees voorzichtig bij het toepassen van een van deze methoden. Als je achtergrondafbeeldingen moet uitstellen is je pagina wat ik graag 'slow by design' noem. De voorkeursmethoden om dit op te lossen zouden zijn om je pagina's te herschrijven en het gebruik van achtergrondafbeeldingen te vermijden.