Ho smesso di usare il CDN di Google Fonts
Caricare i font da un CDN di Google rallenta il tuo sito.
Prima usavo un singolo link nell'header. Sembrava facile. Poi ho controllato i miei punteggi Lighthouse.
Il report mostrava un problema. Il browser doveva effettuare connessioni extra ai server di Google. Doveva eseguire DNS lookup e TLS handshake. Questo causava ritardi. Su una connessione mobile lenta, il testo rimaneva invisibile per troppo tempo.
Sono passato al self-hosting. Ci è volto un pomeriggio. Ora lo faccio per ogni progetto.
Ecco la configurazione di cui hai bisogno:
- Usa il formato WOFF2. È il 30% più piccolo di WOFF. Non hai più bisogno di vecchi formati come .ttf o .eot.
- Converti i tuoi font. Usa la libreria fonttools per comprimere i file .ttf in .woff2.
- Usa la proprietà
font-display: swap. Questa mostra immediatamente il testo di fallback. Impedisce che il testo rimanga invisibile mentre il font viene caricato. - Precarica i font critici. Aggiungi un link di preload nel tuo
<head>per i font utilizzati nella parte superiore della pagina. - Usa sempre l'attributo
crossorigin. Se lo dimentichi, il browser scaricherà il font due volte. - Crea dei subset dei tuoi font. Se il tuo sito usa l'inglese, rimuovi i glifi non utilizzati. Questo può ridurre la dimensione del file del 70%.
- Metti i file in cache. Usa un header
cache-controlcon una durata lunga per mantenere i font nel browser.
Il flusso di lavoro è semplice:
Converti in WOFF2. Usa @font-face con swap. Precarica il font principale con crossorigin. Metti il file in cache.
Questa configurazione migliora la velocità di caricamento e rimuove una terza parte dal tuo percorso critico.
Usi ancora il CDN di Google per la produzione? Dimmi perché nei commenti.