Pubblicato il - Aggiornato il
Usa font-display swap e assicurati che il testo rimanga visibile durante il caricamento
C’è una stretta relazione tra velocità di caricamento di un sito e tipologia di font utilizzati e te ne voglio parlare in questo articolo.
Per farlo, ti racconto del mio intervento al “Turin Web Performance Group”. Sono stato invitato a Torino per condividere la mia esperienza con altri esperti e proprio come all’evento, comincerò con una domanda:
“Ci servono davvero i font esterni?“
Prima di darvi una risposta vedremo nel dettaglio le tipologie di font e ti illustrerò strumenti e strategie per ottimizzare il percorso di rendering che porta alla loro visualizzazione.
Indice dei contenuti
I font di sistema
I font di sistema sono caratteri predefiniti e presenti nella maggior parte dei sistemi operativi.
I framework CSS Open Source che utilizzo maggiormente quando sviluppo un sito web sono UIkit e Bootstrap. Entrambi propongono font di sistema alternativi che possano essere visualizzati sulla maggior parte dei software di sistema installati sui diversi device.
Ecco le famiglie di font utilizzate da UIkit:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif;La soluzione proposta invece da Bootstrap:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif, “Apple Color Emoji”, “SegoeUI Emoji”, “SegoeUI Symbol”, “NotoColor Emoji”;Questi caratteri non hanno alcun impatto sulla velocità di caricamento del sito.
I web font
I font web non sono presenti nel sistema operativo di default. Questi caratteri infatti si possono scaricare direttamente dal web, per poi salvarli su una cartella del sito oppure inserendo un link a librerie esterne come Google Fonts.
Esempio di caricamento classico di un font di Google:
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" type="text/css">I web font, senza opportuni accorgimenti, hanno un impatto negativo sulla velocità di caricamento di un sito web e sulla User Experience.
Cerchiamo di capire come.
Velocizza il tuo sito web
Un’opportunità per aumentare il tasso di conversione del tuo sito WordPress.
Perché perfezionare il percorso di rendering critico
Prima che il carattere appaia sulla pagina web, il browser deve decidere come gestire il percorso di rendering per restituire all’utente il testo con il font personalizzato.
Il percorso di rendering critico comincia quando il browser richiede il documento HTML e acquisisce le informazioni in esso contenute per costruire la pagina.
Durante questo processo è importante che i font necessari siano disponibili, altrimenti il browser, mentre avrà già risposto disegnando il layout e altri contenuti sullo schermo, non inserirà nessun pixel di testo fino a quando i font esterni non verranno caricati!
In questo percorso di rendering inoltre, i vari browser si comportano diversamente tra loro.
Ecco perché i web font possono influire sulle prestazioni del sito e far risultare l’apertura delle pagine web lenta. Ora vediamo alcune problematiche più frequenti quando si sceglie un font per i propri siti web.
Problemi di caricamento di un Web Font
I web font possono presentare dei problemi di caricamento del sito. Ecco due tipiche situazioni che potrebbero farvi aumentare il valore di CLS (Cumulative Layout Shift: una delle metriche dei Core Web Vitals) e peggiorare l’esperienza dell’utente.
FOUT
Il problema di caricamento riscontrato maggiormente sui siti web è il FOUT (Flash of Untitled Text). Nel lasso di tempo necessario per caricare il web font, il browser propone un font alternativo, che potrebbe creare anche problemi di spostamento nel layout della pagina.
FOIT
Il FOIT (Flash of Invisible Text) si presenta quando nella gestione del percorso di rendering il browser tiene nascosto il webfont finché non viene completamente effettuato il suo download. Se questo richiede molto tempo, la pagina potrebbe rimanere senza testo per un periodo anche piuttosto lungo e potrebbe aumentare il tasso di abbandono del sito web.
Ecco cosa potrebbe succedere al tuo sito:
Fonte: Malthe Milthers
La soluzione a queste due criticità è sicuramente l’utilizzo di un “finto carattere” in attesa del download completo del font esterno.
Questa soluzione si chiama FOFT (Flash of Faux Text).
Da approfondire: usare le dashboard per i core web vitals
Come migliorare il caricamento dei font
Per velocizzare il caricamento di un font esterno e sostituire il carattere utilizzando la tecnica di FOFT è possibile utilizzare diverse strategie, sviluppate negli ultimi anni.
Insomma, ci sono davvero molte cose che puoi fare per il tuo sito.
Vuoi il materiale informativo con supporti grafici e i report della mia ricerca?
Utilizza librerie JavaScript
Alcuni developer hanno scelto di utilizzare JavaScript per monitorare e intervenire in modo chirurgico (anche in caso di incompatibilità tra i diversi browser) per diversi scopi:
- Verificare quando un font è stato caricato (Font Face Observer)
- Caricare in modo asincrono il CSS (Load CSS)
- Controllare il caricamento di un Web Font (Web Font Loader)
Inserisci Link Preload e DNS Prefetch
Il DNS Prefetch è accorgimento molto interessante per migliorare le performance del sito web. Per risolvere problemi di ritardo si può stabilire una connessione con il server di origine, utilizzando i seguenti codici:
<link rel="dns-prefetch" href="https://fonts.gstatic.com"><link rel="preconnect" href="https://fonts.gstatic.com">Con il DSN Prefetch puoi velocizzare la risoluzione DNS, arrivando a risparmiare tra i 0.5 e 1 secondo di caricamento.
L’utilizzo di Preload consente al browser di impostare la priorità delle risorse. In questo modo gli sviluppatori web possono ottimizzare la consegna di determinate risorse utilizzando questo codice:
<link rel="preload" href="https://example.com/fonts/font.woff" as="font">Vuoi sapere come Shopify ha migliorato il tempo del 50% con l’utilizzo di Preload? Vai a pagina 16 della mia presentazione.
Valuta nel tempo come «preload», «preconnect» e «prefetch» siano compatibili nei browser principali e stabilite la vostra strategia.
Usa la regola CSS Font-display: swap
Qual è il significato di font-display? Con la dichiarazione font-display all’interno del CSS puoi personalizzare la tua strategia di rendering e ovviare ai problemi di caricamento dei webfont senza utilizzare JavaScript.
Lighthouse ha rilevato a dicembre del 2018 che, grazie a «font-display», il 61.1% di pagine che evita il flash del testo invisibile (FOIT) durante il caricamento dei font.
Guarda come si evolve il valore di Font Display su HTTP Archive.
La proprietà CSS Font-display funziona con valori quali:
- auto: è il valore iniziale di font-display e dice al browser di visualizzare il font seguendo il percorso predefinito del browser stesso.
- block: con questa parola chiave, in attesa del web font, si imposta un breve periodo di blocco. Se si supera il tempo stabilito, se il carattere non è ancora disponibile, viene reso con il font di fallback
- swap: qui non c’è neanche il periodo di blocco, perché il browser rende direttamente il testo con il font di fallback. Il percorso di rendering col font originale inizia solo quando c’è il suo completo download.
- fallback: con questa parola chiave si imposta un breve periodo di blocco, se il web font non viene scaricato entro questo periodo, per tutta la visita del sito, l’utente visualizzerà un font alternativo.
- optional: si tratta di un’accortezza in più rispetto al precedente. Se il font non viene scaricato entro il periodo di blocco, per tutta la durata della visita al sito, il browser riporterà il carattere sostitutivo, ma scaricherà il web font in background, per renderlo immediatamente disponibile in caso di visite future al sito.
Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web
L’utilizzo di font-display:swap è uno dei 15 suggerimenti per migliorare le performance di un sito web svelati durante l’evento Google I/O ’19.
In questo modo puoi assicurarti che il testo sia visibile agli utenti durante il caricamento dei caratteri web e PageSpeed Insights non ti segnalerà errori.
Però dovrai ricordarti di ottimizzare il formato dei font per ogni browser, infatti ciascun font dovrebbe essere fornito in WOFF2, WOFF, EOT e TTF poiché sono i formati maggiormente supportati nei browser più utilizzati.
Font e velocità
Ma se dovessimo scegliere un font per migliorare le prestazioni del nostro sito web tra i vari font disponibili online? Ecco i migliori font per siti web.
Se le performance sono la tua priorità ecco come scegliere i caratteri per il sito web.
Qui sotto vi riporto la classifica dei 10 Google Fonts più veloci, grazie ai dati raccolti in un Case Study realizzato da KeyCDN.
Fonte: KeyCDN
Conclusioni
Web Font o Font di Sistema? Bisogna trovare il giusto compromesso tra personalizzazione del sito web e performance. Pertanto ti suggerisco di utilizzare i Web Font per i titoli e i Font di Sistema per il testo (o viceversa).
In questo modo ridurrai le probabilità di incorrere in flash indesiderati. Inoltre, utilizzando dns-prefetch o preload, ridurrai tempi di caricamento dei font fino anche a 1 secondo.
L’ultimo consiglio è quello di caricare l’intera pagina web senza risorse che blocchino il rendering (come file CSS o JavaScript). A volte ottimizzando solo i font potresti aumentare il tempo di caricamento della pagina.
Non sei convinto? Consulta la pagina 19 e 20 della mia presentazione.
Come vedi, ci sono accorgimenti e strategie specifici che puoi attuare per trasformare un sito normale in sito web performante.
Mirko Ciesco
Web Performer
Raccolgo dati dai siti per portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.