Che cosa sono i resource hint come preload, prefetch e preconnect?

Question

Accepted Answer

**Resource hint** sono tag `` che indicano al browser di recuperare o connettersi a risorse in anticipo, ottimizzando le prestazioni di caricamento. Ognuno risponde a esigenze diverse di timing/priorità. ```html ``` ## Cosa fa ognuno - **`preload`** — "Ho bisogno di questa **per la pagina attuale**, recuperala ora con alta priorità." Per risorse critiche che il parser scopre in ritardo: font, immagini hero, asset referenziati da CSS. Richiede `as` affinché il browser imposti la corretta priorità/header. - **`preconnect`** — "Mi connetterò a questo **origin** presto; esegui ora il lookup DNS + TCP + handshake TLS." Risparmia i round-trip prima della prima richiesta a una terza parte (API, font host, CDN). Usalo per pochi origin critici. - **`dns-prefetch`** — una versione più leggera di preconnect: solo la risoluzione DNS. Buon fallback / per molti origin. - **`prefetch`** — "**Probabilmente** avrò bisogno di questa per la **navigazione successiva**; recuperala a bassa priorità quando il browser è inattivo." Per pagine/asset probabilmente successivi. Memorizzati in cache per il futuro, non per la pagina attuale. ## Un esempio reale comune: font ```html ``` I font vengono scoperti in ritardo (il browser deve prima analizzare il CSS), quindi precaricarli evita i ritardi di testo invisibile. ## Attenzione: non esagerare con gli hint Precaricare tutto vanifica lo scopo — compete con risorse veramente critiche per la larghezza di banda. Usa hint solo per le poche che contano di più. ## Perché è importante I resource hint riducono la latenza del percorso critico: `preconnect` elimina il ritardo di handshake per terze parti, `preload` dà priorità agli asset critici scoperti in ritardo (font, immagine LCP), e `prefetch` rende la navigazione *successiva* istantanea. Usati con precisione, migliorano significativamente Core Web Vitals.