Best practice per i caratteri

Ottimizza i caratteri web per Core Web Vitals.

Katie Hempenius
Katie Hempenius

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

Questo articolo è suddiviso in tre sezioni: caricamento dei caratteri, consegna 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 dei caratteri

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 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, controlla la scheda Tempi nel riquadro Rete in Strumenti per sviluppatori di Chrome per ulteriori informazioni.

Screenshot della 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 per lavorare con qualsiasi carattere web. Almeno 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 malinteso comune è che un carattere viene richiesto quando viene rilevata una dichiarazione @font-face, ma non è così. 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 altre parole, nell'esempio precedente, Open Sans verrebbe scaricato solo se la pagina contenesse un elemento <h1>.

Pertanto, quando pensi all'ottimizzazione dei caratteri, è importante dare la stessa considerazione agli stili CSS dei 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 di dichiarazioni dei caratteri e altri stili critici in linea 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 perché 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 potranno implementare. I vantaggi in termini di prestazioni sono evidenti, ma richiedono procedure e strumenti di compilazione aggiuntivi per garantire che il CSS necessario, e idealmente solo quello critico, venga inserito correttamente in linea e che qualsiasi CSS aggiuntivo venga caricato in modo da non bloccare il rendering.

Preconnettersi alle origini di terze parti fondamentali

Se il tuo sito carica i caratteri da un sito di terze parti, ti consigliamo vivamente di utilizzare l'hint della risorsa preconnect per stabilire connessioni anticipate con l'origine di terze parti. I suggerimenti sulle risorse devono essere inseriti nel <head> del documento. Il suggerimento relativo alla risorsa riportato di seguito configura 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 del carattere, aggiungi un suggerimento della risorsa preconnect separato che utilizza l'attributo crossorigin. A differenza degli stili, 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ò pubblicare fogli di stile e caratteri da origini separate. Ad esempio, questo è il modo in cui il suggerimento della risorsa preconnect verrebbe utilizzato 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 miglioramenti si avvicinano più ad affrontare la 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 utilizzato 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 utilizzato con cautela, deve essere utilizzato solo per caricare un singolo formato di carattere.

Tuttavia, quando utilizzi stili CSS esterni, il pre-caricamento dei caratteri più importanti può essere molto efficace, poiché altrimenti il browser non saprà se il carattere è necessario fino a molto tempo dopo.

Pubblicazione dei caratteri

La pubblicazione più rapida dei caratteri consente di visualizzare il testo più velocemente. Inoltre, se un carattere viene caricato in tempo sufficiente, può contribuire a eliminare i cambiamenti di layout dovuti allo scambio di caratteri.

Utilizzo di caratteri self-hosted

Sulla carta, l'utilizzo di un carattere ospitato autonomamente dovrebbe offrire un rendimento migliore in quanto elimina la configurazione di una connessione di terze parti. Tuttavia, in pratica, le differenze di prestazioni tra queste due opzioni sono meno nette: ad esempio, l'Almanaco del web ha rilevato che i siti che utilizzano caratteri di terze parti avevano un rendering più veloce rispetto a quelli che utilizzavano caratteri proprietari.

Se stai valutando la possibilità 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 ospitati autonomamente offrano un rendimento migliore. Per ulteriori informazioni, consulta la sezione Reti di distribuzione dei contenuti.

Se utilizzi un font ospitato autonomamente, è consigliabile applicare anche alcune ottimizzazioni dei file dei caratteri che i provider di caratteri di terze parti in genere forniscono automaticamente, ad esempio la suddivisione dei caratteri in sottoinsieme e la 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, ha il supporto più ampio per i browser e offre la migliore compressione. Poiché utilizza Brotli, WOFF2 offre una compressione migliore del 30% rispetto a WOFF, il che si traduce in meno dati da scaricare e quindi in 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. Se non è possibile, considera di non pubblicare alcun carattere web nei browser meno recenti. Questo non sarà un problema se hai implementato una strategia di riserva solida. I visitatori che utilizzano browser meno recenti vedranno semplicemente i caratteri di riserva.

