Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web

I caratteri sono spesso file di grandi dimensioni con tempi di caricamento lenti. Alcuni browser nascondono il testo fino al caricamento del carattere, provocando un lampo di testo invisibile (FOIT).

Come viene visualizzato il controllo di visualizzazione dei caratteri di Lighthouse

Lighthouse segnala qualsiasi URL di caratteri che potrebbe far lampeggiare testo invisibile:

Uno screenshot del controllo Assicurati che il testo rimanga visibile durante il caricamento dei caratteri web di Lighthouse

Come evitare di mostrare testo invisibile

L'API font-display indica come viene visualizzato un carattere quando viene utilizzato all'interno di uno stile font-face. I seguenti valori font-display indicano al browser di utilizzare un carattere di sistema se il carattere personalizzato non è pronto:

  • swap
  • optional
  • fallback

Esempio CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Esempio di caratteri Google

Aggiungi il parametro &display=swap/&display=optional/&display=fallback alla fine dell'URL di Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Come evitare variazioni di layout causate dai caratteri differiti

La visualizzazione temporanea di un carattere di sistema sostituirà un FOIT con un lampo di testo senza stile (FOUT). In questo modo FCP&LCP migliora grazie al rendering dei contenuti prima ma FOIT e FOUT avranno lo stesso impatto su CLS quando il carattere personalizzato sostituisce il carattere temporaneo del sistema.

L'impatto del caricamento dei caratteri sul CLS può essere mitigato utilizzando i precaricamenti in combinazione con font-display: optional. Tuttavia, l'uso eccessivo dei precarichi può influire negativamente sulle metriche di caricamento. Ti consigliamo di eseguire test A/B per assicurarti che il precaricamento dei caratteri non introduca regressioni delle prestazioni.

Indicazioni specifiche per lo stack

Drupal

Specifica @font-display durante la definizione dei caratteri personalizzati per il tuo tema.

Magento

Specifica @font-display quando definisci caratteri personalizzati.

Risorse