Best practice per i caratteri

Ottimizza i caratteri web per Core Web Vitals.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

  • Rendering del testo ritardato: se un carattere web non viene caricato, i browser in genere ritardano il rendering del testo. In molte situazioni, questo ritarda la visualizzazione del First Contentful Paint (FCP). In alcune situazioni, questo ritarda la visualizzazione della metrica Largest Contentful Paint (LCP).
  • Variazioni del layout: la pratica dello scambio dei caratteri ha il potenziale di causare variazioni del layout e, di conseguenza, ha un impatto sul Cumulative Layout Shift (CLS). Queste variazioni del layout si verificano quando un carattere web e il relativo carattere di riserva occupano quantità diverse di spazio sulla pagina.

Questo articolo è suddiviso in tre sezioni: caricamento dei caratteri, consegna dei caratteri e rendering dei caratteri. Ogni sezione spiega come funziona quel particolare aspetto del ciclo di vita dei caratteri e fornisce le best practice corrispondenti.

Caricamento dei caratteri in corso...

I caratteri sono in genere risorse importanti, perché 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 generalmente si basano sul caricamento dei caratteri il prima possibile. Presta particolare attenzione ai caratteri caricati da siti di terze parti, poiché il download di questi file dei caratteri richiede configurazioni di connessione separate.

Se non hai la certezza che i caratteri della tua pagina vengano richiesti in tempo, controlla la scheda Tempi nel riquadro Rete di Chrome DevTools per avere ulteriori informazioni.

Screenshot della scheda Tempi in DevTools

Comprendere @font-face

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

La dichiarazione @font-face è una parte essenziale dell'utilizzo di qualsiasi carattere web. Come minimo, dichiara il nome che verrà utilizzato per fare riferimento al carattere e indica la posizione del file del carattere corrispondente.

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

Un equivoco comune è che venga richiesto un carattere quando viene rilevata una dichiarazione @font-face. Questo non è vero. La dichiarazione @font-face da sola non attiva il download dei caratteri. Un carattere viene invece scaricato soltanto se vi fa riferimento lo stile utilizzato nella pagina. Ad esempio, come segue:

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

h1 {
  font-family: "Open Sans"
}

In altre parole, nell'esempio precedente, Open Sans verrà scaricato solo se la pagina contiene un elemento <h1>.

Pertanto, quando si pensa all'ottimizzazione dei caratteri, è importante considerare i fogli di stile tanto quanto i file dei caratteri stessi. La modifica dei contenuti o della pubblicazione dei fogli di stile può avere un impatto significativo sull'arrivo dei caratteri. Analogamente, la rimozione del CSS inutilizzato e la suddivisione dei fogli di stile può ridurre il numero di caratteri caricati da una pagina.

Dichiarazioni dei caratteri in linea

La maggior parte dei siti trarrebbe grande vantaggio dall'incorporamento delle dichiarazioni dei caratteri e di altri stili fondamentali nel <head> del documento principale anziché includerli in un foglio di stile esterno. In questo modo, il browser può rilevare più rapidamente le dichiarazioni dei 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'incorporamento di risorse CSS essenziali può essere una tecnica più avanzata che non tutti i siti sono in grado di utilizzare. I vantaggi in termini di prestazioni sono evidenti, ma richiedono procedure e strumenti di creazione aggiuntivi per garantire che necessariamente il CSS (e idealmente solo il CSS critico) sia incorporato correttamente e che qualsiasi CSS aggiuntivo venga pubblicato in modo che non blocchi la visualizzazione.

Precollegati a origini di terze parti critiche

Se il tuo sito carica i caratteri da un sito di terze parti, ti consigliamo vivamente di utilizzare il suggerimento della risorsa preconnect per stabilire connessioni in anticipo con l'origine di terze parti. I suggerimenti relativi alle risorse devono essere inseriti nel punto <head> del documento. Il suggerimento sulla risorsa riportato di seguito imposta una connessione per il caricamento del foglio di stile del carattere.

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

Per precollegare la connessione utilizzata per scaricare il file dei caratteri, aggiungi un suggerimento per le risorse preconnect separato che utilizzi l'attributo crossorigin. A differenza dei fogli di stile, i file dei 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 per la risorsa preconnect, tieni presente che un fornitore di caratteri potrebbe pubblicare fogli di stile e caratteri da origini separate. Ad esempio, questo è il modo in cui verrà utilizzato il suggerimento della risorsa 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 nel rendere rilevabili i caratteri nelle prime fasi del processo di caricamento della pagina, questo comporta la rimozione delle risorse del browser dal caricamento di altre risorse.

L'integrazione delle dichiarazioni dei caratteri e la regolazione dei fogli di stile possono essere un approccio più efficace. Queste modifiche si avvicinano di più alla causa principale dei caratteri scoperti successivamente, anziché limitarsi a fornire una soluzione alternativa.

