Achtergrondafbeeldingen uitstellen voor snellere Core Web Vitals

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 (deferring) van onbelangrijke achtergrondafbeeldingen zal in veel gevallen je Largest Contentful Paint verbeteren.

Laatst beoordeeld door Arjen Karel in februari 2026

Volgens het Performance-hoofdstuk van de Web Almanac 2024 (de meest recente editie met data over LCP-elementtypen) heeft 9% van de mobiele pagina's een CSS-achtergrondafbeelding als LCP-element. Van die pagina's preload slechts 2% deze afbeelding. Dat betekent dat op ongeveer 1 op de 11 websites de belangrijkste afbeelding op de pagina onzichtbaar is voor de preload scanner van de browser en laat begint met laden.

Op de door CoreDash gemonitorde sites hebben pagina's waar het LCP-element een reguliere <img>-tag is een p75 LCP die ongeveer 620ms sneller is dan pagina's waar de LCP is een CSS-achtergrondafbeelding is. Het verschil komt bijna volledig voort uit resource load delay: de browser ontdekt een <img> onmiddellijk via de preload scanner, maar een achtergrondafbeelding moet wachten tot de CSS is gedownload en geparseerd.

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 image), worden ge-lazy load
2. Sommige afbeeldingselementen die niet echt belangrijk zijn (zoals een spacer, een achtergrond voor een zoekvak, etc.) zijn als achtergrondafbeeldingen gelinkt in een stylesheet

In dit korte artikel zal ik je laten zien hoe je deze achtergrondafbeeldingen kunt lazy loaden om zo voorrang te geven aan andere, belangrijkere afbeeldingen op de pagina.

Een kleine waarschuwing!

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

Methode 1: Alles uitstellen

De methode om alles uit te stellen (defer everything) is gewoon een barbaarse manier van doen. Maar het is makkelijk te implementeren en het werkt goed om de Core Web Vitals te verbeteren! Bij deze methode worden alle achtergrondafbeeldingen uitgesteld totdat het DOMContentLoaded-event is geactiveerd. Dit geeft de browser een beetje extra tijd om de belangrijkste resources als eerste in te plannen.

Dit zijn de betrokken stappen: eerst gaan we de background-image style property overstemmen (overrule) voor alle elementen die een achtergrondafbeelding hebben. Zodra de DOM-inhoud is geladen, gaan we deze override weer verwijderen. Tegen die tijd staan de niet-achtergrondafbeeldingen in de wachtrij om gedownload te worden. Dit is een mooi moment om vervolgens de minder belangrijke achtergrondafbeeldingen in de wachtrij voor download te plaatsen.

De code

Maak eerst een style aan en plaats deze in de HEAD van de pagina. Het is belangrijk dat deze style een id heeft, want we gaan dit id later gebruiken om deze style-tag weer te verwijderen. Natuurlijk kun je in plaats van de wildcard (*) ook alleen de CSS-classnamen toevoegen die daadwerkelijk een achtergrondafbeelding hebben.

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

Vervolgens, wanneer de DOM-inhoud 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 plaatsen.

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

Als de LCP niet activeert voor een vroege download, komt dit waarschijnlijk door JavaScript. In dat geval kun je proberen 'DOMContentLoaded' te veranderen in het 'load'-event.

Bij testen door DebugBear zorgde het preloaden van een background-image LCP-element voor een verkorting van de LCP van 3,4 seconden naar 1,7 seconden. De resource load delay daalde van 75% van de totale LCP-tijd naar slechts 2%.

Methode 2: Achtergrondafbeeldingen lazy loaden

De methode voor het lazy loaden van achtergrondafbeeldingen is iets vriendelijker, geavanceerder en vereist meer een persoonlijke aanpak.

Het werkt als volgt: ten eerste gaan we handmatig alle elementen met een achtergrondafbeelding identificeren. We moeten een classnaam toevoegen aan die elementen (.lazybg). Vervolgens gaan we deze elementen observeren met de IntersectionObserver en zodra ze dicht bij de zichtbare viewport komen, gaan we de achtergrondafbeelding lazy loaden.

De code

Maak eerst een style aan en plaats deze in de HEAD van de pagina. Deze style lijkt op de vorige style, maar in plaats van de achtergrondafbeelding property voor alle elementen op de pagina te verwijderen, gaan we deze alleen verwijderen voor elementen met een bepaalde classnaam.

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

Vervolgens, wanneer de DOM-inhoud is geladen, beginnen we met het observeren van de elementen die een achtergrondafbeelding hebben. Wanneer dat element in de viewport scrollt, verwijderen we de .lazybg class om een background download te activeren.

<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>

Het voordeel van deze methode is dat achtergrondafbeeldingen die zich niet in de zichtbare viewport bevinden, niet in de wachtrij voor download worden geplaatst. Dit maakt resources vrij voor de browser tijdens de laadfase. Voor meer van dit soort technieken, zie hoe je offscreen afbeeldingen (offscreen images) uitstelt.

Conclusie

Beide methoden zijn effectief bij het uitstellen van de achtergrondafbeelding ten gunste van belangrijkere afbeeldingen zoals de Largest Contentful Paint-afbeelding. De eerste methode is erg makkelijk te implementeren en levert snel resultaat. De tweede methode voegt echt lazy load gedrag toe aan achtergrondafbeeldingen en zal zorgen voor een grotere PageSpeed-boost.

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 geprefereerde methode om dit op te lossen is het herschrijven van je pagina's en het gebruik van achtergrondafbeeldingen vermijden.