Kort fortalt: rel=prefetch er et hint om en ressource I forventer at få brug for senere. Browseren må udskyde download til når netværk og CPU har luft. preload er til det der skal bruges nu i den aktuelle navigation - med høj prioritet.
Forskel på prefetch og preload
| Prefetch | Preload | |
|---|---|---|
| Prioritet | Lav | Høj |
| Brug | Næste side, næste chunk | LCP-billede, kritisk font, vigtig fil |
| Risiko ved forkert brug | Spild af båndbredde og data | Kan skade LCP/INP hvis misbrugt |
Almindelige anvendelser
- Næste dokument i et forudsigeligt flow (artikel → næste artikel, simpel funnel).
- JavaScript-chunks som runtime senere importerer - mange frameworks prefetch’er intelligent selv.
- Dashboards med gentagne mønstre - men kun når I har målt at næste skridt faktisk sker ofte nok.
Hvad prefetch ikke er
Det er ikke et løfte om at brugeren tager næste trin. Prefetch’er I tungt indhold der sjældent vises, bruger I brugerens data og CPU uden gevinst - særligt kritisk på mobil og dyre forbindelser.
Resource hints og HTTP
Prefetch er en del af familien af resource hints sammen med dns-prefetch og preconnect. Brug hints som supplement til sund HTML-struktur - ikke som erstatning.
Relaterede begreber
FAQ
Skal jeg prefetch’e forsiden fra alle undersider?
Sjældent som standard. Start med de mest sandsynlige næste klik - for eksempel næste artikel i et flow - og mål datforbrug og faktisk navigationsrate. Aggressiv prefetch kan spilde brugerens data.
Ødelægger prefetch min cache?
Nej - det fylder cache som andre requests underlagt [Cache-Control](/ordbog/cache-control/). Det kan stadig konkurrere om båndbredde hvis I prefetch’er for meget samtidig.
Hvad er forskellen på prefetch og preload?
Preload er høj prioritet til noget der skal bruges nu i den aktuelle navigation. Prefetch er lav prioritet til noget der måske bruges senere. Misbrug af preload skader oftere LCP; misbrug af prefetch spilder primært båndbredde.
Hvordan spiller prefetch sammen med bfcache?
Prefetch af næste dokument kan gøre nogle overgange hurtigere, men [bfcache](/ordbog/bfcache/) gør tilbage/frem-navigation lynhurtig uden ekstra netværk. Afbalancer med måling - ikke alle flows har gavn af begge dele.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Få edge cache-hit på HTML: undgå cookies, forkert Vary og dårlige cache keys
Mange sites har CDN, men får stadig høj TTFB fordi HTML ikke caches. Lær et praktisk workflow til at få cache-hit på offentlige sider uden at servere forkert indhold.
Forbedr TTFB med caching, edge cache og hurtigere serverrespons
Lær hvordan du reducerer TTFB med page cache, edge cache, korrekt cache strategi og bedre serverrespons på HTML.
Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning
Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.
Range request i praksis: når 206 Partial Content ikke sker (og hvad det koster)
En feltguide til at spotte når browseren forsøger at bruge Range request, men ender med at få hele filer retur (200 i stedet for 206). Lær at se det i DevTools og ret fejl i proxy/CDN/origin.
Reverse proxy og TTFB: sådan finder du cache-, TLS- og routing-fejl i praksis
Reverse proxy-laget kan være årsagen til høj TTFB, mystiske cache misses og 502/504-fejl. Lær hvad du skal kigge efter i headers og waterfall, og få et praktisk debug-flow.
Vary-header og caching: undgå forkert indhold og lav cache-hit-rate
Vary bestemmer hvornår caches skal gemme flere varianter af samme URL (fx gzip vs brotli eller dansk vs engelsk). Lær de typiske fejl, og hvordan du tester med headers og curl.
