Migliorare FCP mostrando i font in modalità swap

Se hai mai analizzato il tuo sito web tramite Lighthouse o Google PageSpeed Insight, potresti aver visualizzato l'errore "Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web".

Questo errore è comunemente identificato come Flash Of Invisible Text (FOIT). In questo articolo vedremo come risolverlo!

L'errore FOIT

Uno dei principali problemi derivanti dal caricamento dei font utilizzando la regola @font-face, è l'aumento del tempo di caricamento. Quando il browser rileva un font applicato a un testo, attende che il questo venga scaricato. Fino a quel momento il testo sarà invisibile.

Dunque, il testo a cui viene applicato il font in questione, impiega più tempo del solito a comparire sulla pagina, e questo danneggia sia la User Experience sia il valore di First Contentful Paint del tuo sito.

Non vogliamo che i nostri utenti attendano per un contenuto che di fatto è già disponibile, ma non è visibile ai loro occhi.

Come risolvere: FOIT vs FOUT

Per fortuna, esiste una soluzione molto semplice per superare questo problema. E può essere ottenuta aggiungendo semplicemente una riga al tuo codice CSS. 

Ora applichiamo una tecnica chiamata " Flash of Unformatted Text" o semplicemente FOUT per mitigare questo problema. Questo ci permette di visualizzare il testo nel momento in cui è pronto nel DOM, con un font nativo di sistema come fallback prima che il font personalizzato venga caricato.

All'interno della regola @font-face ci viene data la possibilità di inserire la proprietà chiamata font-display. Il valore che vogliamo per questa proprietà è quello di swap . Cioè font-display: swap.

font-display: swap indica al browser di utilizzare il carattere nativo di fallback fino a quando il font non è stato scaricato. Dopodiché scambia il carattere corrente con il carattere personalizzato.

Il codice si presenta così:

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/path/to/Montserrat.woff') format('woff2');
}
Correzione per Google Fonts

Google per facilitare gli sviluppatori a seguire le linee guida, fornisce i suoi font in modalità swap di default. Dovrai solamente assicurarti che il codice da utilizzare si mostri così:

Caricare-Google-Font-in-modalità-Swap
Correzione su Oxygen Builder

Se stai utilizzando Oxygen, probabilmente stai utilizzando anche i Google Fonts messi a disposizione. In questo caso non dovrai occuparti di nulla perché, come detto in precedenza, i caratteri vengono caricati in modalità swap di default da Google.

Se invece utilizzi dei caratteri personalizzati, dovrai assicurarti di aggiungere il codice CSS alla dichiarazione del @font-face.

Correzione su WordPress

Potrebbero esserci altri font come font-awesome o font di icone che vengono iniettati da plugin o temi stessi.

Sfortunatamente, non esiste un modo semplice o un plugin per risolvere questo problema. L'unico modo è andare su Plugin ➡️ Editor plugin e selezionare il plugin che sta iniettando il carattere (analizza il tuo sito tramite Google PageSpeed ​​Insights).

Quindi trova il file css che contiene il codice @font-face e aggiungi font-display: swap al suo interno.

Utilizza il plugin String Locator per trovare tutti i file che contengono "@font-face".

Un miglioramento: FOUT vs FOFT

Come avrete notato, la tecnica FOUT non garantisce una soluzione definitiva al problema. È vero che l'errore dato da Google viene eliminato, ma continuiamo ad avere un problema di User Experience: il testo per qualche istante viene visualizzato con un font non corretto (quello di fallback).

La tecnica FOFT (Flash Of Faux Text) punta a ridurre il tempo che intercorre tra font nativo di fallback e font personalizzato attraverso un sistema di priorità.

Crea un priorità per il tuo font: carica prima solo il tuo carattere normale, e in seguito verranno caricati i vari pesi e stili.

Puoi leggere più nel dettaglio questa tecnica nell'articolo di Zach Leatherman.

Conclusione

Queste semplici correzioni offrono una User Experience molto migliore agli utenti, soprattutto se questi si trovano su dispositivi mobili con una rete lenta. 

Ecco perché anche strumenti come Google PageSpeed ​​Insights lo consigliano!

menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram