Evita testo invisibile durante il caricamento dei caratteri

Katie Hempenius

Barry Pollard

Perché dovrebbe interessarti?

I caratteri sono spesso file di grandi dimensioni che richiedono un po' di tempo per essere caricati. Per risolvere questo problema, alcuni browser nascondono il testo fino a quando questo non viene caricato (il "lampo di testo invisibile").

La metrica LCP (Largest Contentful Paint) 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 più comuni:

Visualizza subito il testo

Questa guida illustra due modi per visualizzare il testo il prima possibile: il primo è semplice e ha un buon supporto del browser. Il secondo approccio è approfondito, ma potrebbe offrirti altre opzioni. La scelta migliore per il tuo sito web dipende dai tuoi requisiti.

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 utilizzando un carattere di sistema. Quando il carattere personalizzato è pronto, il carattere di sistema viene sostituito.

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

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

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

Opzione 2: attendi di utilizzare i caratteri personalizzati finché non vengono caricati

Con un po' più di lavoro possiamo prendere in considerazione un approccio più personalizzato.

Questo approccio si compone di tre parti:

• Non utilizzare un carattere personalizzato al caricamento iniziale della pagina eseguendo il refactoring del CSS in modo che non utilizzi inizialmente caratteri personalizzati. In questo modo ti assicuri che il browser visualizzi immediatamente il testo utilizzando un carattere di sistema.
• Rileva quando il tuo carattere personalizzato viene caricato utilizzando 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
});

A questo scopo, puoi utilizzare anche la libreria FontFaceObserver, che alcuni trovano un'API più semplice da usare.

Ciò porta a una serie di considerazioni aggiuntive quando si caricano i caratteri. Ad esempio, tutti i caratteri possono essere caricati contemporaneamente, evitando diversi layout per ogni carattere caricato. 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 stia utilizzando 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. Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
4. Fai clic sul pulsante Genera report.

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