Best practice per i caratteri

Ottimizzare i caratteri web per i Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Questo documento illustra le best practice per il rendimento dei caratteri. Esistono diversi modi in cui i caratteri web influiscono sul rendimento:

Questo documento è suddiviso in tre sezioni: caricamento dei caratteri, pubblicazione dei caratteri e rendering dei caratteri. Ogni sezione spiega come funziona questo aspetto specifico del ciclo di vita dei caratteri e fornisce le best practice corrispondenti.

Caricamento dei caratteri

I caratteri sono risorse importanti. Senza di essi, l'utente potrebbe non essere in grado di visualizzare i contenuti della pagina. Pertanto, le best practice per il caricamento dei caratteri in genere si concentrano sul garantire che i caratteri vengano caricati il prima possibile. È necessario prestare particolare attenzione ai caratteri caricati da siti di terze parti, poiché il download di questi file di caratteri richiede configurazioni di connessione separate.

Se non sai se i caratteri della tua pagina vengono richiesti in tempo, consulta la scheda Timing nel riquadro Network di Chrome DevTools per ulteriori informazioni.

La scheda Timing in DevTools.

Informazioni su @font-face

Prima di approfondire le best practice per il caricamento dei caratteri, è importante capire come @font-face funziona e in che modo influisce sul caricamento dei caratteri.

La @font-face dichiarazione è una parte essenziale per lavorare con qualsiasi carattere web. Come minimo, dichiara il nome utilizzato per fare riferimento al carattere e indica la posizione del file di caratteri corrispondente.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

Un errore comune è che un carattere viene richiesto quando viene rilevata una dichiarazione @font-face. Questo è falso. Di per sé, la dichiarazione @font-face non attiva il download dei caratteri. Un carattere viene scaricato solo se viene fatto riferimento a uno stile utilizzato nella pagina. Ad esempio:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

In questo esempio, Open Sans verrà scaricato solo se la pagina contiene un <h1> elemento.

Pertanto, quando pensi all'ottimizzazione dei caratteri, è importante prestare la stessa attenzione ai fogli di stile e ai file di caratteri stessi. La modifica dei contenuti o della pubblicazione dei fogli di stile può avere un impatto significativo sul momento in cui arrivano i caratteri. Allo stesso modo, la rimozione del CSS inutilizzato e la suddivisione dei fogli di stile possono ridurre il numero di caratteri caricati da una pagina.

Dichiarazioni di caratteri in linea

La maggior parte dei siti trarrebbe un grande vantaggio dall'inserimento in linea delle dichiarazioni di caratteri e di altri stili critici nell'elemento <head> del documento principale anziché includerli in un foglio di stile esterno. In questo modo, il browser può scoprire prima le dichiarazioni di caratteri, poiché non deve attendere il download del foglio di stile esterno.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

L'inserimento in linea del CSS critico può essere una tecnica più avanzata che non tutti i siti possono raggiungere. I vantaggi in termini di rendimento sono chiari, ma richiede processi e strumenti di compilazione aggiuntivi per garantire che il CSS necessario, e idealmente solo il CSS critico, venga inserito in linea correttamente e che qualsiasi CSS aggiuntivo venga pubblicato in modo non bloccante per il rendering.

Preconnettersi alle origini di terze parti critiche

Se il tuo sito carica i caratteri da un sito di terze parti, ti consigliamo vivamente che tu utilizzi il preconnect suggerimento di risorse per stabilire connessioni anticipate con l'origine di terze parti. I suggerimenti di risorse devono essere inseriti nell'elemento <head> del documento. Il seguente suggerimento di risorse configura una connessione per il caricamento del foglio di stile dei caratteri.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Per preconnettere la connessione utilizzata per scaricare il file di caratteri, aggiungi un suggerimento di risorse preconnect separato che utilizzi l'attributo crossorigin. A differenza dei fogli di stile, i file di caratteri devono essere inviati tramite una connessione CORS.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

Quando utilizzi il suggerimento di risorse preconnect, tieni presente che un fornitore di caratteri potrebbe pubblicare fogli di stile e caratteri da origini separate. Ad esempio, ecco come verrebbe utilizzato il suggerimento di risorse preconnect per Google Fonts.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Fai attenzione quando utilizzi preload per caricare i caratteri

