Strategie per ottimizzare il caricamento dei font sul proprio sito

| Web Performance

Font Load: Strategie per ottimizzare il caricamento dei font sul proprio sito web - Mirko Ciesco

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.

Tipologie di font - Mirko Ciesco

Preferisci consultare il video del mio intervento?

Guarda il video

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 Google Font:

<link href=”https://fonts.googleapis.com/css?family=Raleway” 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.

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.

Ottimizzare il percorso di rendering critico - Mirko Ciesco

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.

Per approfondire: come integrare un font in un Performance Budget

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. Un primo problema di caricamento potrebbe essere 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.

Il FOIT (Flash of Invisible Text) si presenta quando nella gestione del percorso di rendering il browser tiene nascosto il web font 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:

Animazione foit fout - Mirko Ciesco

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).

Possibili strategie di Font Load

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.

Font Load: Strategie per ottimizzare il caricamento dei font sul proprio sito web - Mirko Ciesco

Vuoi il materiale informativo con supporti grafici e i report della mia ricerca?

Scarica le slide

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)

DNS Prefetch e Preload

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 il seguente codice:

<link rel=”dns-prefetch” 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.

Font-display

Con font-display puoi personalizzare la tua strategia di rendering e ovviare ai problemi di caricamento dei web font 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?

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.

Analizza i dati della mia ricerca

Come vedi, ci sono accorgimenti e strategie specifici che puoi attuare per trasformare un sito normale in sito web performante.

Ascolta ulteriori chicche e approfondimenti discussi al “Turin Web Performance Group“.

Guarda il video

Mirko Ciesco

Mirko Ciesco

Web Performer

Sviluppatore web esperto in web performance. Realizza siti web, ottimizza la SEO tecnica e migliora l’usabilità dei siti internet attraverso la web analytics. Collabora con Studio Samo e tiene corsi di web design in Novel Academy a Torino.