Pagespeed verbeteren: hoe je cookiebanner je website afremt

Maakt een cookiebanner je website trager?

Ja, een cookiebanner kan de laadtijd van je website merkbaar verlengen, vooral op mobiel en bij het eerste bezoek. Veel banners van bekende aanbieders laden eerst een script, daarna een configuratie, stylesheets, lettertypen, vertalingen en lijsten van alle gekoppelde diensten, vaak van meerdere externe servers. Pas als dat allemaal binnen is, wordt de banner zichtbaar. Omdat hij op elke pagina en bij elke nieuwe bezoeker verschijnt, raakt deze vertraging precies de eerste indruk. Wil je de pagespeed verbeteren, controleer dan niet alleen afbeeldingen, thema en plugins, maar ook de cookiebanner.

Dit onderwerp wordt vaak over het hoofd gezien, omdat de banner op je eigen computer zelden opvalt. Je hebt hem allang weggeklikt, je keuze is opgeslagen en op de snelle kantoorwifi laadt alles toch vlot. Een nieuwe bezoeker die op zijn telefoon via het mobiele netwerk surft, krijgt daarentegen de volledige laadketen: een lege pagina, dan de banner, dan misschien een sprong in de lay-out. Juist die bezoeker is voor advertentiecampagnes het belangrijkst.

Waarom zijn veel cookiebanners zo traag?

Een cookiebanner is vaak traag omdat hij meer laadt dan nodig is. Eigenlijk hoeft hij weinig te kunnen: een tekst tonen, twee of drie knoppen aanbieden, de keuze opslaan en doorgeven aan Google en andere diensten. Veel oplossingen zijn echter gebouwd als universeel platform dat elke taal, elk rechtsgebied en honderden diensten moet afdekken. Die veelzijdigheid kost laadtijd, ook als je website maar een fractie ervan nodig heeft.

• Veel bestanden: script, configuratie, stylesheet, lettertype en logo zijn elk een aparte aanvraag.
• Externe servers: elk nieuw domein vraagt om een eigen verbinding voordat het eerste bestand binnenkomt.
• Taalbestanden en lijsten met aanbieders: lange beschrijvingen van alle diensten worden geladen, terwijl bijna niemand de details opent.
• Blokkerend script in de head: staat het script synchroon in de head, dan wacht de browser met het opbouwen van de pagina.
• Geen gereserveerde ruimte: schuift de banner achteraf in de pagina, dan springt de inhoud naar beneden.

Elk van deze punten is op zich klein. Samen ontstaat een keten waarin het ene bestand op het volgende wacht. Juist op een mobiel netwerk telt niet alleen de grootte in kilobytes, maar vooral het aantal aanvragen en verbindingen, omdat elke aanvraag wachttijd met zich meebrengt.

→ Cookiebanner met Consent Mode v2: compliant, zonder maandelijkse licentie

Wat de banner doet met LCP, INP en CLS

Een trage cookiebanner verslechtert direct de Core Web Vitals, drie meetwaarden waarmee Google laadtijd, reactiesnelheid en stabiliteit van een pagina beoordeelt. Largest Contentful Paint (LCP) meet wanneer het grootste zichtbare element in het eerste scherm verschijnt. Een waarde tot 2,5 seconden geldt als goed. Op mobiele apparaten is de cookiebanner vaak zelf dat grootste element, omdat zijn tekstblok een groot deel van het scherm vult. Verschijnt hij laat, dan is de LCP-waarde slecht, hoe snel de rest van de pagina ook is.

Interaction to Next Paint (INP) heeft op 12 maart 2024 de eerdere meetwaarde First Input Delay (FID) vervangen en meet hoe snel de pagina op klikken reageert. Een waarde tot 200 milliseconden geldt als goed. Bij de banner zijn er twee kritieke momenten. Tijdens het laden bezet zijn script de hoofdthread van de browser. En na een klik op “Alles accepteren” starten vaak veel tags tegelijk. Reageert de pagina dan merkbaar vertraagd, dan lijdt de INP eronder.

Cumulative Layout Shift (CLS) meet hoe sterk de inhoud tijdens het laden verspringt. Een waarde tot 0,1 geldt als goed. Een banner die als vast gepositioneerde laag over de pagina ligt, verschuift niets. Een banner die bovenaan in de pagina wordt ingevoegd, duwt daarentegen alles naar beneden. Wie net op een link wilde tikken, raakt dan iets anders. Zulke momenten zijn irritant en zorgen ervoor dat bezoekers de pagina sneller weer verlaten.

Hoe meet je de prestaties van je cookiebanner?

De prestaties van een cookiebanner meet je het best zoals een nieuwe bezoeker ze ervaart. Voor een eerste inschatting heb je geen speciale tools nodig. De browser Chrome en PageSpeed Insights zijn genoeg. Belangrijk zijn de omstandigheden: zonder opgeslagen toestemming, zonder cache en met een verbinding die lijkt op die van een telefoon onderweg.

