Preloading en prefetching instellen in een website
Preloading en prefetching zijn relatief eenvoudige technieken om een site sneller en soepeler te maken — zeker bij veel media, fonts of JS-onderdelen boek je merkbare winst.
01 — het verschilWat preloading en prefetching zijn
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 boek je hiermee merkbare winst — mits goed toegepast. Het verschil zit in de urgentie: preload is voor bronnen die je nu nodig hebt, prefetch voor bronnen die misschien later van pas komen. Wissel hieronder tussen beide:
Twee manieren om bronnen vooraf te laden
Wissel tussen preload (nu belangrijk) en prefetch (misschien later nodig) — met codevoorbeeld.
Met preload vertel je de browser: 'Laad dit bestand alvast in zodra mogelijk, het is belangrijk.' Je gebruikt het vooral voor fonts, belangrijke afbeeldingen, CSS of JS die direct nodig zijn. Je voegt het toe in de <head> en specificeert wat je laadt én wat voor soort bestand het is — zorg dat je as correct instelt, anders negeert de browser de preload.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/css/critical.css" as="style">
02 — instellen & dns-prefetch/preconnectPreloading, prefetch en connecties vooraf opzetten
Preload voeg je toe in de <head> van je HTML, waarbij je specificeert wat je laadt en wat voor soort bestand het is (via het as-attribuut). Prefetch werkt vooral goed voor bronnen die waarschijnlijk nodig zijn maar niet direct, zoals een link naar een volgende pagina of een script dat pas later wordt geladen. Voor externe bronnen (zoals CDN's of externe scripts) is het bovendien slim om DNS-resolutie en connecties vooraf op te zetten:
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> <link rel="dns-prefetch" href="https://fonts.googleapis.com">
Het verschil tussen die twee: dns-prefetch lost het domein op voordat het wordt gebruikt, terwijl preconnect alvast verbinding maakt (TCP handshake, TLS) en daarmee sneller is dan dns-prefetch. Gebruik dit alleen voor domeinen die je écht gebruikt — anders verlies je juist performance.
03 — testen & best practicesTesten, valideren en best practices
Zorg dat je preloading en prefetching goed instelt, want een verkeerde implementatie kan juist vertraging veroorzaken. Gebruik voor het testen en valideren de volgende tools:
- WebPageTest: check of preload werkt zoals bedoeld.
- Lighthouse: geeft preload-adviezen.
- Browser devtools (Netwerk-tab): zie of een bestand al eerder is geladen.
Houd ten slotte deze best practices aan:
- Gebruik preload alleen voor kritieke bronnen — anders vertraag je andere resources.
- Combineer preload met een fallback (bijvoorbeeld <noscript>).
- Zet preconnect alleen op wat je écht nodig hebt.
- Test de laadtijd vóór en ná implementatie.
Veelgestelde vragen
Met preload zeg je: 'Laad dit bestand alvast in zodra mogelijk, het is belangrijk' — voor fonts, afbeeldingen, CSS of JS die direct nodig zijn. Met prefetch zeg je: 'Deze bron komt misschien later van pas, laad het alvast op de achtergrond' — voor volgende pagina's, externe scripts en API-calls.
dns-prefetch lost het domein op voordat het wordt gebruikt; preconnect maakt alvast verbinding (TCP handshake, TLS) en is sneller dan dns-prefetch. Gebruik dit alleen voor domeinen die je echt gebruikt, anders verlies je performance.
Gebruik preload alleen voor kritieke bronnen (anders vertraag je andere resources), stel het as-attribuut correct in (anders negeert de browser de preload), combineer met een fallback, en test de laadtijd vóór en ná implementatie.
Je website sneller laten laden?
Vul het formulier in en ik neem binnen één werkdag contact met je op.
Neem contact op