Inoltre, l'uso di preload come strategia di caricamento dei caratteri deve essere usato con cautela, in quanto aggira alcune strategie incorporate di negoziazione dei contenuti nel browser. Ad esempio, preload ignora le dichiarazioni unicode-range e, se usato in modo prudente, deve essere utilizzato solo per caricare un singolo formato di carattere.

Tuttavia, quando utilizzi fogli di stile esterni, il precaricamento dei caratteri più importanti può essere molto efficace poiché il browser non riuscirà a scoprire se il carattere è necessario fino a molto tardi.

Pubblicazione dei caratteri

Una consegna più rapida dei caratteri permette un rendering del testo più rapido. Inoltre, l'invio anticipato di un carattere consente di eliminare le variazioni di layout derivanti dallo scambio dei caratteri.

Utilizzo di caratteri ospitati autonomamente

Sulla carta, l'utilizzo di un carattere self-hosted dovrebbe migliorare il rendimento, in quanto elimina la configurazione di una connessione di terze parti. In pratica, le differenze di rendimento tra queste due opzioni sono meno evidenti: ad esempio, l'Almanacco web ha rilevato che i siti che utilizzano caratteri di terze parti hanno un rendering più veloce rispetto a quelli con caratteri proprietari.

Se stai considerando l'uso di caratteri ospitati autonomamente, verifica che il tuo sito utilizzi una rete CDN (Content Delivery Network) e HTTP/2. Senza l'uso di queste tecnologie, è molto meno probabile che i caratteri ospitati autonomamente offrano un rendimento migliore. Per ulteriori informazioni, consulta la sezione Reti CDN (Content Delivery Network).

Se utilizzi un carattere ospitato autonomamente, è consigliabile applicare anche alcune delle ottimizzazioni dei file dei caratteri che i fornitori di caratteri di terze parti in genere forniscono automaticamente, ad esempio l'impostazione secondaria dei caratteri e la compressione WOFF2. L'impegno necessario per applicare queste ottimizzazioni dipende in qualche modo dalle lingue supportate dal tuo sito. In particolare, tieni presente che l'ottimizzazione dei caratteri per le lingue CJK può essere particolarmente impegnativa.

Usa 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 modo migliore rispetto a WOFF, riducendo il numero di dati da scaricare e, di conseguenza, le prestazioni più veloci.

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

In effetti, pensiamo che sia giunto il momento di proclamare: utilizzare solo WOFF2 e dimenticare tutto il resto.

Ciò semplificherà enormemente il tuo CSS e il tuo flusso di lavoro ed eviterà anche download accidentali di caratteri doppi o errati. Ora WOFF2 è supportato ovunque. Quindi, a meno che tu non abbia bisogno di supportare browser molto antichi, utilizza WOFF2. Se non è possibile, prendi in considerazione l'idea di non pubblicare alcun carattere web in quei browser meno recenti. Se hai implementato una solida strategia di riserva, questo non sarà un problema. I visitatori che utilizzano browser meno recenti vedranno semplicemente i tuoi caratteri di riserva.

Bram Stein, dall'Almanacco web del 2022

Caratteri del sottoinsieme

I file dei caratteri in genere includono un numero elevato di glifi per tutti i vari caratteri supportati. Tuttavia, potresti non aver bisogno di tutti i caratteri della pagina e puoi ridurre le dimensioni dei file dei caratteri creando un sottoinsieme di caratteri.

Il descrittore unicode-range nella dichiarazione @font-face indica al browser i caratteri per i quali è possibile utilizzare un carattere.

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

Se la pagina contiene uno o più caratteri corrispondenti all'intervallo Unicode, verrà scaricato un file del carattere. 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 di creazione di sottoinsiemi. Un carattere del sottoinsieme include una porzione più piccola dei glifi contenuti nel file del carattere originale. Ad esempio, anziché mostrare tutti i caratteri a tutti gli utenti, un sito potrebbe generare caratteri di sottoinsiemi separati per i caratteri latini e cirillici. Il numero di glifi per carattere varia molto: i caratteri latini hanno in genere 100-1000 glifi per carattere; i caratteri CJK possono avere più di 10.000 caratteri. La rimozione dei glifi inutilizzati può ridurre notevolmente le dimensioni dei file di un carattere.

Alcuni fornitori di caratteri potrebbero fornire automaticamente versioni diverse dei file dei caratteri con sottoinsiemi diversi. Ad esempio, Google Fonts esegue questa operazione 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, si tratta di un'ottimizzazione che può essere facilmente sfuggita e portare a file di caratteri più grandi a livello locale.

È anche possibile impostare manualmente un sottoinsieme di caratteri, se il fornitore dei caratteri lo consente, tramite un'API (Google Fonts supporta questa operazione fornendo un parametro text) oppure modificando manualmente i file dei caratteri e quindi ospitandoli in self-hosting. Gli strumenti per generare sottoinsiemi di caratteri includono subfont e glyphanger. Tuttavia, ti consigliamo di controllare la licenza per i caratteri che utilizzi per l'impostazione sottoinsiemi e l'hosting autonomo.