Sebbene preload sia molto efficace per rendere i caratteri rilevabili all'inizio del processo di caricamento pagina, questo comporta la sottrazione di risorse del browser dal caricamento di altre risorse.

L'inserimento in linea delle dichiarazioni di caratteri e la modifica dei fogli di stile potrebbero essere un approccio più efficace. Queste modifiche si avvicinano maggiormente alla risoluzione della causa principale dei caratteri rilevati in ritardo, anziché fornire solo una soluzione alternativa.

Inoltre, l'utilizzo di preload come strategia di caricamento dei caratteri deve essere utilizzato con cautela, in quanto ignora alcune delle strategie di negoziazione dei contenuti integrate del browser. Ad esempio, preload ignora le dichiarazioni unicode-range e, se utilizzato con prudenza, deve essere utilizzato solo per caricare un singolo formato di carattere.

Tuttavia, quando si utilizzano fogli di stile esterni, il precaricamento dei caratteri più importanti può essere molto efficace, poiché altrimenti il browser non rileverà se il carattere è necessario fino a molto tempo dopo.

Pubblicazione dei caratteri

Una pubblicazione più rapida dei caratteri comporta un rendering del testo più rapido. Inoltre, se un carattere viene pubblicato abbastanza presto, può contribuire a eliminare gli spostamenti del layout derivanti dalla sostituzione dei caratteri.

Utilizzare caratteri self-hosted

In teoria, l'utilizzo di un carattere self-hosted dovrebbe garantire un rendimento migliore, in quanto elimina la configurazione di una connessione di terze parti. In pratica, le differenze di rendimento tra queste due opzioni sono meno chiare. Ad esempio, il Web Almanac ha rilevato che i siti che utilizzano caratteri di terze parti hanno un rendering più rapido rispetto ai caratteri che utilizzano caratteri proprietari.

Se stai valutando di utilizzare caratteri self-hosted, verifica che il tuo sito utilizzi una rete CDN (Content Delivery Network) e HTTP/2. Senza l'utilizzo di queste tecnologie, è molto meno probabile che i caratteri self-hosted offrano un rendimento migliore.

Se utilizzi un carattere self-hosted, ti consigliamo di applicare anche alcune delle ottimizzazioni dei file di caratteri che i fornitori di caratteri di terze parti in genere forniscono automaticamente. Ad esempio, il subsetting dei caratteri e la compressione WOFF2. La quantità di lavoro necessaria per applicare queste ottimizzazioni dipende in parte dalle lingue supportate dal tuo sito. In particolare, tieni presente che l'ottimizzazione dei caratteri per le lingue CJK può essere particolarmente difficile.

Utilizzare WOFF2

Tra i caratteri moderni, WOFF2 è il più recente, ha il supporto del browser più ampio e offre la migliore compressione. Poiché utilizza Brotli, WOFF2 comprime il 30% in più rispetto a WOFF, il che comporta meno dati da scaricare e quindi un rendimento più rapido.

Dato il supporto del browser, gli esperti ora consigliano di utilizzare solo WOFF2:

In realtà, riteniamo che sia giunto il momento di dichiarare: utilizza solo WOFF2 e dimentica tutto il resto.

In questo modo semplificherai notevolmente il CSS e il flusso di lavoro, oltre a impedire download di caratteri doppi o errati accidentali. WOFF2 è ora supportato ovunque. Quindi, a meno che tu non debba supportare browser davvero obsoleti, utilizza solo WOFF2. Se non puoi, valuta la possibilità di non pubblicare alcun carattere web su questi browser meno recenti. Questo non sarà un problema se hai una strategia di riserva efficace. I visitatori che utilizzano browser meno recenti vedranno i tuoi caratteri di riserva.

Bram Stein, dal Web Almanac 2022

Sottoinsieme di caratteri

I file di caratteri in genere includono un numero elevato di glifi per tutti i vari caratteri che supportano. Tuttavia, potresti non aver bisogno di tutti i caratteri della pagina e puoi ridurre le dimensioni dei file di caratteri eseguendo il subsetting dei caratteri.

