Hvad er ressourcehints som preload, prefetch og preconnect?

Question

Accepted Answer

**Ressourcehints** er ``-tags, der fortæller browseren at hente eller forbinde til ressourcer tidligt for at optimere indlæsningsydeevne. Hver enkelt opfylder et anderledes timing-/prioritetsbehov. ```html ``` ## Hvad hver enkelt gør - **`preload`** — "Jeg har brug for dette **til den aktuelle side**, hent det nu med høj prioritet." Til kritiske ressourcer, som parseren opdager sent: skrifttyper, hero-billeder, CSS-refererede assets. Kræver `as` så browseren sætter korrekt prioritet/headers. - **`preconnect`** — "Jeg forbinder til denne **origin** snart; foretag DNS-opslag + TCP + TLS-håndtryk nu." Sparer rundturen før den første anmodning til en tredjepart (API, skrifttypevært, CDN). Brug til få kritiske origins. - **`dns-prefetch`** — en lettere version af preconnect: kun DNS-opløsning. God fallback / til mange origins. - **`prefetch`** — "Jeg vil **sandsynligvis** have brug for dette til den **næste** navigation; hent det med lav prioritet når der er tomgang." Til sandsynligvis-næste sider/assets. Cachet til fremtiden, ikke den aktuelle side. ## Et almindeligt eksempel i praksis: skrifttyper ```html ``` Skrifttyper opdages sent (browseren skal først parse CSS), så preloading af dem undgår usynlige-tekst-forsinkelser. ## Forsigtighed: undgå over-hinting Preloading af alt underminerer formålet — det konkurrerer med virkelig kritiske ressourcer om båndbredde. Hint kun de få, der betyder mest. ## Hvorfor det betyder noget Ressourcehints reducerer latency på den kritiske sti: `preconnect` fjerner håndtryksforsinkling for tredjeparter, `preload` prioriterer sent-opdagede kritiske assets (skrifttyper, LCP-billede), og `prefetch` gør den *næste* navigation føles øjeblikkelig. Brugt strategisk forbedrer de betydeligt Core Web Vitals.