Usa 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 font di sistema è il carattere predefinito utilizzato dall'interfaccia utente del dispositivo di un utente. I caratteri del 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 molto bene per il corpo del testo.

Per utilizzare il carattere di sistema nel CSS, indica system-ui come famiglia di caratteri:

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, si potrebbe utilizzare un carattere variabile con l'asse Weight per implementare le lettere, che in precedenza richiedevano caratteri separati per caratteri chiari, regolari, in grassetto e in grassetto aggiuntivo.

Non tutti potranno trarre vantaggio dal passaggio ai caratteri variabili. I caratteri variabili contengono molti stili, quindi in genere hanno file di dimensioni maggiori rispetto ai singoli caratteri non variabili che contengono un solo stile. I siti che noteranno i maggiori miglioramenti derivanti dall'uso di caratteri variabili sono quelli che utilizzano (e devono utilizzare) diversi stili e spessori dei caratteri.

Rendering dei caratteri

Di fronte a un web font che non è ancora stato caricato, il browser si trova di fronte a un dilemma: dovrebbe aspettare sul rendering del testo fino a quando il web font non arriva? Oppure il testo deve essere visualizzato in un carattere di riserva fino all'arrivo del carattere web?

I diversi browser 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 viene 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 per influire su LCP, FCP e sulla stabilità del layout.

Scegli una strategia font-display adeguata

font-display indica al browser come deve procedere con il rendering del testo quando il carattere web associato non è stato caricato. Viene definito in base al tipo di carattere.

@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 Scambia periodo
Automatica Varia in base al browser. Varia in base al browser.
Blocca 2-3 secondi Infinito
Scambio 0ms Infinito
Fallback 100 ms 3 secondi
Facoltativo 100 ms 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 visualizzato in un carattere di riserva invisibile e quindi il testo non sarà visibile all'utente. Se al termine del periodo di blocco il carattere non è disponibile, verrà visualizzato nel carattere di riserva.
  • Periodo di scambio: il periodo di scambio ha luogo dopo il periodo di blocco. Se il carattere web diventa disponibile durante il periodo di scambio, verrà "sostituito".

Le strategie font-display riflettono punti di vista diversi sul compromesso tra prestazioni ed estetica. Di conseguenza, è difficile proporre un approccio consigliato poiché dipende dalle preferenze individuali, dall'importanza del carattere web per la pagina e il brand e da quanto possa essere scioccante un carattere che arriva in ritardo quando viene sostituito.

Per la maggior parte dei siti, le tre strategie più applicabili sono le seguenti:

  • Se il rendimento è una delle priorità: utilizza font-display: optional. Questo è l'approccio più "performante": il rendering del testo non viene ritardato per più di 100 ms e non ci saranno variazioni del layout relative allo scambio di caratteri. Tuttavia, il lato negativo è che il carattere web non viene utilizzato se arriva in ritardo.

  • Se la visualizzazione rapida del testo è una priorità assoluta, ma vuoi comunque assicurarti che venga utilizzato il carattere web: usa font-display: swap, ma assicurati di inviare il carattere con largo anticipo in modo che non causi una variazione del layout. Lo svantaggio di questa opzione è lo spostamento sgradevole quando il carattere arriva in ritardo.

  • Se la garanzia della visualizzazione del testo in un carattere web è una priorità assoluta: utilizza font-display: block, ma assicurati di inviare il carattere con sufficiente anticipo in modo da ridurre al minimo il ritardo del testo. Lo svantaggio di questo aspetto è che la visualizzazione iniziale del testo subirà ritardi. Tieni presente che, nonostante questa riduzione, può comunque causare una variazione del layout poiché il testo è in realtà disegnato invisibile e lo spazio per il carattere di riserva viene quindi utilizzato per prenotare lo spazio. Una volta caricato il carattere web, ciò potrebbe richiedere uno spazio diverso e quindi uno spostamento. Tuttavia, questo passaggio potrebbe essere meno sgradevole rispetto a font-display: swap, poiché il testo non risulterà spostato.

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

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

Per ridurre l'impatto del CLS, puoi utilizzare i nuovi attributi size-adjust. Per saperne di più, consulta l'articolo su CSS size-adjust. Si tratta di un'aggiunta molto recente al nostro set di strumenti, quindi al momento è più avanzata e un po' manuale. Ma sicuramente uno da sperimentare e da tenere d'occhio per i miglioramenti degli strumenti in futuro.

Conclusione

I caratteri web continuano a essere un collo di bottiglia in termini di prestazioni, ma abbiamo una gamma di opzioni in costante aumento che ci consente di ottimizzarli per ridurre il più possibile questo collo di bottiglia.