Preloading en prefetching instellen in een website
Senior SEO-specialist
Preloading en prefetching zijn technieken waarmee je een website sneller en vloeiender maakt. Door bepaalde bronnen vooraf te laden (nog vóórdat de gebruiker ze nodig heeft), verklein je de laadtijd van cruciale onderdelen. In dit artikel leg ik uit wat het verschil is, wanneer je ze gebruikt en hoe je ze technisch instelt.
Wat is het verschil?
Preload
Je vertelt de browser: “Laad dit bestand alvast in zodra mogelijk, het is belangrijk.”
Wordt vaak gebruikt voor: fonts, belangrijke afbeeldingen, CSS of JS die direct nodig zijn.
Prefetch
Je zegt tegen de browser: “Deze bron komt misschien later van pas, laad het alvast op de achtergrond.”
Wordt vaak gebruikt voor: volgende pagina’s, externe scripts, API-calls.
1. Preloading instellen
Preload voeg je toe in de <head> van je HTML. Je specificeert wat je laadt en wat voor soort bestand het is.
Voorbeeld: fonts preloaden
html
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Voorbeeld: critical CSS
html
<link rel="preload" href="/css/critical.css" as="style">
Zorg dat je as correct instelt, anders negeert de browser de preload.
2. Prefetch instellen
Prefetch werkt vooral goed voor bronnen die waarschijnlijk nodig zijn, maar niet direct. Denk aan een link naar een volgende pagina of een script dat pas later wordt geladen.
Voorbeeld: een pagina-prefetch
html
<link rel="prefetch" href="/volgende-pagina.html" as="document">
Of bij frameworks als Next.js:
Veel frameworks ondersteunen automatische prefetching van interne routes (client-side routing). Maar handmatig kan ook nuttig zijn voor externe API’s of third-party scripts.
Aan de slag met SEO? Neem gerust contact op.
3. Ook nuttig: dns-prefetch en preconnect
Voor externe bronnen (zoals CDN’s of externe scripts) is het slim om DNS-resolutie en connecties vooraf op te zetten.
Voorbeeld: Google Fonts
html
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
Uitleg:
- dns-prefetch: lost het domein op voordat het wordt gebruikt
- preconnect: maakt alvast verbinding (TCP handshake, TLS), sneller dan dns-prefetch
Gebruik dit alleen voor domeinen die je echt gebruikt – anders verlies je performance.
4. Testen en valideren
Zorg dat je preloading en prefetching goed instelt. Verkeerde implementatie kan juist vertraging veroorzaken.
Tools:
- WebPageTest: check of preload werkt zoals bedoeld
- Lighthouse: geeft preload-adviezen
- Browser devtools (Netwerk-tab): zie je of een bestand al eerder is geladen?
Best practices
- Gebruik preload alleen voor kritieke bronnen – anders vertraag je andere resources
- Combineer preload met een fallback (bijv. <noscript>)
- Zet preconnect alleen op wat je écht nodig hebt
- Test laadtijd vóór en ná implementatie
Tot slot
Preloading en prefetching zijn relatief eenvoudige technieken om een site sneller en soepeler te maken. Zeker bij websites met veel media, fonts of JS-onderdelen kun je hiermee merkbare winst boeken – mits goed toegepast.
