Hva er ressurshint som preload, prefetch og preconnect?

Question

Accepted Answer

**Ressurshint** er ``-tagger som forteller nettleseren å hente eller koble seg til ressurser tidlig, og optimaliserer lastefarten. Hver enkelt dekker ulike tids- og prioriteringsbehov. ```html ``` ## Hva hver enkelt gjør - **`preload`** — "Jeg trenger dette **for gjeldende side**, hent det nå med høy prioritet." For kritiske ressurser som parseren oppdager sent: fonter, hero-bilder, CSS-referanserte eiendeler. Krever `as` slik at nettleseren setter korrekt prioritet/headers. - **`preconnect`** — "Jeg vil koble meg til denne **originen** snart; gjør DNS-slookup + TCP + TLS-handshake nå." Sparer rundturene før den første forespørselen til en tredjepart (API, fontvert, CDN). Bruk for noen få kritiske originer. - **`dns-prefetch`** — en lettere versjon av preconnect: kun DNS-oppløsningen. God fallback / for mange originer. - **`prefetch`** — "Jeg kommer **sannsynligvis** til å trenge dette for **neste** navigasjon; hent det med lav prioritet når inaktiv." For sannsynlig-neste sider/eiendeler. Bufret for framtiden, ikke gjeldende side. ## Et vanlig eksempel fra virkeligheten: fonter ```html ``` Fonter oppdages sent (nettleseren må analysere CSS først), så forhåndslasting av dem unngår usynlige-tekst-forsinkelser. ## Advarsel: ikke over-hint Forhåndsinnlasting av alt motarbeider formålet — det konkurrerer med genuint kritiske ressurser om båndbredde. Hint bare de få som betyr mest. ## Hvorfor det betyr noe Ressurshint reduserer latens på den kritiske stien: `preconnect` fjerner handshake-forsinkelse for tredjeparter, `preload` prioriterer sent-oppdagede kritiske eiendeler (fonter, LCP-bilde), og `prefetch` gjør *neste* navigasjon føles øyeblikkelig. Når de brukes strategisk, forbedrer de Core Web Vitals betydelig.