De verschillen tussen async, defer en preload

Als SEO-specialist of webontwikkelaar wil je een snelle en efficiënte website leveren. Twee van de grootste boosdoeners van een trage site zijn traag ladende JavaScript-bestanden en inefficiënt gebruik van bronnen. Hier komen technieken zoals async, defer, en preload om de hoek kijken. In dit blog leg ik de verschillen uit en help ik je begrijpen wanneer je welke techniek moet toepassen.

Waarom zijn async, defer en preload belangrijk?

Async, defer en preload worden veel gebruikt om (externe) bronnen op het juiste moment in te laden om zo de snelheids-ervaring van de website zo optimaal te maken.

De snelheid van je website heeft een directe impact op:

• Gebruikerservaring: Niemand wil lang wachten op een pagina die laadt.
• SEO: Google geeft voorrang aan snelle websites in de zoekresultaten.
• Conversies: Een snellere website betekent meer kans dat bezoekers blijven en actie ondernemen.

Bij het laden van scripts en bronnen kun je async, defer, en preload gebruiken om de prestaties van je site te verbeteren. Maar hoe werken ze precies?

Async

De async-attribuut wordt gebruikt voor het laden van externe JavaScript-bestanden. Als je een script toevoegt met async, zal de browser het script downloaden terwijl de rest van de pagina wordt geladen. Zodra het script klaar is, wordt het direct uitgevoerd.

Voorbeeld:
<script src=”script.js” async></script>

Hoe werkt het?
Bovenstaande script wordt gedownload zonder dat de rest van de pagina hoeft te wachten. Zodra het script gedownload is, wordt het script uitgevoerd. Dit heeft tegelijkertijd als nadeel dat het script volgordeproblemen kan veroorzaken, als er bijvoorbeeld andere scripts zijn die dit script juist nodig hebben. 

Wanneer gebruik je async?
Gebruik async als het in te laden script geen afhankelijkheden heeft van andere scripts (bijvoorbeeld een externe trackingcode zoals Google Analytics).

Defer

Het defer-attribuut lijkt op async, maar met één belangrijk verschil: het script wordt pas uitgevoerd nadat de HTML volledig is geladen en geparsed.

Voorbeeld:
<script src=”script.js” defer></script>

Hoe werkt het?
Alle scripts met defer worden in de volgorde geladen waarin ze zijn opgenomen. Hierdoor voorkom je afhankelijkheidsproblemen. De keerzijde hieraan is, dat het script pas wordt uitgevoerd op het moment dat de pagina volledig geladen is wat soms een lichte vertraging kan geven.

Wanneer gebruik je defer?
Defer gebruik je wanneer het script afhankelijk is van andere scripts of de DOM-structuur van de pagina nodig heeft. Bijvoorbeeld bij complexe front-end frameworks zoals React of Angular.

Preload

Met preload kun je bronnen zoals CSS, JavaScript, afbeeldingen, of lettertypen vooraf laden voordat ze daadwerkelijk nodig zijn. Dit is vooral handig voor bronnen die je niet direct uitvoert, maar later in het proces nodig hebt.

Voorbeeld:
<link rel=”preload” href=”script.js” as=”script”>

Hoe werkt het?
Preload maakt bronnen sneller beschikbaar door ze vroeg in de laadtijd te downloaden, zelfs voordat de browser ze standaard zou laden. Nadeel is wel dat je een dubbele tag in je broncode moet zetten. Een tag, zoals hierboven, om het script te preloaden, en vervolgens nog een <script> tag om het script uit te voeren.

Wanner gebruik je preload?
Preload gebruik je wanneer je bepaalde bronnen snel wilt downloaden, zoals een belangrijk JavaScript-bestand of een cruciaal lettertype, maar ze niet meteen wilt uitvoeren. Dit doe je om bijvoorbeeld Large Layout Shifts, een onderdeel van de Core Web Vitals, te voorkomen.

Async vs defer vs preload – in 1 tabel

Hoe kies je de juiste techniek?

Gebruik async voor onafhankelijke scripts:
Bijvoorbeeld voor trackingcodes zoals Google Analytics of externe API-scripts die geen afhankelijkheden hebben.

Gebruik defer voor scripts die de pagina beïnvloeden:
Zoals front-end frameworks of scripts die werken met de DOM.

Gebruik preload voor bronnen die later nodig zijn:
Zoals belangrijke lettertypen, een kritieke afbeelding, of een JavaScript-bestand dat pas later in de pagina wordt uitgevoerd.

Stel, je hebt een webshop:

Async: Gebruik async voor een Facebook-pixel of Google Analytics.
Defer: Voeg de scripts toe die je websitefunctionaliteit ondersteunen, zoals een productgalerij.
Preload: Preload een productafbeelding of een custom-lettertype voor de homepage.

Conclusie over async, defer en preload

Het gebruik van async, defer, en preload helpt je website sneller te laden en biedt een betere gebruikerservaring. Door deze technieken strategisch in te zetten, verbeter je niet alleen de prestaties van je site, maar geef je ook je SEO een boost.

Heb je hulp nodig bij het kiezen van de juiste tagging?

Plan hier eenvoudig een kennismakingsgesprek met Robin om erachter te komen hoe ik jou hierbij kan helpen!