Nei moduli precedenti hai imparato a ottimizzare HTML, CSS, JavaScript e le 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 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 web font 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. In questo modo, i caratteri web vengono scoperti 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 della pagina incorporando
il codice CSS che blocca il rendering, incluse le dichiarazioni @font-face, nell'<head> del
codice HTML utilizzando l'elemento <style>. In questo caso, il browser rileva
i caratteri web prima durante il 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 web font 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à di download e rendering di un web font da parte del 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 caratteri web necessari. Ciò può ritardare l'individuazione e il successivo download dei caratteri web.
Questo sovraccarico può essere ridotto utilizzando il suggerimento per le risorse preconnect. Utilizzando
preconnect, puoi indicare al browser di aprire una connessione all'origine multiorigine
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'hosting autonomo dei tuoi web font. Nella maggior parte dei casi, l'hosting autonomo dei web font è più veloce rispetto al download da un'origine diversa. Se prevedi di eseguire l'hosting autonomo dei web font, 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 web font necessari per il tuo sito web.
Utilizza WOFF2 e solo WOFF2
WOFF2 gode di un ampio supporto del browser e della migliore compressione, fino al 30% in più rispetto a WOFF. Le dimensioni ridotte dei 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 di 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 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 web font, puoi
creare un sottoinsieme dei web font 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 notevolmente la quantità di dati dei web font 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 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 sostituisce 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 è il tipo di carattere utilizzato immediatamente nel rendering iniziale della pagina. Tuttavia, se le reti sono lente, il testo di riserva viene visualizzato
per primo dopo il 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 successive delle pagine 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 i 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 rimandare 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.