Il unicode-range descrittore nella dichiarazione @font-face indica al browser per quali caratteri può essere utilizzato un carattere.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Un file di caratteri viene scaricato se la pagina contiene uno o più caratteri che corrispondono all'intervallo Unicode. unicode-range viene comunemente utilizzato per pubblicare file di caratteri diversi a seconda della lingua utilizzata dai contenuti della pagina.

unicode-range viene spesso utilizzato in combinazione con la tecnica del subsetting. Un carattere di sottoinsieme include una porzione più piccola dei glifi contenuti nel file di caratteri originale. Ad esempio, anziché pubblicare tutti i caratteri per tutti gli utenti, un sito potrebbe generare caratteri di sottoinsieme separati per i caratteri latini e cirillici.

Il numero di glifi per carattere varia notevolmente:

  • I caratteri latini in genere hanno una quantità di glifi compresa tra 100 e 1000 per carattere.
  • I caratteri CJK possono avere più di 10.000 caratteri.

La rimozione dei glifi inutilizzati può ridurre significativamente le dimensioni del file di un carattere.

Alcuni fornitori di caratteri potrebbero fornire automaticamente versioni diverse dei file di caratteri con sottoinsiemi diversi. Ad esempio, Google Fonts lo fa per impostazione predefinita:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Quando si passa all'hosting autonomo, questa è un'ottimizzazione che può essere persa e portare a file di caratteri più grandi in locale.

Puoi eseguire manualmente il subsetting dei caratteri se il tuo fornitore di caratteri lo consente, tramite un' API (Google Fonts lo supporta fornendo un parametro text), o modificando manualmente i file di caratteri e poi eseguendo l'hosting autonomo. Gli strumenti per generare sottoinsiemi di caratteri includono subfont e glyphanger.

Controlla sempre le licenze dei caratteri per verificare se consentono il subsetting e l'hosting autonomo.

Utilizzare meno caratteri web

Il carattere più veloce da pubblicare è quello che non viene richiesto. I caratteri di sistema e i caratteri variabili sono due modi per ridurre potenzialmente il numero di caratteri web utilizzati sul tuo sito.

Un carattere di sistema è il carattere predefinito utilizzato dall'interfaccia utente del dispositivo di un utente. I caratteri di sistema in genere variano in base al sistema operativo e alla versione. Poiché il carattere è già installato, non è necessario scaricarlo. I caratteri di sistema possono funzionare particolarmente bene per il testo del corpo.

Per utilizzare il carattere di sistema nel CSS, elenca system-ui come font-family:

font-family: system-ui

L'idea alla base dei caratteri variabili è che un singolo carattere variabile può essere utilizzato in sostituzione di più file di caratteri. I caratteri variabili funzionano definendo uno stile di carattere "predefinito" e fornendo "assi" per manipolare il carattere. Ad esempio, un carattere variabile con un asse Weight potrebbe essere utilizzato per implementare una scritta che in precedenza richiedeva caratteri separati per light, regular, bold ed extra bold.

Non tutti traggono vantaggio dal passaggio ai caratteri variabili. I caratteri variabili contengono molti stili, quindi in genere hanno dimensioni dei file maggiori rispetto ai singoli caratteri non variabili che contengono un solo stile. I siti che vedranno il miglioramento maggiore dall'utilizzo di caratteri variabili sono quelli che utilizzano (e devono utilizzare) una varietà di stili e spessori di caratteri.

Rendering dei caratteri

Quando si trova di fronte a un carattere web che non è ancora stato caricato, il browser si trova di fronte a un dilemma: deve ritardare il rendering del testo fino all'arrivo del carattere web? Oppure deve eseguire il rendering del testo in un carattere di riserva fino all'arrivo del carattere web?

Browser diversi gestiscono questo scenario in modo diverso. Per impostazione predefinita, i browser basati su Chromium e Firefox bloccano il rendering del testo per un massimo di 3 secondi se il carattere web associato non è stato caricato. Safari blocca il rendering del testo a tempo indeterminato.

Questo comportamento può essere configurato utilizzando l'attributo font-display. Questa scelta può avere implicazioni significative: font-display ha il potenziale di influire su LCP, FCP e stabilità del layout.

