Questa pagina è stata tradotta dall'API Cloud Translation.

Best practice per i caratteri

Ottimizza i caratteri web per Core Web Vitals.

Katie Hempenius

Barry Pollard

Questo documento illustra le best practice per le prestazioni dei caratteri. Esistono diversi modi in cui i caratteri web influiscono sulle prestazioni:

Rendering del testo ritardato:se un carattere web non è stato caricato, in genere i browser ritardano il rendering del testo. In molte situazioni, questo ritarda First Contentful Paint (FCP). In alcuni casi, questo ritarda la metrica Largest Contentful Paint (LCP).
Variazioni del layout:la pratica dello scambio dei caratteri ha il potenziale di causare variazioni del layout e incidere sul Cumulative Layout Shift (CLS). Queste variazioni di layout si verificano quando un carattere web e il suo carattere di riserva occupano spazio diverso nella pagina.

Questo documento è composto da tre sezioni: caricamento dei caratteri, pubblicazione dei caratteri e rendering dei caratteri. Ogni sezione spiega come funziona quel determinato aspetto del ciclo di vita dei caratteri e fornisce le best practice corrispondenti.

Caricamento del carattere in corso...

I caratteri sono risorse importanti. In caso contrario, 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 sull'assicurarsi che i caratteri vengano caricati il prima possibile. È necessario prestare particolare attenzione ai caratteri caricati da siti di terze parti, in quanto il download di questi file richiede configurazioni di connessione separate.

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

La scheda Tempi in DevTools.

Informazioni su `@font-face`

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

La dichiarazione @font-face è una parte essenziale del funzionamento con qualsiasi carattere web. Almeno, deve dichiarare il nome utilizzato per fare riferimento al carattere e indicare 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 un carattere viene richiesto quando viene rilevata una dichiarazione @font-face. Questo è falso. La dichiarazione @font-face non attiva da sola il download dei caratteri. Un carattere viene scaricato solo se viene fatto riferimento allo 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 viene scaricato solo se la pagina contiene un elemento <h1>.

Pertanto, quando pensi all'ottimizzazione dei caratteri, è importante dare la stessa considerazione alle stylesheet come ai file dei caratteri stessi. La modifica dei contenuti o del caricamento dei fogli di stile può avere un impatto significativo sulla data di 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 grandi vantaggi dall'inserimento in linea delle dichiarazioni dei caratteri e di altri stili critici nel <head> del documento principale anziché includerli in un foglio di stile esterno. In questo modo il browser può rilevare prima le dichiarazioni dei caratteri, in quanto 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 fondamentale può essere una tecnica più avanzata che non tutti i siti possono implementare. I vantaggi in termini di prestazioni sono evidenti, ma richiedono processi e strumenti di compilazione aggiuntivi per garantire che il CSS necessario, e idealmente solo il CSS critico, sia incorporato correttamente e che qualsiasi CSS aggiuntivo venga caricato in modo da non bloccare il rendering.

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 preconnect suggerimento della risorsa per stabilire connessioni anticipate con l'origine di terze parti. I suggerimenti sulle risorse devono essere inseriti nel <head> del documento. Il seguente indicazione della risorsa configura una connessione per il caricamento del foglio di stile dei caratteri.

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

Per precollegare la connessione utilizzata per scaricare il file del carattere, aggiungi un hint di risorsa preconnect separato che utilizza 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 l'indicazione della risorsa preconnect, tieni presente che un fornitore di caratteri può caricare fogli di stile e caratteri da origini distinte. Ad esempio, questo è come 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 i caratteri rilevabili all'inizio del processo di caricamento della pagina, questo comporta il prelievo delle risorse del browser dal caricamento di altre risorse.

L'inserimento in linea delle dichiarazioni dei caratteri e la modifica degli stili di fogli potrebbe essere un approccio più efficace. Questi aggiustamenti si avvicinano alla causa principale dei caratteri scoperti in ritardo, anziché fornire solo una soluzione alternativa.

