Hoe kunnen we de browser helpen zich voor te bereiden op het laden van bronnen?

Gebruik preload-directieven: preconnect, dns-prefetch, preload, prefetch, prerender.

Directive	Beschrijving	Voorbeeld
preconnect	Maakt vooraf verbinding (DNS-lookup, TCP-handshake, TLS-onderhandeling) met een andere gegevensbron.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Voert DNS-naamresolutie vooraf uit.	<link rel="dns-prefetch" href="//api.example.com">
preload	Verzoekt bronnen (JS, CSS, lettertypen) met hoge prioriteit vooraf, zonder de rendering te blokkeren.	<link rel="preload" href="/styles.css" as="style">
prefetch	Verzoekt bronnen die waarschijnlijk in de toekomst nodig zullen zijn (bijvoorbeeld op de volgende pagina).	<link rel="prefetch" href="/next_page.html">
prerender	Render de volgende pagina vooraf in een verborgen tabblad.	<link rel="prerender" href="/upcoming_page.html">

Gebruik het async of defer attribuut op <script>-tags om scripts asynchroon te laden en uit te voeren, zonder de HTML-parser te blokkeren:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Gebruik het loading="lazy" attribuut voor afbeeldingen en <iframe> om ze uitgesteld te laden wanneer ze in het zicht komen:

<img src="image.jpg" loading="lazy" alt="Lazy geladen afbeelding">

Optimaliseer afbeeldingen (comprimeren, gebruik van moderne formaten zoals WebP), lettertypen (subsets, WOFF/WOFF2) en andere bronnen.

Minify en comprimeer CSS, JavaScript en HTML.

Gebruik Service Worker voor caching van bronnen en offline toegang.

Splits grote JavaScript-code in kleinere delen (code splitting) en laad ze op aanvraag.

Gebruik HTTP/2 en HTTP/3 voor efficiënter multiplexen en headercompressie.

Stel juiste cache-headers in (Cache-Control, Expires) op de server.

Gebruik <link rel="modulepreload"> voor het preloaden van ES JavaScript-modules.

<link rel="modulepreload" href="/dist/module.js">