Resource hint sono tag <link> 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à.
Resource hint sono tag <link> 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à.
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.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
I font vengono scoperti in ritardo (il browser deve prima analizzare il CSS), quindi precaricarli evita i ritardi di testo invisibile.
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ù.
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.