Inoltre, l'utilizzo di preload come strategia di caricamento dei caratteri deve essere usato con cautela, in quanto permette di bypassare alcune delle strategie di negoziazione dei contenuti integrate nel browser. Ad esempio, preload ignora le dichiarazioni unicode-range e, se usato con cautela, 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 scoprirà se il carattere è necessario fino a molto tempo dopo.

Caricamento dei caratteri

Un'importazione più rapida dei caratteri consente di ottenere un rendering del testo più rapido. Inoltre, se un carattere viene caricato in anticipo, può contribuire a eliminare i cambiamenti di layout dovuti al cambio di carattere.

Utilizzare caratteri ospitati autonomamente

Sulla carta, l'utilizzo di un carattere auto-ospitato dovrebbe offrire 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 nette. Ad esempio, il Web Almanac ha rilevato che i siti che utilizzano caratteri di terze parti hanno un rendering più rapido rispetto a quelli che utilizzano caratteri di proprietà.

Se stai prendendo in considerazione l'utilizzo dei caratteri ospitati autonomamente, 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 ospitati autonomamente offrano prestazioni migliori.

Se utilizzi un carattere ospitato autonomamente, ti consigliamo di applicare anche alcune delle ottimizzazioni dei file dei caratteri che i fornitori di caratteri di terze parti in genere forniscono automaticamente. Ad esempio, creazione di sottoinsiemi di caratteri e compressione WOFF2. L'impegno richiesto 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 complessa.

Utilizzare WOFF2

Tra i caratteri moderni, WOFF2 è il più recente, supporta la maggior parte dei browser e offre la migliore compressione. Poiché utilizza Brotli, WOFF2 offre una compressione migliore del 30% rispetto a WOFF, il che comporta meno dati da scaricare e quindi prestazioni più rapide.

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

In effetti, riteniamo che sia anche giunto il momento di proclamare: utilizza solo WOFF2 e dimentica tutto il resto.

In questo modo, semplificherai notevolmente il CSS e il flusso di lavoro e impedirai anche i download accidentali di caratteri doppi o errati. WOFF2 è ora supportato ovunque. Pertanto, a meno che tu non debba supportare browser molto vecchi, utilizza semplicemente WOFF2. In caso contrario, valuta la possibilità di non pubblicare caratteri web per i browser meno recenti. Questo non sarà un problema se hai una solida strategia di riserva. I visitatori che utilizzano browser meno recenti vedranno i caratteri di riserva.
Bram Stein, del Web Almanac del 2022

Caratteri secondari

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 sottoinsiemi di caratteri.

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

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

Un file del carattere viene scaricato se la pagina contiene uno o più caratteri corrispondenti all'intervallo Unicode. unicode-range viene comunemente utilizzato per pubblicare diversi file di caratteri in base alla lingua utilizzata dai contenuti della pagina.

unicode-range viene spesso utilizzato in combinazione con la tecnica di sottoinsieme. Un carattere 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 un sottoinsieme di caratteri separati per i caratteri latini e cirillici.

Il numero di glifi per carattere varia notevolmente:

I caratteri latini di solito hanno un numero compreso tra 100 e 1000 glifi per carattere.
I caratteri CJK possono contenere più di 10.000 caratteri.

La rimozione dei glifi inutilizzati può ridurre notevolmente le dimensioni di un carattere.

Alcuni fornitori di caratteri potrebbero fornire automaticamente versioni diverse dei file dei 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 al self-hosting, si tratta di un'ottimizzazione che può essere saltata e che comporta l'applicazione locale di file dei caratteri più grandi.

Puoi creare sottoinsiemi di caratteri manualmente se il tuo fornitore di caratteri lo consente, con un'API (Google Fonts supporta questa funzionalità fornendo un parametro text) o modificando manualmente i file dei caratteri e poi eseguendo l'hosting autonomo. Gli strumenti per la generazione di sottoinsiemi di caratteri includono subfont e glyphanger.