• Open PageSpeed Insights in de weergave voor mobiel en noteer LCP, INP en CLS. De tips over code van derden en blokkerende bronnen noemen de banner vaak al bij naam.
• Open in een privévenster de ontwikkelaarstools van Chrome, schakel in het tabblad Netwerk de cache uit en zet de throttling op Slow 4G.
• Laad de pagina opnieuw en filter op het domein van de banneraanbieder. Tel de bestanden en tel de overgedragen kilobytes bij elkaar op.
• Start in het tabblad Prestaties een opname en lees af vanaf wanneer de banner zichtbaar is.
• Herhaal elke meting meerdere keren en gebruik de middelste waarde, omdat losse metingen sterk kunnen schommelen.

Let erop dat browserextensies zoals adblockers in het privévenster uitgeschakeld zijn, anders ontbreken er aanvragen en lijkt het resultaat beter dan het in werkelijkheid is. De veldgegevens in PageSpeed Insights komen van echte Chrome-gebruikers uit de afgelopen 28 dagen en reageren daarom met vertraging op wijzigingen. De labgegevens daaronder laten direct zien of een aanpassing iets oplevert.

→ Google Consent Mode v2 correct instellen: geen waarschuwing in Tag Assistant

Wat een meting op een lege testpagina laat zien

Een lege testpagina laat zien hoe snel een cookiebanner op zichzelf is. Bedoeld is een pagina waarop behalve de banner niets laadt, zodat niets anders het resultaat beïnvloedt. Trackum heeft banners onder vaste omstandigheden gemeten: lege testpagina, emulatie van een telefoon, throttling op Slow 4G, mediaan van 7 metingen. De eigen lichte banner was daarbij na 0,4 seconden zichtbaar. Banners van bekende aanbieders verschenen na 1,3 tot 4,3 seconden en laadden daarvoor 7 tot 15 bestanden van samen 150 tot 210 KB.

Op een echte website zien de waarden er anders uit, omdat afbeeldingen, lettertypen en scripts om dezelfde bandbreedte concurreren. De richting blijft wel dezelfde: hoe minder bestanden en externe servers een banner nodig heeft, hoe eerder hij op het scherm staat en hoe minder hij de rest van de pagina afremt.

Voorbeeld uit de praktijk: vakbedrijf met contactformulier

Een meubelmakerij adverteert met Google Ads voor inbouwkasten. De website draait op WordPress, de afbeeldingen zijn gecomprimeerd en het thema is licht. Toch toont PageSpeed Insights op mobiel een slechte LCP-waarde. In het tabblad Netwerk wordt duidelijk waarom: de banner laadt ruim een dozijn bestanden van twee externe servers, waaronder vertalingen voor talen die op de website helemaal niet voorkomen. Pas daarna verschijnt de bannertekst, en die is op mobiel het grootste element.

De banner gewoon later laden zou geen oplossing zijn. De standaardwaarde voor Google Consent Mode v2, de interface waarmee Google-tags de keuze van de bezoeker te weten komen, moet zijn ingesteld voordat de eerste tag afgaat. Anders worden zonder toestemming gegevens verstuurd. De oplossing is een banner die vanaf het begin weinig weegt. Na de overstap naar een lichte variant staat de banner eerder op het scherm, en het contactformulier wordt met en zonder toestemming nog steeds correct gemeten.

Zo herken je een lichte cookiebanner

• Eén bestand van een paar kilobyte in plaats van een reeks bestanden die worden nageladen.
• Geen naladen van externe servers voor teksten, lettertypen of lijsten.
• Alleen de talen die je website echt nodig heeft.
• Een vast gepositioneerde laag die geen inhoud verplaatst.
• Consent Mode v2 direct ingebouwd, zonder extra script.
• “Alles weigeren” gelijkwaardig naast “Alles accepteren” op het eerste niveau.

Een lichte cookiebanner is geen uitgeklede banner. Hij moet de toestemming nog steeds netjes vragen, opslaan, aantonen en doorgeven aan Google en andere diensten. Hij doet dat alleen zonder omwegen. Vergelijk je aanbieders, laad dan een testpagina met alleen hun banner en meet zelf, in plaats van te vertrouwen op beloften uit de reclame.

Laadtijd verbeteren zonder de toestemming in gevaar te brengen

De banner van Trackum is één bestand van 6,6 KB, laadt niets na, spreekt Duits en Engels, heeft Consent Mode v2 ingebouwd en toont “Alles weigeren” gelijkwaardig op het eerste niveau. Toestemmingsbewijzen worden in de EU opgeslagen zonder IP-adres. De banner kost eenmalig € 50 plus € 4,90 per maand en zit al in het abonnement van € 19 per maand. Alle prijzen zijn exclusief btw.

Wil je eerst weten hoe je website ervoor staat? De gratis check van Trackum test hem in een echte browser, laat de banner, de toestemming en de tags zien die afgaan, en noemt voor elke bevinding een vaste prijs. Dat duurt ongeveer twee minuten en je hoeft je niet te registreren.