Scegliere una strategia font-display appropriata

font-display indica al browser come procedere con il rendering del testo quando il carattere web associato non è stato caricato. È definito per ogni font-face.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

Esistono cinque valori possibili per font-display:

Valore Periodo di blocco Periodo di scambio
Auto Varia in base al browser Varia in base al browser
Block 2-3 secondi Infinito
Swap 0ms Infinito
Fallback 100ms 3 secondi
Optional 100ms Nessuno
  • Periodo di blocco: il periodo di blocco inizia quando il browser richiede un carattere web. Durante il periodo di blocco, se il carattere web non è disponibile, il carattere viene sottoposto a rendering in un carattere di riserva invisibile e quindi il testo è invisibile all'utente. Se il carattere non è disponibile alla fine del periodo di blocco, viene sottoposto a rendering nel carattere di riserva.
  • Periodo di scambio: il periodo di scambio viene dopo il periodo di blocco. Se il carattere web diventa disponibile durante il periodo di scambio, viene "scambiato".

Le strategie font-display riflettono punti di vista diversi sul compromesso tra rendimento ed estetica. Pertanto, è difficile consigliare un approccio, in quanto dipende dalle preferenze individuali, dall'importanza del carattere web per la pagina e il brand e da quanto può essere fastidioso un carattere che arriva in ritardo quando viene scambiato.

Per la maggior parte dei siti, queste sono le tre strategie più applicabili, in base alla priorità principale:

  • Rendimento: utilizza font-display: optional. Questo è l'approccio più "performante": il rendering del testo viene ritardato per non più di 100 ms e non si verificano spostamenti del layout correlati allo scambio di caratteri. Lo svantaggio è che il carattere web non verrà utilizzato se arriva in ritardo.

  • Visualizzare rapidamente il testo e utilizzare comunque un carattere web: utilizza font-display: swap ma assicurati di pubblicare il carattere abbastanza presto da non causare uno spostamento del layout. Lo svantaggio di questa opzione è lo spostamento fastidioso quando il carattere arriva in ritardo.

  • Il testo viene visualizzato in un carattere web: utilizza font-display: block, ma assicurati di pubblicare il carattere abbastanza presto da ridurre al minimo il ritardo del testo. La visualizzazione iniziale del testo viene ritardata. Nonostante questo ritardo, può comunque causare uno spostamento del layout, poiché il testo viene effettivamente disegnato in modo invisibile e lo spazio del carattere di riserva viene quindi utilizzato per riservare lo spazio. Una volta caricato il carattere web, potrebbe essere necessario uno spazio diverso, quindi uno spostamento. Questo potrebbe essere uno spostamento meno fastidioso di font-display: swap, poiché il testo stesso non verrà spostato.

Tieni presente che questi due approcci possono essere combinati: ad esempio, utilizza font-display: swap per il branding e altri elementi della pagina visivamente distintivi. Utilizza font-display: optional per i caratteri utilizzati nel testo del corpo.

Caratteri "icona"

Le strategie font-display che funzionano bene per i caratteri web convenzionali non funzionano altrettanto bene per i caratteri "icona". Il carattere di riserva per un carattere "icona" in genere ha un aspetto molto diverso dal carattere "icona" e i relativi caratteri possono trasmettere un significato completamente diverso. Di conseguenza, è più probabile che i caratteri "icona" causino spostamenti significativi del layout.

Inoltre, l'utilizzo di un carattere di riserva potrebbe non essere pratico. Quando possibile, sostituisci i caratteri "icona" con SVG, che è anche migliore per l'accessibilità. Le versioni più recenti dei caratteri "icona" più diffusi in genere supportano SVG. Per ulteriori informazioni sul passaggio a SVG, consulta la pagina di Font Awesome su SVG Sprites e la nostra Guida alle icone Material.

Ridurre lo spostamento tra il carattere di riserva e il carattere web

Per ridurre l'impatto del CLS, puoi utilizzare gli size-adjust attributi.

Conclusione

I caratteri web sono ancora un collo di bottiglia per il rendimento, ma abbiamo una gamma di opzioni in continua crescita che ci consente di ottimizzarli per ridurre al minimo questo collo di bottiglia.