Nei moduli precedenti hai imparato a ottimizzare HTML, CSS, JavaScript e risorse multimediali. In questo modulo scoprirai alcuni metodi per ottimizzare i caratteri web.
I caratteri web possono influire sulle prestazioni della pagina sia in termini di tempo di caricamento che di rendering.
Il download di file di caratteri di grandi dimensioni può richiedere del tempo e influire negativamente su First Contentful Paint (FCP), mentre il valore font-display errato potrebbe causare spostamenti indesiderati del rendering visivo.
Prima di parlare dell'ottimizzazione dei caratteri web, può essere utile sapere come vengono rilevati dal browser, in modo da capire come CSS impedisce il recupero di caratteri web non necessari in determinate situazioni.
Discovery
I caratteri web di una pagina sono definiti in un foglio di stile utilizzando una dichiarazione @font-face:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Lo snippet di codice precedente definisce un font-family denominato "Open Sans" e indica al browser dove trovare la risorsa del carattere web corrispondente. Per risparmiare
larghezza di banda, il browser non scarica il carattere web finché non viene stabilito
che il layout della pagina corrente lo richiede.
h1 {
font-family: "Open Sans";
}
Nello snippet CSS precedente, il browser scarica il file del carattere "Open Sans"
mentre analizza un elemento <h1> nell'HTML della pagina.
preload
Se le dichiarazioni @font-face sono definite in un foglio di stile esterno, il
browser può iniziare a scaricarle solo dopo aver scaricato il foglio di stile.
Ciò rende i caratteri web risorse scoperte in ritardo, ma esistono modi per aiutare il browser a scoprirli prima.
Puoi avviare una richiesta anticipata di risorse di caratteri web utilizzando la direttiva preload. La direttiva preload rende i caratteri web rilevabili all'inizio del caricamento pagina e il browser inizia immediatamente a scaricarli senza attendere il completamento del download e dell'analisi del foglio di stile. La direttiva preload
non attende che il carattere sia necessario nella pagina.
<!-- The `crossorigin` attribute is required for fonts-even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
Dichiarazioni @font-face incorporate
Puoi rendere i caratteri rilevabili prima durante il caricamento pagina incorporando
CSS di blocco del rendering, incluse le dichiarazioni @font-face, nell'<head> del
tuo HTML utilizzando l'elemento <style>. In questo caso, il browser rileva
i caratteri web prima del caricamento pagina, in quanto non deve attendere il download di un foglio di stile esterno.
L'incorporamento delle dichiarazioni @font-face presenta un vantaggio rispetto all'utilizzo del suggerimento preload, in quanto il browser scarica solo i caratteri necessari per il rendering della pagina corrente. In questo modo si elimina il rischio di scaricare caratteri inutilizzati.
Scarica
Dopo aver rilevato i caratteri web e aver verificato che siano necessari per il layout della pagina corrente, il browser può scaricarli. Il numero di web font, la loro codifica e le dimensioni dei file possono influire notevolmente sulla velocità con cui un web font viene scaricato e visualizzato dal browser.
Eseguire l'hosting autonomo dei caratteri web
I caratteri web possono essere pubblicati tramite servizi di terze parti, come Google Fonts, o possono essere ospitati autonomamente sull'origine. Quando utilizzi un servizio di terze parti, la tua pagina web deve aprire una connessione al dominio del fornitore prima di poter iniziare a scaricare i caratteri web necessari. Ciò può ritardare l'individuazione e il successivo download dei caratteri web.
Questo overhead può essere ridotto utilizzando il suggerimento per le risorse preconnect. Utilizzando
preconnect, puoi indicare al browser di aprire una connessione all'origine diversa
prima di quanto farebbe normalmente:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Il precedente snippet HTML suggerisce al browser di stabilire una connessione a
fonts.googleapis.com e una connessione CORS a fonts.gstatic.com. Alcuni
fornitori di caratteri, come Google Fonts, pubblicano risorse CSS e di caratteri da origini
diverse.
Puoi eliminare la necessità di un collegamento di terze parti eseguendo l'autohosting dei tuoi web font. Nella maggior parte dei casi, l'hosting autonomo dei caratteri web è più veloce del download da un'origine diversa. Se prevedi di eseguire l'hosting autonomo dei caratteri web, verifica che il tuo sito utilizzi una Content Delivery Network (CDN), HTTP/2 o HTTP/3 e imposti le intestazioni di memorizzazione nella cache corrette per i caratteri web necessari per il tuo sito web.
Utilizza WOFF2 e solo WOFF2
WOFF2 gode di un ampio supporto dei browser e della migliore compressione, fino al 30% in più rispetto a WOFF. La riduzione delle dimensioni del file comporta tempi di download più rapidi. Il formato WOFF2 è spesso l'unico necessario per la piena compatibilità con i browser moderni.
Sottoinsieme dei caratteri web
I caratteri web in genere includono un'ampia gamma di glifi diversi, necessari per rappresentare la grande varietà di caratteri utilizzati in lingue diverse. Se la tua pagina pubblica contenuti in una sola lingua o utilizza un unico alfabeto, puoi ridurre le dimensioni dei caratteri web tramite il subsetting. Spesso questo viene fatto specificando un numero o un intervallo di punti di codice Unicode.
Un sottoinsieme è un insieme ridotto dei glifi inclusi nel file del carattere web originale. Ad esempio, anziché pubblicare tutti i glifi, la pagina potrebbe pubblicare un sottoinsieme specifico per i caratteri latini. A seconda del sottoinsieme necessario, la rimozione dei glifi può ridurre significativamente le dimensioni di un file di caratteri.
Alcuni fornitori di caratteri web, come Google Fonts, offrono automaticamente i sottoinsiemi tramite l'utilizzo di un parametro della stringa di query. Ad esempio, l'URL
https://fonts.googleapis.com/css?family=Roboto&subset=latin fornisce un
foglio di stile con il carattere web Roboto che utilizza solo l'alfabeto latino.
Se hai deciso di eseguire l'hosting autonomo dei tuoi web font, il passaggio successivo consiste nel generare e ospitare autonomamente questi sottoinsiemi utilizzando strumenti come glyphanger o subfont.
Tuttavia, se non hai la capacità di ospitare autonomamente i tuoi caratteri web, puoi
creare un sottoinsieme dei caratteri web forniti da Google Fonts specificando un parametro della stringa di query text
aggiuntivo contenente solo i punti di codice Unicode necessari per
il tuo sito web. Ad esempio, se sul tuo sito hai un web font di visualizzazione che
richiede solo un piccolo numero di caratteri necessari per la frase "Benvenuto", puoi
richiedere questo sottoinsieme tramite Google Fonts tramite il seguente URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. In questo modo, puoi
ridurre significativamente la quantità di dati dei caratteri web necessari per un singolo carattere
sul tuo sito web, se questo sottoinsieme estremo può essere utile sul tuo sito web.
Rendering dei caratteri
Dopo che il browser ha rilevato e scaricato un font web, può essere visualizzato. Per impostazione predefinita, il browser blocca il rendering di qualsiasi testo che utilizza un
carattere web finché non viene scaricato. Puoi regolare il comportamento di rendering del testo del browser e configurare il testo da mostrare o non mostrare finché il carattere web non è stato caricato completamente utilizzando la proprietà CSS font-display.
block
Il valore predefinito di font-display è block. Con block, il browser
blocca il rendering di qualsiasi testo che utilizza il carattere web specificato. Browser
diversi si comportano in modo leggermente diverso. Chromium e Firefox bloccano il rendering per
un massimo di 3 secondi prima di utilizzare un fallback. Safari si blocca a tempo indeterminato
finché il carattere web non viene caricato.
swap
swap è il valore font-display più utilizzato. swap non blocca
il rendering e mostra immediatamente il testo in un fallback prima di sostituirlo con il
carattere web specificato. In questo modo puoi mostrare immediatamente i tuoi contenuti senza attendere
il download del carattere web.
Tuttavia, lo svantaggio di swap è che causa uno spostamento visibile dei contenuti se
il carattere web di riserva e il carattere web specificato nel CSS variano notevolmente in
termini di altezza della linea, crenatura e altre metriche del carattere.
In genere, questo non comporta un Cumulative Layout Shift (CLS) peggiore rispetto a
block (poiché block richiede il layout della pagina presupponendo i caratteri di riserva,
anche se il testo stesso non viene visualizzato, quindi entrambi sono soggetti allo spostamento dei contenuti), ma può essere più stridente dal punto di vista visivo.
fallback
Il valore fallback per font-display è un compromesso tra
block e swap. A differenza di swap, il browser blocca il rendering di un carattere, ma
inserisce il testo di riserva solo per un periodo di tempo molto breve. A differenza di block,
tuttavia, il periodo di blocco è estremamente breve.
L'utilizzo del valore fallback può funzionare bene su reti veloci in cui, se il download del carattere web
è rapido, il carattere web viene utilizzato immediatamente nel rendering iniziale della pagina. Tuttavia, se le reti sono lente, il testo di riserva viene visualizzato
per primo dopo la scadenza del periodo di blocco e poi sostituito quando arriva il carattere web.
optional
optional è il valore font-display più rigoroso e utilizza la risorsa del carattere web solo se viene scaricata entro 100 millisecondi. Se il caricamento di un font web richiede
più tempo, non viene utilizzato nella pagina e il browser utilizza il
tipo di carattere di riserva per la navigazione corrente mentre il font web viene scaricato in
background e inserito nella cache del browser.
Di conseguenza, le navigazioni nelle pagine successive possono utilizzare immediatamente il carattere web, poiché
è già stato scaricato. font-display: optional evita lo spostamento visivo visto
con swap, ma alcuni utenti non vedono il carattere web se arriva troppo tardi nella
navigazione iniziale della pagina.
Demo dei caratteri
Verifica le tue conoscenze
Quando il browser scarica una risorsa di font web (supponendo che non venga
recuperata con un'istruzione preload)?
Qual è l'unico formato (e il più efficiente) necessario per erogare caratteri web su tutti i browser moderni?
A seguire: suddivisione del codice JavaScript
Ora che hai compreso l'ottimizzazione dei caratteri, puoi passare al modulo successivo, che tratta un argomento con un elevato potenziale di miglioramento della velocità di caricamento iniziale della pagina per i tuoi utenti, ovvero differire il caricamento di JavaScript tramite la suddivisione del codice. In questo modo, puoi mantenere la contesa di larghezza di banda e CPU il più bassa possibile durante la fase di avvio di una pagina, un periodo di tempo in cui gli utenti hanno molte probabilità di interagire con la pagina.