# preconnect, dns-prefetch, preload: quando servono

Tre hint, tre costi: preconnect apre una connessione, dns-prefetch risolve il nome, preload scarica subito. Sul nostro sito l'handshake costa 59 ms.

> Pagina: https://ui.eneawork.it/blog/resource-hints-preconnect
> Markdown: https://ui.eneawork.it/blog/resource-hints-preconnect.md

*2026-11-01*

preconnect apre in anticipo la connessione a un'altra origine, dns-prefetch risolve solo il nome, preload scarica subito una risorsa che serve al primo paint. Ogni hint toglie lavoro al percorso critico e ne aggiunge un altro.

Hint contati e tempi misurati il 1 novembre 2026. L'HTML di https://ui.eneawork.it/ contiene 5 preload di font per 172.868 byte trasferiti e 0 preconnect, perché tutte le risorse sono sulla stessa origine. La connessione fredda all'origine, letta con curl.exe su dieci richieste, costa una mediana di 59 ms a TLS completo: 13 ms per il DNS e 30 ms per il TCP sono i tempi cumulati. Nella traccia Puppeteer i cinque preload partono tra 557 e 563 ms, dopo un primo byte a 477 ms. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Riferimento: MDN, CC BY-SA 2.5.

## Cosa fa ciascun hint

La regola pratica: preconnect per le origini che usi entro il primo secondo, preload per le risorse che disegnano il primo schermo, prefetch per la navigazione successiva.

## Contare i hint che spedisci

curl -s https://example.com/ | grep -o 'rel="[a-z-]*"' | sort | uniq -c | sort -rn

Il comando richiede curl e grep e legge l'HTML come arriva dal server, prima che il JavaScript aggiunga altro. Se il conteggio dei preload supera le tre o quattro voci, stai caricando in anticipo risorse che nessuno vede.

## Il caso dei cinque font

Sul nostro sito i cinque preload sono 172.868 byte prima del primo paint: due tagli di Averia per i titoli, un Inter per il testo e due General Sans per l'interfaccia. Il costo regge perché i font sono sulla stessa origine e finiscono in cache; su un CDN esterno lo stesso elenco richiederebbe un preconnect, non cinque preload.

## Il limite da dichiarare

I hint sono euristiche, non garanzie: il browser può ignorare un preload se la banda è satura o se la risorsa non è ancora referenziata al momento giusto. Su connessioni lente un preload in più peggiora l'LCP invece di migliorarlo, e la misura va rifatta prima e dopo.

## Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, 12.808 icone e il record zoom parallax: un componente con immagini remote richiede un preconnect al CDN, uno con immagini locali no. Per il testo che si sposta durante il caricamento dei font leggi font-display e CLS, per le immagini immagini senza dimensioni, per il confronto tra architetture framework frontend a confronto.

## FAQ

### preconnect e dns-prefetch sono alternativi?

No, sono cumulativi. preconnect fa anche la risoluzione DNS, quindi sulla stessa origine dns-prefetch diventa ridondante.

### Quanti preconnect si possono mettere?

Due o tre. Ogni preconnect apre un socket, e dieci socket aperti competono con le risorse che stai già scaricando.

### Un preload di font senza crossorigin funziona?

No. Un font è una richiesta CORS: senza crossorigin il browser scarica il file due volte, una per il preload e una per il CSS.

### Quando un preload peggiora le cose?

Quando la risorsa non serve al primo paint o quando la banda è già satura. Occupa la coda e ritarda l'immagine LCP.

### prefetch è utile in una SPA?

Poco, perché la SPA carica i chunk con import() dinamico. Conta di più modulepreload sull'entry o il prefetch del chunk della route successiva.