Cosa sono i resource hints
I resource hints sono direttive HTML che istruiscono il browser a anticipare azioni di rete prima che siano strettamente necessarie. Si dichiarano via link rel nell'head. I tipi principali sono dns-prefetch, preconnect, preload, prefetch e modulepreload. Usati bene riducono latenza percepita; usati male saturano la banda.
dns-prefetch
link rel="dns-prefetch" href="//example.com" istruisce il browser a risolvere il DNS in anticipo. Risparmia 20-120ms sul primo accesso al dominio. Costo bassissimo (un solo lookup DNS). Ideale per domini di terze parti che userai (CDN, font, analytics). Usalo su 4-8 domini critici.
preconnect
link rel="preconnect" href="https://example.com" fa tre operazioni: DNS lookup, TCP handshake, TLS handshake. Risparmia 100-500ms ma costa risorse (connessione TCP aperta). Usalo su 2-4 domini super critici (Google Fonts, immagini CDN, API principale). Aggiungi crossorigin se servono CORS.
preload
link rel="preload" as="..." href="..." scarica la risorsa in alta priorità. Usa as="font" + crossorigin per font, as="style" per CSS, as="image" + fetchpriority="high" per immagine LCP, as="script" per JS critico. La risorsa rimane in memory cache per uso immediato. Non eseguita finché referenziata.
prefetch e modulepreload
link rel="prefetch" scarica risorsa in bassa priorità per navigazione futura: link a prossima pagina, asset del checkout. Browser scarica in idle time. link rel="modulepreload" preload specifico per ES modules: pre-fetcha, pre-parsa, pre-compila il modulo. Combinato con import() dinamico.
Errori comuni
Preload abusato: troppi preload competono per banda, peggiora performance. Preload di risorse non usate: spreco totale. Mancanza crossorigin per font/CORS: doppio download. dns-prefetch per troppi domini: overhead. Mancanza di as= su preload: scaricato 2 volte. Audita con Lighthouse "Avoid invalid preload" e "Preconnect to required origins".
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.