Performance
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.
In sintesi
- preconnect anticipa DNS, TCP e TLS; dns-prefetch anticipa solo la risoluzione del nome.
- preload scarica una risorsa subito e può rubare banda all'immagine LCP.
- Sul nostro sito l'handshake misurato costa 59 ms, il 17% di un primo byte da 350 ms.
- Un preload di font senza crossorigin scarica il file due volte.
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.
Cosa fa ciascun hint
| Hint | Cosa anticipa | Costo se sbagli | Quando usarlo |
|---|---|---|---|
| dns-prefetch | Risoluzione DNS | pochi ms di CPU, nessuna connessione | origini probabili ma non certe |
| preconnect | DNS, TCP e TLS | socket aperto anche se inutilizzato | due o tre origini critiche |
| preload | Download della risorsa | banda rubata a risorse più importanti | font e immagine LCP |
| modulepreload | Download e parse del modulo | chunk duplicato se il grafo cambia | entry dei moduli |
| prefetch | Download per la navigazione successiva | banda sprecata se l'utente non va | link probabili |
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 -rnIl 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.
Domande frequenti
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.