Resource hints zijn <link> tags die de browser instrueren om resources vroeg op te halen of verbinding mee te maken, waardoor de laadprestaties worden geoptimaliseerd. Elk dient een ander timing-/prioriteitsbehoefte.
Resource hints zijn <link> tags die de browser instrueren om resources vroeg op te halen of verbinding mee te maken, waardoor de laadprestaties worden geoptimaliseerd. Elk dient een ander timing-/prioriteitsbehoefte.
preload — "Ik heb dit voor de huidige pagina nodig, haal het nu op met hoge prioriteit." Voor kritieke resources die de parser laat ontdekt: fonts, hero images, CSS-gereferentieerde assets. Vereist as zodat de browser de juiste prioriteit/headers instelt.
preconnect — "Ik zal binnenkort met deze origin verbinden; voer nu de DNS-opzoeking + TCP + TLS-handshake uit." Bespaart de round-trips voordat de eerste aanvraag naar een derde partij (API, font-host, CDN) plaatsvindt. Gebruik voor enkele kritieke origins.
dns-prefetch — een lichtere versie van preconnect: alleen de DNS-resolutie. Goed alternatief / voor veel origins.
prefetch — "Ik zal dit waarschijnlijk nodig hebben voor de volgende navigatie; haal het op met lage prioriteit als het systeem inactief is." Voor waarschijnlijk volgende pagina's/assets. Gecached voor de toekomst, niet voor de huidige pagina.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
Fonts worden laat ontdekt (de browser moet eerst CSS parseren), dus het preloaden ervan vermijdt vertraging door onzichtbare tekst.
Alles preloaden tenietdoet het doel — het concurreert met echt kritieke resources om bandbreedte. Hint alleen de paar die het meest uitmaken.
Resource hints snoepen latentie van het kritieke pad: preconnect verwijdert handshake-vertraging voor derde partijen, preload prioriteert laat-ontdekte kritieke assets (fonts, LCP-image), en prefetch maakt de volgende navigatie voelen als instant.
Wanneer chirurgisch gebruikt, verbeteren zij de Core Web Vitals aanzienlijk.