Je website laadt in 8 seconden in plaats van 2. Je bezoekers verlaten je site voordat ze ook maar één seconde hebben gewacht. En jij hebt geen idee waarom.
▶Inhoudsopgave
Het probleem zit vaak niet in je eigen code. Het zit verborgen in kleine stukjes code die je erbij hebt geplakt: een chatbot, een Facebook-pixel, een analytics-script.
Ze lijkt onschuldig, maar ze kunnen je hele site vertragen. Laten we er eens goed naar kijken.
Wat zijn derde-partij-scripts precies?
Derde-partij-scripts zijn stukjes code die niet door jouw eigen server worden geladen, maar door een extern partij. Denk aan: Ze zijn handig, geen twijfel. Maar elk script moet worden opgehaald vanaf een externe server. En elke milliseconde die daarover gaat, voegt toe aan je laadtijd.
- Chatbots (zoals de veelgebruikte tools van Intercom of Tidio)
- Trackingpixels van Facebook, Google Ads of LinkedIn
- Analytics-tools zoals Google Tag Manager of Hotjar
- Social media widgets en embedded video's
- Externe lettertype's en CDN-resources
Waarom zijn ze zo schadelijk voor je laadtijd?
Het probleem is niet dat je een chatbot toevoegt. Het probleem is wat er gebeurt voordat die chatbot verschijnt. Elke script moet:
- Een DNS-lookup doen naar een extern domein
- Een TCP-verbinding opzetten
- De resource downloaden
- De code uitvoeren
En dat alles gebeurt in de critical rendering path. De browser wacht. Niet omdat hij wil, maar omdat hij moet. Google meet dit.
En Google bestraft je voor elke milliseconde boven de 2,5 seconden First Contentful Paint. Uit eigen onderzoek bij BRUTAEL zien we regelmatig dat één enkele chatbot 1,5 tot 3 seconden extra laadtijd toevoegt. Google stelt dat 53% van alle mobiele bezoekers een site verlaat als deze langer dan 3 seconden duurt. Die chatbot die je wilde inzetten om meer leads te genereren, kost je dus meer leads dan die oplevert.
De grootste boosdoeners
Chatwidgets
Een gemiddelde chatbot laadt tussen de 200KB en 500KB aan JavaScript. Dat klinkt niet veel, maar het is vaak render-blocking.
Trackingpixels en analytics
De browser kan de rest van je pagina niet tonen voordat dit script is verwerkt.
Google Fonts en externe bronnen
Tools zoals Drift, Crisp en Tidio zijn beruchte vertragers. Facebook Pixel alleen al voegt gemiddeld 15 extra netwerkaanvragen toe. Combineer dat met Google Analytics 4, een LinkedIn Insight Tag en een Hotjar-script, en je hebt al snel 30+ extra verzoeken per paginavoering.
Elke aanvraag is een potentieel knelpunt. Veel thema's laden lettertypen van Google Fonts. Handig, maar het voegt een extra DNS-lookup en download toe. Bij een slechte verbinding is dat al snel een halve seconde vertraging.
Wat meet je echt?
Laat je niet alleen verblinden door de totale laadtijd. Kijk naar de juiste metrics:
- Largest Contentful Paint (LCP): Hoe snel het grootste zichtbare element laadt. Doel: onder 2,5 seconden.
- First Input Delay (FID): Hoe snel de site reageert op de eerste interactie. Doel: onder 100 milliseconden.
- Cumulative Layout Shift (CLS): Hoeveel verschuiving er optreedt tijdens het laden. Doel: onder 0,1.
- Total Blocking Time (TBT): Hoe lang de hoofdthread geblokkeerd wordt door lange taken. Doel: onder 200 milliseconden.
Tools zoals PageSpeed Insights, WebPageTest en Lighthouse geven je deze cijfers. Maar de echte winst zit in het begrijpen waarom die cijfers hoog zijn, bijvoorbeeld door een diepgaande waterfall-analyse uit te voeren.
Wat je er concreet aan doet
1. Audit je scripts
Open je browserconsole. Ga naar het Network-tabblad. Filter op "script".
2. Stel lazy loading in voor niet-kritieke scripts
Je zult versteld staan hoeveel externe requests er lopen. Noteer elk script, de bron en de grootte.
Vraag bij jezelf: is dit essentieel? Scripts die niet direct nodig zijn bij het eerste bezoek, laad je pas wanneer ze nodig zijn. Chatbots hoeven niet direct te laden.
3. Combineer en minimaliseer
Gebruik defer of async attributen. Voor widgets die pas bij interactie verschijnen, gebruik lazy loading via Intersection Observer.
Google Tag Manager is krachtig, maar wordt vaak overbruik gebruikt. Elke tag die je toevoegt, is extra code. Combineer tracking waar mogelijk. BRUTAEL adviseert klanten regelmatig om een volledige tag-audit uit te voeren.
4. Host bronnen lokaal waar mogelijk
In de meeste gevallen kan 40-60% van de tracking-scripts worden gecombineerd of verwijderd zonder dat je inzicht verliest.
Lettertypen kun je lokaal hosten. Analytics-data kun je via server-side tracking verwerken in plaats van client-side. Dit vermindert het aantal externe verbindingen aanzienlijk.
5. Stel een budget
Kies een performance-budget. Bijvoorbeeld: maximaal 150KB aan JavaScript per pagina.
Elke nieuwe feature of script moet binnen dat budget passen. Dit dwingt bewuste keuzes.
De balans tussen functionaliteit en snelheid
Het is geen kiezen of chatbot of snelheid. Het is kiezen voor beide.
Een goed geïmplementeerde chatbot laadt asynchroon, pas nadat de pagina zichtbaar is. Een goed gehoste pixel vuurt via server-side tracking in plaats van client-side. De meeste problemen ontstaan niet door één script, maar door de optelsom.
Tien kleine vertragers van elk 200 milliseconden samen maken 2 seconden. En die 2 seconden kosten je conversie.
Begin vandaag met je audit. Open die console. Tel die scripts. En vraag bij elke aanvraag: draagt dit bij aan mijn doel, of draagt dit alleen bij aan mijn laadtijd?