Wat zijn resource hints zoals preload, prefetch en preconnect?

Question

Accepted Answer

**Resource hints** zijn `` 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. ```html ``` ## Wat elk ervan doet - **`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. ## Een veelvoorkomend voorbeeld: fonts ```html ``` Fonts worden laat ontdekt (de browser moet eerst CSS parseren), dus het preloaden ervan vermijdt vertraging door onzichtbare tekst. ## Voorzichtigheid: te veel hints vermijden Alles preloaden tenietdoet het doel — het concurreert met echt kritieke resources om bandbreedte. Hint alleen de paar die het meest uitmaken. ## Waarom het belangrijk is 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.