Web font, come ottimizzarli per migliorare le performance
Ci dedichiamo di nuovo alla SEO tecnica e, più in generale, ai consigli per migliorare le prestazioni del sito e in particolare la velocità: oggi il nostro focus si accende sui web font, un fattore che rischia di essere trascurato e che invece ha un impatto notevole non solo sul tempo di caricamento, ma anche sull’usabilità e sulla leggibilità dei contenuti.
Che cosa sono i web font
I web font sono caratteri tipografici esterni a quelli di default, che ogni sito può decidere di aggiungere da librerie esterne (come Google Fonts) per variare lo stile dell’impaginazione. I font di sistema sono basic, non hanno impatto sulla velocità di caricamento delle pagine del sito e sono compatibili con larghissima parte dei browser, dei sistemi operativi e dei software (sono infatti detti anche font web-safe), mentre invece i web font sono più complessi.
La definizione di web font di Google
Per orientarci in questo tema complesso ci affidiamo a Ilya Grigorik di Google, che ha realizzato una guida strutturata all’ottimizzazione dei font web che appare chiara ed esaustiva. Partiamo dunque dalla definizione: “un font web è una raccolta di glifi, ciascuno dei quali rappresenta una forma vettoriale che descrive una lettera o un simbolo”.
Da ciò deriva anche un’informazione laterale molto importante: i caratteri sono differenti e hanno pesi altrettanto diversi, perché le dimensioni di ogni particolare file font sono determinate dalla “complessità dei percorsi vettoriali di ogni glifo” e “dal numero di glifi”.
Ogni famiglia di font è composta da una serie di varianti stilistiche (per la scrittura normale, l’evidenziazione in grassetto o quella in corsivo) e diversi spessori per ogni stile; a sua volta, ogni stile può contenere glifi di forme molto diverse, che ad esempio prevedono spaziature, dimensioni o forme differenti.
Il Googler cita nello specifico l’esempio di OpenSans, uno dei font web più popolari, che “contiene 897 glifi, che includono caratteri latini, greci e cirillici”.
Come scegliere un web font
Per valutare quale web font scegliere, dunque, dobbiamo reperire le informazioni utili e considerare anche i set di caratteri supportati, aspetto fondamentale se abbiamo un sito multilingua: “per localizzare i contenuti di una pagina in più lingue, dovrai utilizzare un font che sia in grado di garantire un aspetto e un’esperienza coerenti agli utenti”, ci consiglia Google.
Anche in questo caso abbiamo un esempio concreto: la famiglia di font Noto di Google mira a supportare tutte le lingue del mondo, ma le dimensioni totali del pacchetto, incluse tutte le lingue, “ammontano in un file ZIP di più di 130 MB”.
L’importanza dei web font e della tipografia
Se possono essere così complessi da gestire, perché scegliere di installare dei font web personalizzati? Ci risponde sempre Google: “I font web sono fondamentali per ottenere un buon design, user experience e prestazioni ottimali”, e scusate se è poco, verrebbe da dire.
Questi caratteri rappresentano un punto centrale per la tipografia, ovvero l’impostazione grafica del sito e delle pagine, che è un aspetto fondamentale per il design, il branding, la leggibilità e l’accessibilità: la tipografia deve essere adatta ai contenuti del sito, deve rispettare il tono e la voce, deve essere leggibile e funzionale, essere capace di adeguarsi al contesto e di prestare attenzione all’utente.
E anche quello che apparentemente è solo un dettaglio può fare la differenza: “I font web consentono di ottenere tutto ciò, e non solo”, dice Grigorik. Con questo sistema “il testo è selezionabile, ricercabile, ingrandibile e compatibile con hight-DPI, offrendo un rendering coerente e conciso, con una risoluzione multipla scalabile che ben si adatta a qualsiasi formato, dimensione e risoluzione del monitor”.
Come ottimizzare i web font
La guida di Google ci rassicura anche su un aspetto: “contrariamente a quanto si crede, l’utilizzo di font web non ritarda necessariamente il rendering della pagina né ha un impatto negativo su altre prestazioni”. Questo significa che è possibile integrare in tutta sicurezza i web font sul nostro sito, opportunamente ottimizzati, e sfruttare tutto il loro potenziale.
Non temere di utilizzare i font web, ci dicono gli esperti, ma fai attenzione a ridurre le possibilità di errore: “un’applicazione non ponderata può causare ritardi evitabili e download eccessivamente pesanti”, e quindi “l’utilizzo di font web richiede una progettazione attenta per garantire che la tipografia non intralci le prestazioni”.
Gli interventi per ridurre problemi al rendering
L’obiettivo dei lavori tecnici è di “aiutare il browser” migliorando “i font e il modo in cui vengono recuperati e utilizzati all’interno delle nostre pagine”, che è una fase critica nell’intera strategia prestazionale. Come dicevamo, ogni font rappresenta una risorsa aggiuntiva e in alcuni casi possono bloccare il rendering del testo, ma quando operiamo in modo ottimizzato, impostando una strategia ponderata di caricamento e applicazione nella pagina, è possibile ridurre le dimensioni totali e migliorare i tempi di rendering.
I cinque consigli di ottimizzazione dei web font
La guida di Google segnala dunque cinque interventi di ottimizzazione sui caratteri tipografici del sito, una checklist del lavoro:
- Verifica e controlla il tuo utilizzo dei font. Il primo consiglio è piuttosto semplice, perché invita a limitare l’uso eccessivo di font sulle tue pagine e di ridurre il numero di varianti utilizzate per ogni carattere. Questo consente di offrire agli utenti un’esperienza più rapida e uniforme.
- Suddividi i font in subset. Entriamo nel tecnico: “molti font possono essere suddivisi in subset o in più unicode-range, così da utilizzare soltanto i glifi richiesti da una pagina specifica”, e in genere tra le best practices si suggerisce di creare subset in base allo script (come latino, cirillico e così via). Già solo questa accortezza permette di ridurre le dimensioni file e di aumentare la velocità di download della risorsa, ma bisogna badare nel corso ai parametri per il riutilizzo dei font: ad esempio, spiega Grigorik, sarebbe meglio “per ogni pagina non scaricare un set di caratteri diverso, ma sovrapposto”.
- Ottimizza il formato dei font per ogni browser. Ogni font dovrebbe essere fornito in formato WOFF2, WOFF, EOT e TTF, comprimendo con GZIP i formati EOT e TTF, che di base non sono compressi.
- Specifica le politiche ottimali di validazione e caching. I font sono risorse statiche che vengono aggiornate molto raramente: per garantire un riutilizzo efficace tra pagine diverse bisogna fare in modo che i server prevedano un timestamp max-age di lunga durata e un token di riconvalida.
- Utilizza FontLoading API per ottimizzare il percorso di rendering critico. L’ultimo consiglio è molto importante: il lazy loading predefinito potrebbe comportare un ritardo nel rendering del testo, che può essere evitato con Font Loading API per determinati font, specificando una strategia di rendering e timeout personalizzata in base ai diversi contenuti della pagina.
Il problema del percorso di rendering critico
Sappiamo che il rendering delle pagine può essere in assoluto un fattore problematico per il sito – e sappiamo anche che Google destina uno specifico render budget a ogni sito indicizzato o da indicizzare – e i font possono complicare le cose: il browser deve decidere come gestire il processo per fornire all’utente il testo con il font personalizzato già prima che il carattere compaia in pagina.
Il cosiddetto percorso di rendering critico comincia quando il browser richiede il documento HTML e interpreta le informazioni riportate per costruire la pagina: è importante che già a questo punto i font necessari siano disponibili, perché altrimenti la macchina disegnerà il layout e altri contenuti sullo schermo senza inserire alcun pixel di testo, aspettando il caricamento dei font esterni.
Evitare il testo invisibile durante il caricamento
Bisogna dunque evitare che ci sia del testo invisibile durante il caricamento, ovvero il flash of invisible text, e cercare di mostrare immediatamente il contenuto agli utenti utilizzando un font di sistema, il flash of unstyled text. Un’altra Googler, Katie Hempenius, ci offre due strade per raggiungere l’obiettivo: un approccio semplice ma non supportato universalmente dai browser e un intervento più complesso, ma valido per tutti i brower.
- Usare font-display. Il primo metodo è l’uso di un API per specificare la strategia di visualizzazione dei caratteri: l’opzione swap indica al browser che il testo che utilizza questo font deve essere visualizzato immediatamente usando un carattere di sistema. Quando il carattere personalizzato è pronto, il carattere di sistema viene sostituito.
Come dicevamo, è un approccio semplice ma non universalmente supportato dai browser: ad esempio, Chrome e Firefox rispondono allo stesso modo (testo nascosto per un massimo di 3 secondi; se non ancora pronto, utilizza un font di sistema fino a quando il font non è pronto e scambia i caratteri), mentre Edge utilizza un font di sistema fino a quando il font non è pronto e Safari nasconde il testo fino a quando il carattere non è pronto.
- Attendere il caricamento dei font personalizzati. La seconda strategia prevede un lavoro più tecnico, suddiviso in tre passaggi:
- Non utilizzare un carattere personalizzato al caricamento della pagina iniziale, così il browser può visualizzare immediatamente il testo utilizzando un carattere di sistema.
- Rileva quando viene caricato il tuo font personalizzato (con un paio di righe di codice JavaScript, grazie alla libreria FontFaceObserver).
- Aggiorna lo stile della pagina per utilizzare il carattere personalizzato.
Per implementare queste azioni bisogna eseguire il refactoring del CSS per non utilizzare un carattere personalizzato al caricamento della pagina iniziale, e aggiungere uno script alla pagina che rilevi quando viene caricato il font personalizzato e quindi aggiorna lo stile della pagina. Per verificare se il test resta visibile durante il caricamento dei webfont si può usare lo strumento Lighthouse di Google.
