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 un po' di tempo e influire negativamente sul First
Contentful Paint (FCP), mentre il valore font-display errato potrebbe causare
spostamenti indesiderati del layout che contribuiscono al Cumulative Layout Shift
(CLS) di una pagina.
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 web font finché non viene stabilito
che il layout della pagina corrente ne ha bisogno.
h1 {
font-family: "Open Sans";
}
Nello snippet CSS precedente, il browser scarica il file del carattere "Open Sans"
mentre analizza un elemento <h1> nel codice 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 della 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 inline
Puoi rendere i caratteri rilevabili prima durante il caricamento della 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 nel caricamento della 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 forniti tramite servizi di terze parti, come Google Fonts, oppure 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 web font necessari. Ciò può ritardare l'individuazione e il successivo download dei caratteri web.
Questo overhead può essere ridotto utilizzando il suggerimento per la risorsa 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>
Lo snippet HTML precedente 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 una connessione di terze parti eseguendo l'autohosting dei font web. 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. Le dimensioni ridotte del file comportano 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 sottoinsieme. 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 è 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 è possibile
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 per font-display è block. Con block, il browser
blocca il rendering di qualsiasi testo che utilizza il carattere web specificato. I diversi
browser si comportano in modo leggermente diverso. Chromium e Firefox bloccano il rendering per
un massimo di 3 secondi prima di utilizzare un fallback. Safari blocca indefinitamente
fino al caricamento del carattere web.
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 del layout 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 dei caratteri. Ciò può influire sul CLS del tuo sito web se
non presti attenzione a utilizzare il suggerimento preload per caricare una risorsa di caratteri web il prima possibile o se non prendi in considerazione altri valori font-display.
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
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 del layout 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 pubblicare caratteri web su tutti i browser moderni?
Avanti: suddivisione del codice JavaScript
Ora che hai acquisito una conoscenza di base dell'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 è molto probabile che gli utenti interagiscano con la pagina.