Bram Stein, del Web Almanac del 2022

Caratteri di 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 nella pagina e puoi ridurre le dimensioni dei file dei caratteri creando 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;
}

Verrà scaricato un file del carattere 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 secondario 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 sottoinsiemi di caratteri separati per i caratteri latini e cirillici. Il numero di glifi per carattere varia notevolmente: i caratteri latini in genere hanno da 100 a 1000 glifi per carattere, mentre i caratteri CJK possono avere oltre 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 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, questa è un'ottimizzazione che può essere facilmente trascurata e portare a file di caratteri più grandi a livello locale.

È anche possibile sottoinserire manualmente i caratteri se il tuo fornitore di caratteri lo consente, tramite 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. Tuttavia, controlla che la licenza dei caratteri che utilizzi consenta i sottoinsiemi e l'hosting autonomo.

Utilizza meno caratteri web

Il carattere più veloce da caricare è 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 essere particolarmente adatti per il testo del corpo.

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

Non tutti possono trarre vantaggio dal passaggio a 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 registreranno il miglioramento maggiore dall'utilizzo dei caratteri variabili sono quelli che utilizzano (e devono utilizzare) una serie di stili e spessori di caratteri.

Rendering dei caratteri

Di fronte a un font web che non è stato ancora caricato, il browser deve confrontarsi con un dilemma: deve sospendere il rendering del testo fino a quando non è arrivato il carattere web? Oppure deve visualizzare il testo in un carattere di riserva fino a quando non arriva il carattere web?

Browser diversi gestiscono questo scenario in modo diverso. Per impostazione predefinita, i browser basati su Chromium e Firefox bloccheranno il rendering del testo per un massimo di 3 secondi se il carattere web associato non è stato caricato; Safari bloccherà 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 sulla stabilità del layout.

Scegli 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. Viene definito per 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 a seconda del 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, viene visualizzato in un carattere di riserva invisibile e quindi il testo non sarà visibile all'utente. Se il carattere non è disponibile alla fine del periodo di blocco, verrà 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, verrà "sostituito".

Le strategie font-display riflettono punti di vista diversi sul compromesso tra rendimento ed estetica. Di conseguenza, è difficile dare un approccio consigliato, 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:

  • Se il rendimento è una priorità assoluta: 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 saranno cambiamenti di layout relativi al cambio di carattere. Tuttavia, il rovescio della medaglia è che il carattere web non verrà utilizzato se arriva in ritardo.

  • Se la visualizzazione rapida del testo è una priorità assoluta, ma vuoi comunque avere la certezza che il carattere web venga utilizzato: utilizza font-display: swap, ma assicurati di pubblicare il carattere con il tempo necessario affinché non causi una variazione del layout. Lo svantaggio di questa opzione è il passaggio brusco quando il carattere arriva in ritardo.

  • Se la visualizzazione del testo in un carattere web è una priorità assoluta: utilizza font-display: block, ma assicurati di caricare il carattere in tempo sufficiente per ridurre al minimo il ritardo del testo. Lo svantaggio è che la visualizzazione del testo iniziale verrà ritardata. Tieni presente che, nonostante questo ritardo, può comunque verificarsi uno spostamento del layout perché 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 di differenza e, di conseguenza, una variazione. Tuttavia, potrebbe essere un cambiamento meno brusco rispetto a font-display: swap, in quanto il testo stesso non verrà modificato.

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.

Riduci la differenza tra il carattere di riserva e il webfont

Per ridurre l'impatto sul CLS, puoi utilizzare i nuovi attributi size-adjust. Per ulteriori informazioni, consulta l'articolo sui CSS size-adjust. Si tratta di una novità nel nostro set di strumenti, quindi è più avanzato e un po' manuale al momento. Ma sicuramente uno da sperimentare e da tenere d'occhio per i miglioramenti degli strumenti in futuro.

Conclusione

I caratteri web rappresentano ancora un collo di bottiglia per le prestazioni, ma abbiamo una gamma sempre crescente di opzioni che ci consentono di ottimizzarli per ridurre al massimo questo problema.