Beter scoren in Google met asynchroon laden van scripts
Elke seconde telt op het internet. Als een website traag laadt, klikken mensen weg. Dat is zonde, vooral als je veel tijd hebt gestoken in je inhoud. Een van de dingen die je website traag kunnen maken, zijn JavaScript-bestanden. Gelukkig is er een slimme manier om dit op te lossen: asynchroon laden.
Wat zijn scripts en waarom vertragen ze je website?
Een script is een stukje code dat ervoor zorgt dat je website interactief wordt. Denk aan menu’s die uitklappen, sliders die automatisch bewegen of knoppen waarop je kunt klikken. Deze scripts worden meestal geschreven in JavaScript.
Maar er is een probleem: standaard worden scripts bovenaan de pagina geladen, nog voordat de rest van je site zichtbaar is. Dat betekent dat bezoekers vaak moeten wachten tot álle scripts zijn binnengehaald, voordat ze iets op je pagina kunnen zien of doen.
Het verschil tussen normaal, asynchroon en gedeferreerd laden
Als je een script toevoegt aan je HTML, kun je dat op verschillende manieren doen. Hieronder leggen we het uit:
1. Standaard laden (blocking)
<script src="script.js"></script>Dit is de standaard manier. De browser stopt met het laden van de HTML, haalt eerst het script op en voert het uit. Pas daarna gaat het verder met de rest van de pagina. Dit kan vertraging opleveren.
2. Asynchroon laden (async)
<script src="script.js" async></script>Bij asynchroon laden haalt de browser het script op zonder te stoppen met het laden van de HTML. Zodra het script binnen is, voert hij het meteen uit. Dit is handig voor scripts die geen afhankelijkheid hebben van andere onderdelen.
3. Uitgesteld laden (defer)
<script src="script.js" defer></script>
Met defer laadt de browser het script op de achtergrond, maar voert het pas uit als de hele HTML klaar is. Dit is ideaal voor scripts die pas nodig zijn als de hele pagina er staat.
Wat is het voordeel voor je SEO?
Google kijkt niet alleen naar de inhoud van je site, maar ook naar de snelheid. Als je pagina snel laadt, vinden gebruikers dat fijn. En dat beloont Google met een hogere positie in de zoekresultaten. Asynchroon laden helpt daarbij op deze manieren:
- sneller zichtbare inhoud: Bezoekers zien sneller wat er op je site staat, zelfs als scripts nog laden.
- lagere laadtijden: Dit verbetert je Core Web Vitals, zoals LCP (Largest Contentful Paint).
- betere mobiele prestaties: Op mobiel is snelheid nog belangrijker, omdat mobiele netwerken vaak trager zijn.
Kortom: door je scripts slimmer te laden, verbeter je de ervaring voor je bezoekers én geef je een seintje aan Google dat je site goed in elkaar zit.
Wanneer gebruik je async en wanneer defer?
Dit is een veelgestelde vraag. Hier is een handig overzicht:
- Gebruik
async: voor scripts die onafhankelijk zijn, zoals Google Analytics of een social media tracker. - Gebruik
defer: voor scripts die je site nodig heeft, maar pas ná het laden van de HTML, zoals menu’s of sliders.
Als je twijfelt: gebruik liever defer. Het is veiliger omdat je zeker weet dat je HTML eerst wordt geladen.
Voorbeeld: zo voeg je scripts toe aan je html-pagina
Stel dat je een script hebt dat een melding toont als iemand op een knop klikt. Je kunt dit script dan op verschillende manieren toevoegen:
Voorbeeldscript (bestand: script.js)
document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("klikMij");
button.addEventListener("click", function () {
alert("Bedankt voor het klikken!");
});
});
HTML-pagina met async (voor snelle, losse scripts)
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Async voorbeeld</title>
</head>
<body>
<button id="klikMij">Klik hier</button>
<script src="script.js" async></script>
</body>
</html>
HTML-pagina met defer (voor scripts die met de HTML samenwerken)
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Defer voorbeeld</title>
<script src="script.js" defer></script>
</head>
<body>
<button id="klikMij">Klik hier</button>
</body>
</html>
Let op: als je async gebruikt, moet je er zeker van zijn dat je script niet afhankelijk is van iets dat nog niet geladen is. Anders werkt het niet goed.
Veelgemaakte fouten bij asynchroon laden
- scripts die elkaar nodig hebben toch async laden: Dit kan fouten geven als het ene script al draait voordat het andere geladen is.
- belangrijke scripts async maken: Bijvoorbeeld scripts die je menu of contactformulier regelen. Als deze te laat laden, werkt je site niet goed.
- scripts aan het eind van de pagina plaatsen zonder async of defer: Dit kan helpen bij snelheid, maar is minder duidelijk en overzichtelijk dan async/defer.
Extra tip: combineer async/defer met caching en compressie
Asynchroon laden is krachtig, maar het werkt nog beter als je het combineert met:
- bestanden comprimeren: Gebruik Gzip of Brotli om je scripts kleiner te maken.
- browser caching instellen: Zo hoeven gebruikers niet elke keer scripts opnieuw te downloaden.
- gebruik een CDN: Hiermee worden je scripts sneller geleverd, ongeacht waar je bezoekers vandaan komen.
Hoe meet je het resultaat?
Na het optimaliseren van je scripts kun je meten of je site echt sneller is geworden. Gebruik bijvoorbeeld:
Let vooral op de tijd tot eerste weergave (First Contentful Paint) en interactiviteit (Time to Interactive).
Conclusie
Het asynchroon of uitgesteld laden van scripts is een simpele, maar krachtige manier om je website sneller te maken. En een snelle website scoort beter in Google, zorgt voor tevreden bezoekers en geeft jou een voorsprong op je concurrenten.
Door slim gebruik te maken van async en defer laadt je site soepeler en voorkom je dat trage scripts je SEO verpesten. Begin met kleine aanpassingen en meet je resultaat. Voor je het weet staat jouw website hoger in de zoekresultaten én blijven bezoekers langer hangen.
Een snelle website is niet alleen fijn voor de bezoeker, maar ook een slimme zet voor je online succes.
Heb ik je goed geholpen?
Jouw bijdrage stelt mij in staat om meer artikelen te schrijven.
Ik doneer nu € 1,-Wil je jouw website sneller maken én hoger in Google komen? Dan is een CDN een slimme keuze. In dit artikel leggen we stap voor stap uit wat een CDN is, waarom het belangrijk is voor SEO, en hoe je een CDN kunt gebruiken – zowel met een externe partner als via je eigen subdomein...
Sitemap uitleg en gratis PHP script
Een sitemap is eigenlijk een plattegrond van je website in één bestand. Net zoals een stadsplattegrond helpt bij het vinden van straten en bezienswaardigheden, helpt een sitemap zoekmachines bij het ontdekken en begrijpen van alle pagina’s op jouw site...
Wat zijn Core Web Vitals en waarom zijn ze belangrijk voor jouw SEO
Als je een website hebt, wil je natuurlijk dat mensen deze snel kunnen vinden via Google. Daar komt SEO (zoekmachineoptimalisatie) bij kijken...
Boost je SEO met de juiste serverkeuze en kies voor de perfecte hosting
De hosting die je kiest, beïnvloedt direct de snelheid, uptime en veiligheid van je website. Deze technische factoren zijn belangrijke ranking-signalen voor zoekmachines zoals Google...
Waarom geoptimaliseerde HTML je website laat vliegen
Een snelle, duidelijke en goed werkende website begint bij de basis: HTML. Het is de ruggengraat van je website...
De 10 grootste fouten die je website traag maken
In de wereld van websites draait het om snelheid. Een trage website jaagt bezoekers weg, verlaagt conversies en wordt afgestraft door zoekmachines zoals Google...
De beste tools om je websitesnelheid te meten
In de snelle online wereld van vandaag telt elke milliseconde. Bezoekers haken af als een website traag laadt en zoekmachines belonen snellere sites met betere posities...
De meeste websites zijn eenvoudig naar een hoger level te brengen door eerst de meest basale SEO op orde te krijgen. Mijn gratis SEO Checker controleert voor je of jouw website aan deze basis voldoet, of dat er nog verbetering te behalen valt.
Gebruik nu mijn gratis SEO Checker
Vul de URL van je website in en zie waar je jouw website mee kunt verbeteren. Let op: Een 100% score wil alleen zeggen dat je de basale SEO voor de betreffende pagina op orde hebt. Voor meer tips nodig ik je graag uit om al mijn artikelen te lezen.
