Vad är resurshintar som preload, prefetch och preconnect?

Question

Accepted Answer

**Resurshintar** är ``-taggar som talar om för webbläsaren att hämta eller ansluta till resurser tidigt för att optimera laddningsprestanda. Var och en tjänar ett annat tids-/prioritetsbehov. ```html ``` ## Vad var och en gör - **`preload`** — "Jag behöver detta **för den aktuella sidan**, hämta det nu med hög prioritet." För kritiska resurser som tolken upptäcker sent: typsnitt, hjältbilderbildar, CSS-refererade resurser. Kräver `as` så att webbläsaren ställer in rätt prioritet/headers. - **`preconnect`** — "Jag ansluter till denna **origin** snart; gör DNS-uppslaget + TCP + TLS-handskakningen nu." Sparar rundor innan den första begäran till en tredje part (API, typsnittvärd, CDN). Använd för ett fåtal kritiska ursprung. - **`dns-prefetch`** — en lättare version av preconnect: bara DNS-upplösningen. Bra reserv/för många ursprung. - **`prefetch`** — "Jag kommer **förmodligen** att behöva detta för **nästa** navigering; hämta det med låg prioritet när det är inaktivt." För sannolikt nästa sidor/resurser. Cachelagrad för framtiden, inte den aktuella sidan. ## Ett vanligt verkligt exempel: typsnitt ```html ``` Typsnitt upptäcks sent (webbläsaren måste tolka CSS först), så förlagring av dem undviker osynliga-textförseningar. ## Varning: över-hint inte Förlagring av allt förslösar syftet — det konkurrerar med genuint kritiska resurser om bandbredd. Ge bara ett hint till de få som spelar mest roll. ## Varför det spelar roll Resurshintar skär ned latensen på den kritiska vägen: `preconnect` tar bort handskakningstöd för tredje parter, `preload` prioriterar sent upptäckta kritiska resurser (typsnitt, LCP-bild), och `prefetch` gör *nästa* navigering känslan omedelbar. Använd kirurgiskt, de förbättrar Core Web Vitals meningsfullt.