Controlla sempre le licenze dei caratteri per confermare che consentano l'impostazione secondaria e l'hosting autonomo.

Usa meno caratteri web

Il carattere più veloce da pubblicare è un carattere che non viene prima 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 corpo del testo.

Per utilizzare il carattere di sistema nel CSS, elenca 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 carattere "predefinito" e fornendo "assi" per manipolare il carattere. Ad esempio, un carattere variabile con un asse Weight potrebbe essere utilizzato per implementare lettering che in precedenza richiedeva caratteri separati per le versioni normale, sottile, in grassetto e extra grassetto.

Non tutti traggono vantaggio dal passaggio ai caratteri variabili. I caratteri variabili contengono molti stili, pertanto di solito hanno dimensioni file più grandi rispetto ai singoli caratteri non variabili che contengono un solo stile. I siti che registreranno il miglioramento maggiore dall'utilizzo dei caratteri variabili sono quelli che utilizzano (e devono utilizzare) una serie di stili e spessori di carattere.

Rendering dei caratteri

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

I vari 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 è 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 incidere su LCP, FCP e sulla stabilità del layout.

Scegli una strategia `font-display` appropriata

font-display informa il browser su come procedere con il rendering del testo quando il carattere web associato non è stato caricato. Questo valore viene definito per ogni 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	Periodo di scambio
Auto	Varia a seconda del 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: inizia quando il browser richiede un carattere web. Durante il periodo di blocco, se il carattere web non è disponibile, viene visualizzato 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 visualizzato nel carattere di riserva.
Periodo di scambio: il periodo di scambio segue 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. Di conseguenza, è difficile consigliare un approccio, in quanto dipende dalle preferenze individuali, dall'importanza del carattere web per la pagina e il brand e dall'effetto visivo che può avere un carattere aggiunto in un secondo momento.

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

Rendimento: utilizza font-display: optional. Si tratta dell'approccio più "performante": il rendering del testo non viene ritardato per più di 100 ms e viene garantito che non ci siano cambiamenti di layout relativi al cambio di carattere. Lo svantaggio è che il carattere web non verrà utilizzato se arriva in ritardo.
Visualizza rapidamente il testo senza rinunciare a un carattere web: utilizza font-display: swap, ma assicurati di pubblicare il carattere abbastanza presto in modo che non causi una variazione del layout. Lo svantaggio di questa opzione è il passaggio brusco quando il carattere arriva tardi.
Il testo viene visualizzato in un carattere web: utilizza font-display: block, ma assicurati di inviare il carattere abbastanza presto in modo da ridurre al minimo il ritardo del testo. La visualizzazione del testo iniziale è ritardata. Nonostante questo ritardo, può comunque causare un cambio di layout poiché il testo viene effettivamente disegnato 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 un passaggio meno brusco rispetto a font-display: swap, in quanto il testo stesso non subirà variazioni.

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

Caratteri icona

Le strategie font-display che funzionano bene per i caratteri web convenzionali non funzionano altrettanto bene per i caratteri icona. In genere, il carattere di riserva per un carattere "icona" è molto diverso dal carattere "icona" e i suoi caratteri possono avere un significato completamente diverso. Di conseguenza, i caratteri icona hanno maggiori probabilità di causare cambiamenti significativi nel layout.

Inoltre, l'utilizzo di un carattere di riserva potrebbe non essere pratico. Se possibile, sostituisci i caratteri delle icone con SVG, una soluzione migliore per l'accessibilità. Le versioni più recenti dei caratteri icona più diffusi in genere supportano SVG. Per ulteriori informazioni sul passaggio ai file SVG, consulta Font Awesome e Material Icons.

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

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

Conclusione

I caratteri web rappresentano ancora un collo di bottiglia del rendimento, ma disponiamo di una gamma di opzioni in continua crescita per consentirci di ottimizzarli e ridurre il più possibile questo collo di bottiglia.