Performance
Preload dei font: cinque file, non venti
Il preload dei font serve solo ai caratteri del primo schermo: qui 5 file per 171.368 byte su 20 facce dichiarate. Come sceglierli e cosa misurare.
In sintesi
- Precarica solo le facce che compaiono senza scorrere: qui sono 5 su 20 dichiarate.
- I cinque preload pesano 171.368 byte, misurati sulla home il 1 novembre 2026.
- Senza crossorigin il browser scarica il font due volte e il preload non serve.
Il preload dei font va riservato ai caratteri che compaiono nel primo schermo. Qui sono 5 richieste per 171.368 byte, contro 20 dichiarazioni @font-face nel foglio fonts.css.
I cinque file in preload
| File | Ruolo | Byte | Preload |
|---|---|---|---|
inter-400-latin.woff2 | testo corrente | 48.256 | sì |
averia-serif-libre-400-latin.woff2 | serif di display | 38.404 | sì |
averia-serif-libre-700-latin.woff2 | serif di display, grassetto | 38.712 | sì |
general-sans-500-s2.woff2 | display dell'hero | 22.904 | sì |
general-sans-600-s3.woff2 | display dell'hero, grassetto | 23.092 | sì |
I cinque file coprono il testo e i titoli visibili subito. Il foglio dichiara 20 facce perché ogni famiglia ha più pesi e sottoinsiemi: le altre 15 arrivano solo quando una pagina le usa davvero, e su una pagina che non le usa non costano nulla.
Il markup corretto
crossorigin serve anche sullo stesso dominio: senza, il browser scarica il font due volte, una per il preload e una per la regola @font-face, e il preload non aiuta più.
Il comando
curl -sS -o /dev/null -w "%{size_download}\n" https://ui.eneawork.it/fonts/inter-400-latin.woff2Il comando stampa i byte di un file; ripetilo per ogni preload e somma. Il numero da confrontare è il peso del resto del primo schermo, non il totale del sito.
La limitazione
Un preload sbagliato toglie banda a ciò che conta: se una faccia non compare senza scorrere, i suoi 38 KB arrivano prima del testo utile. I font woff2 sono già compressi, quindi gzip non li riduce, e la cache immutable fa pagare il costo solo alla prima visita.
Dove continuare
Nel catalogo EneUI: 111.985 componenti, 1.556 blocchi e il record sidebar, dove la tipografia arriva dal foglio globale. Le guide: font-display e layout shift e il CSS critico; il confronto tra font gratuiti per interfacce aiuta a scegliere prima di misurare.
Domande frequenti
Quanti font conviene precaricare?
Solo quelli usati sopra la piega, di solito due o tre. Ogni preload in più compete con il contenuto principale per la stessa banda.
Perché serve crossorigin su un font dello stesso dominio?
I font sono richieste in modalità CORS anche quando arrivano dallo stesso host. Senza l'attributo il preload non corrisponde alla richiesta del CSS e il file viene scaricato due volte.
Meglio preload o font-display swap?
Servono a cose diverse. Il preload riduce il tempo di arrivo del file, font-display decide cosa mostrare mentre il file non è pronto. Usa entrambi.
I font woff2 si comprimono con Brotli?
No, il formato è già compresso e un secondo passaggio aggiunge pochi byte. Il risparmio arriva dal numero di facce servite, non dalla compressione.
Come verifico che il preload funzioni?
Nel pannello Network il font deve comparire una volta sola, con priorità alta e senza una seconda richiesta dal CSS. Se ne vedi due, manca crossorigin o il percorso non coincide.