Tag prefetch e preload
I resource hints sono direttive HTML che permettono al browser di anticipare il caricamento di risorse, migliorando il tempo di rendering e i Core Web Vitals. I principali sono preload, prefetch, preconnect e dns-prefetch, ognuno con uno scopo specifico. Usarli correttamente fa la differenza tra un sito veloce e uno percepito come lento dagli utenti.
Preload vs Prefetch
Preload indica una risorsa critica per la pagina corrente e va caricata con priorità alta. Prefetch indica invece una risorsa probabilmente necessaria per una navigazione futura, caricata con priorità bassa quando il browser è in idle. La differenza è temporale: preload accelera la pagina corrente, prefetch prepara la successiva, ottimizzando l'esperienza complessiva.
Preconnect e dns-prefetch
Preconnect apre per tempo la connessione TCP+TLS verso un dominio esterno, riducendo il tempo di handshake quando le risorse vengono richieste. Dns-prefetch è più leggero e risolve solo il nome DNS, utile per molti domini di terze parti. Si usano per CDN, fontset esterni, Google Fonts, script analytics e qualsiasi risorsa cross-origin.
Modulepreload per ES modules
Per applicazioni che usano ES modules nativi, esiste il rel="modulepreload" specifico. Funziona come preload ma è ottimizzato per moduli JavaScript: scarica il modulo, ne fa parsing e lo prepara per esecuzione, inclusi i suoi import figli. Velocizza significativamente il primo carico di SPA basate su modules. Sintassi: <link rel="modulepreload" href="/app.js">. Supporto cross-browser ormai universale. Va combinato con HTTP/2 push e Resource Hints per ottenere il miglior tempo di interactive.
Priorità e priority hints
Oltre ai resource hints, HTML supporta l'attributo fetchpriority="high|low|auto" su img, link e script. Permette di elevare o abbassare la priorità di download di risorse specifiche oltre quello che il browser determina automaticamente. Esempio: fetchpriority="high" sull'immagine LCP per accelerare il Largest Contentful Paint. Su immagini below-the-fold puoi mettere fetchpriority="low" combinato con loading="lazy". Strumento potente per ottimizzazioni fine-grained di Core Web Vitals.
Speculation Rules API
La Speculation Rules API è un'evoluzione moderna di prefetch/prerender. Permette di dichiarare regole speculative tramite un blocco JSON dedicato: il browser pre-renderizza intere pagine in background quando l'utente sembra probabile cliccare un link. Riduce drasticamente il tempo di navigazione (sub-100ms) per pagine "next" probabili. Sintassi: <script type="speculationrules">{"prerender": [{"urls": ["..."]}]}</script>. Disponibile in Chrome dalla versione 121+. Fallback graceful: browser non supportati ignorano il blocco. Strumento potente per migliorare LCP percepito su navigazioni interne dei siti.
Strategia di ottimizzazione
Una strategia di ottimizzazione completa combina più tecniche: preload per asset critici della pagina corrente, preconnect per origins esterne (CDN, Google Fonts), dns-prefetch per dominii meno critici, prefetch per probabili pagine successive, Speculation Rules per anticipare ulteriormente. Tutto questo va misurato con strumenti reali: Lighthouse, WebPageTest, Core Web Vitals report. Ottimizzare senza misurare può peggiorare le performance: ad esempio preload eccessivo riduce la priorità di altre risorse importanti. Misura, ottimizza, verifica, itera.
Tool e misurazione
Per misurare l'impatto dei resource hints: Lighthouse audit completo, WebPageTest con waterfall dettagliato, Chrome DevTools Performance tab e Network tab. Verifica timing di download, parsing, execute. Per analisi continua, Real User Monitoring (RUM) con tool come Vercel Analytics, Cloudflare Web Analytics, SpeedCurve, RUMVision raccolgono dati da utenti reali. Combina audit sintetici (Lighthouse, WebPageTest) con RUM per quadro completo. Ottimizzazioni che funzionano in lab possono comportarsi diversamente in produzione con dispositivi e network reali. Itera misurando effetti reali, non solo metriche di laboratorio che potrebbero essere fuorvianti.
Procedura passo-passo
- Identifica le risorse critiche above-the-fold (font, CSS principale, hero image).
- Per ciascuna inserisci <link rel="preload" href="..." as="..."> con il tipo as corretto.
- Per font usa as="font" crossorigin per evitare doppio download.
- Per pagine probabili di navigazione successiva usa <link rel="prefetch" href="...">.
- Per CDN o domini di terze parti usa <link rel="preconnect" href="https://cdn.esempio.it">.
- Per molti domini esterni opta per dns-prefetch più leggero.
- Verifica i miglioramenti con Lighthouse e WebPageTest.
Errori comuni e come risolverli
- Preload senza as: il browser non sa con quale priorità trattare la risorsa; specifica sempre as.
- Crossorigin mancante per font: il preload non viene usato e il font viene scaricato due volte.
- Troppo preload: usare preload per tutto vanifica il beneficio; limita alle risorse veramente critiche.
- Prefetch su pagine improbabili: spreca banda dell'utente; analizza il flow per scelte intelligenti.
- Preconnect a domini non usati: occupa connessioni utili; collegati solo a CDN realmente richiamate.
Domande frequenti
D: Preload accelera sempre la pagina?
R: Solo per risorse veramente critiche. Su risorse non bloccanti può addirittura rallentare le altre.
D: Quanti preconnect posso usare?
R: Massimo 3-4 verso CDN principali. Oltre questa soglia conviene passare a dns-prefetch.
D: I resource hints supportano tutti i browser?
R: I principali sì. dns-prefetch ha massima compatibilità; preload è ben supportato da anni.
D: Posso mettere prefetch dinamicamente da JavaScript?
R: Sì, creando dinamicamente i tag link in funzione del comportamento dell'utente.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.