Risolvere "Ensure text remains visible during webfont load" in Lighthouse.

Assicurati che il testo rimanga visibile durante il caricamento dei webfont

Prima che esistessero i webfont, i web designer erano limitati a un piccolo numero di font preinstallati. I webfont ti danno la libertà di utilizzare qualsiasi font su un sito web. 

Ovviamente sembra interessante, ma i webfont hanno anche i loro svantaggi; rallentano la velocità di caricamento della pagina in diversi modi.

I webfont sono solitamente file di grandi dimensioni che non sono installati su un computer di default. Quindi i webfont devono essere scaricati prima di poter essere utilizzati. Durante il download di un webfont, il testo di una pagina web viene temporaneamente nascosto fino a quando il webfont non è stato caricato completamente. Questo crea una scarsa user experience; nessuno vuole fissare uno schermo vuoto troppo a lungo.

Non appena il webfont è caricato e renderizzato, il browser sostituisce il "testo invisibile" con il testo finale con il nuovo webfont. Questo momento è chiamato Flash of Invisible Text (FOIT). Questo FOIT è ciò che causa la comparsa del messaggio di errore "Ensure text remains visible during webfont load"..

Stai caricando un webfont sulla tua pagina senza prendere precauzioni per prevenire questo Flash of Invisible Text? Mentre analizzi il PageSpeed su Lighthouse, apparirà il seguente messaggio: "Ensure text remains visible during webfont load". Questo ti indica quanto tempo potresti risparmiare rendendo il testo visibile prima che il webfont sia caricato. Per un singolo font, questo è facilmente 100ms.

Perché il testo invisibile è dannoso per la velocità della pagina?

Il testo invisibile non rallenta realmente il tempo di caricamento finale misurato di una pagina. Quindi perché Lighthouse lo considera un problema così grave? 

Google ritiene importante che una pagina web offra la migliore user experience possibile. La user experience può essere migliorata mostrando il contenuto sulla pagina il più velocemente possibile. Confronta le due versioni filmstrip della nostra homepage qui sotto:

Flash of Invisible Text

Nessun Flash of Invisible Text con display:swap

Come puoi vedere, le due pagine hanno finito di caricarsi esattamente nello stesso momento. Tuttavia, l'ultima versione del sito web appare molto meglio ai visitatori. I visitatori possono iniziare a leggere immediatamente.

Ecco perché è intelligente mostrare il testo comunque - non nel font finale, ma in un font "fallback". In questo modo il visitatore pensa che la tua pagina si carichi davvero super velocemente.

Un breve promemoria: FOIT e FOUT

Prima di proseguire, è utile distinguere i seguenti concetti: FOIT e FOUT. FOIT sta per Flash of Invisible Text e si verifica quando i webfont non sono visibili durante il caricamento. Puoi mitigare questo problema includendo un font fallback. Quando il font fallback viene sostituito dal webfont, si chiama FOUT, Flash of Unstyled Text.

Rendere i webfont visibili durante il caricamento

Ci sono due modi per rendere i webfont visibili durante il caricamento: il primo è tramite il valore CSS font-display; il secondo è utilizzando un font fallback tramite una classe. Entrambi i metodi hanno vantaggi e svantaggi, che discuterò di seguito.

Metodo 1: Font-display:swap

Font-display è un descrittore CSS disponibile in tutti i browser moderni. Il descrittore font-display determina come un font viene visualizzato in base al fatto che sia stato scaricato o meno. Font-display viene utilizzato in una regola @font-face. 

Esistono diversi valori di font-display: block, swap, fallback e optional. Usa il valore swap per evitare il FOIT e per far apparire il testo sullo schermo il più velocemente possibile. 

Una volta impostato il valore font-display: swap nella regola @font-face, vengono utilizzati i font predefiniti del sistema durante il caricamento della pagina fino a quando i webfont non sono stati caricati. Questo aiuta il visitatore a leggere immediatamente il testo sulla pagina.

Google fonts

Quando utilizzi Google fonts, puoi usare il metodo font-display: swap con un semplice "&display=swap" nel foglio di stile o nel codice di incorporamento.  

<!-- via een extern stylesheet -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via de import methode -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

A proposito, non siamo fan di Google fonts. È quasi sempre molto più veloce ospitare i webfont da soli. Ti dà più controllo sul processo di "preloading" dei font. Puoi utilizzare la connessione http/2 già esistente e non devi scaricare un foglio di stile extra.

Font locali

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 
}

Metodo 2: Font con una classe

Il secondo modo per rendere i font visibili durante il caricamento è lavorare con le classi. Queste classi vengono solitamente (ma non sempre) aggiunte all'elemento <body> o <html>.

Il vantaggio di questo metodo è che hai più controllo sul font fallback e sulla tempistica del Flash of Unstyled Text.

Questo metodo funziona così: indica nel tuo foglio di stile che una pagina dovrebbe essere inizialmente renderizzata con un font (il font fallback). Poi carichi il webfont tramite la JavaScript FontFace API o tramite preloading. Dopo che questo font è stato caricato, aggiungi una classe alla tua pagina. La classe assicura che il webfont venga attivato.

Perché dovresti farlo, potresti chiederti? Lo fai per avere più controllo sul font fallback. Puoi visualizzare il font fallback con un'interlinea maggiore o una dimensione diversa in modo che corrisponda meglio al webfont. Questo previene i layout shift.

Quando utilizzi più webfont, puoi usare il metodo FontFace API per cambiare tutti i font contemporaneamente. Questo risparmia molti repaint del browser. Personalmente non sono un fan di questo metodo; assicura che il FOUT avvenga dopo che l'ultimo font è stato caricato. Quindi è sempre più tardi del necessario.

Font con una classe tramite la FontFace API:

<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Tramite un link preload

Il secondo metodo è tramite un link preload. Effettua il preload del font come descritto di seguito. Una volta fatto, cambia la classe dell'elemento <html>.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //fallback font met een .9rem font-size
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //webfont font met een 1rem font-size
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, wordt pas geactiveerd zodra de .fl class wordt toegevoegd aan de html tag
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Consigli e trucchi extra

1.    Effettua sempre il preload dei https://www.corewebvitals.io/nl/pagespeed/ensure-text-remains-visible-during-web font-load? font visibili. I font non vengono scaricati di default finché un font non viene utilizzato. Sei sicuro di aver bisogno di un webfont? In tal caso, effettua il preload così è disponibile prima.
2. Vuoi evitare completamente FOIT e FOUT? Usa font-display: optional in combinazione con il preloading.
3. Ospitare i webfont da soli è sempre più veloce dei webfont tramite Google fonts o un altro CDN esterno.