Evita testo invisibile durante il caricamento dei caratteri

Katie Hempenius

Barry Pollard

Perché dovrebbe interessarti?

I caratteri sono spesso file di grandi dimensioni il cui caricamento richiede un po' di tempo. Per evitare questo problema, alcuni browser nascondono il testo fino al caricamento del carattere (il "lampo di testo invisibile").

La Largest Contentful Paint (LCP) può subire ritardi in attesa del rendering del testo. Se ottimizzi per il rendimento, ti consigliamo di evitare il "lampo di testo invisibile" (FOIT) e di mostrare immediatamente i contenuti agli utenti utilizzando un carattere di sistema, che crea un "lampo di testo senza stile" (FOUT).

Impostazioni predefinite del browser per la visualizzazione dei caratteri

Di seguito sono riportati i comportamenti predefiniti di caricamento dei caratteri per i browser comuni:

Mostra subito il testo

Questa guida illustra due modi per visualizzare del testo il prima possibile: il primo approccio è semplice e ha un buon supporto del browser. Il secondo approccio è approfondito, ma potrebbe offrire più opzioni. La scelta migliore per il tuo sito web dipende dalle tue esigenze.

Opzione 1: utilizza font-display

font-display è un'API che consente di specificare la strategia di visualizzazione dei caratteri. swap indica al browser che il testo che utilizza questo carattere deve essere visualizzato immediatamente con un carattere di sistema. Quando il carattere personalizzato è pronto, il carattere di sistema viene scambiato.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

Se un browser non supporta font-display, sebbene tutti i browser moderni lo facciano, il browser continuerà a seguire il comportamento predefinito per il caricamento dei caratteri.

Opzione 2: attendi di utilizzare caratteri personalizzati fino al loro caricamento

Con un po' più di lavoro, è possibile prendere in considerazione un approccio più personalizzato.

Questo approccio si compone di tre parti:

• Non usare un carattere personalizzato al caricamento iniziale della pagina modificando il codice CSS in modo da non utilizzare inizialmente caratteri personalizzati. In questo modo il browser visualizza immediatamente il testo utilizzando un carattere di sistema.
• Rileva il caricamento del carattere personalizzato mediante l'API CSS Font Upload
• Aggiorna lo stile della pagina per utilizzare il carattere personalizzato.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

Questo può essere ottenuto anche con la libreria FontFaceObserver, che alcuni trovano un'API più semplice da utilizzare.

Ciò consente una serie di considerazioni aggiuntive per il caricamento dei caratteri. Ad esempio, tutti i caratteri possono essere caricati contemporaneamente, evitando diversi layout al caricamento di ciascun carattere. Oppure i siti potrebbero scegliere di non caricare i caratteri per gli utenti con connessioni più lente o per quelli che utilizzano l'opzione Salva dati.

Verifica

Esegui Lighthouse per verificare che il sito utilizzi font-display: swap per visualizzare il testo:

1. Premi Ctrl+Maiusc+J (o Comando+Opzione+J su Mac) per aprire DevTools.
2. Fai clic sulla scheda Lighthouse.
3. Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
4. Fai clic sul pulsante Genera report.

Verifica che il controllo Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web venga superato.