Nei moduli precedenti hai imparato a ottimizzare le risorse HTML, CSS, JavaScript e multimediali. In questo modulo scoprirai alcuni metodi per ottimizzare i caratteri web.
I caratteri web possono influire sulle prestazioni della pagina sia durante il caricamento sia durante il rendering.
Il download dei file di caratteri di grandi dimensioni può richiedere un po' di tempo e influire negativamente sulla metrica First Contentful Paint (FCP), mentre un valore font-display errato potrebbe causare variazioni di layout indesiderate che contribuiscono alla Cumulative Layout Shift (CLS) di una pagina.
Prima di discutere dell'ottimizzazione dei caratteri web, sapere come vengono rilevati dal browser può essere utile, in modo da capire in che modo CSS impedisce il recupero di caratteri web non necessari in determinate situazioni.
Discovery
I caratteri web di una pagina vengono 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 rispettiva risorsa di carattere web. Per mantenere la larghezza di banda, il browser non scarica il carattere web finché non viene stabilito che è necessario per il layout della pagina corrente.
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 tue 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.
Questo fa sì che i caratteri web siano risorse scoperte tardi, ma ci sono modi per aiutare il browser a scoprire i caratteri web più rapidamente.
Puoi avviare una richiesta anticipata di risorse di carattere web utilizzando l'istruzione preload. L'istruzione preload consente di trovare i caratteri web nelle fasi iniziali del caricamento della pagina e il browser inizia subito a scaricarli senza attendere il completamento del download e dell'analisi del foglio di stile. L'istruzione preload
non attende che sia necessario il carattere 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 la visualizzazione, incluse le dichiarazioni @font-face, nel codice <head> del codice HTML utilizzando l'elemento <style>. In questo caso, il browser rileva i caratteri web nelle prime fasi del caricamento della pagina, in quanto non è necessario attendere il download di un foglio di stile esterno.
L'incorporamento di dichiarazioni @font-face presenta un vantaggio rispetto all'utilizzo del suggerimento preload, poiché il browser scarica solo i caratteri necessari per visualizzare la pagina corrente. In questo modo si elimina il rischio di scaricare caratteri inutilizzati.
Scarica
Dopo aver individuato i caratteri web e aver verificato che siano necessari per il layout della pagina corrente, il browser può scaricarli. Il numero di caratteri web, la relativa codifica e le dimensioni dei relativi file possono influire notevolmente sulla velocità di download e rendering di un carattere web da parte del browser.
Ospita autonomamente i tuoi caratteri web
I caratteri web possono essere pubblicati tramite servizi di terze parti, ad esempio Google Fonts, oppure possono essere ospitati autonomamente sulla tua origine. Se utilizzi un servizio di terze parti, la pagina web deve aprire una connessione al dominio del provider prima che possa iniziare a scaricare i caratteri web necessari. Ciò può ritardare il rilevamento e il successivo download dei caratteri web.
Questo overhead può essere ridotto utilizzando il suggerimento della risorsa preconnect. Utilizzando preconnect, puoi indicare al browser di aprire una connessione alla rete multiorigine prima di quanto succederebbe normalmente con il browser:
<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 provider di caratteri, come Google Fonts, pubblicano risorse CSS e caratteri da origini diverse.
Puoi eliminare la necessità di una connessione di terze parti ospitando autonomamente i caratteri web. Nella maggior parte dei casi, i caratteri web con hosting self-service sono più veloci che scaricarli da più origini. Se prevedi di utilizzare caratteri web in self-hosting, verifica che il sito utilizzi una rete CDN (Content Delivery Network), HTTP/2 o HTTP/3 e di impostare le intestazioni di memorizzazione nella cache corrette per i caratteri web necessari per il sito web.
Usa solo WOFF2—e WOFF2
WOFF2 offre un ampio supporto per il browser e la migliore compressione, fino al 30% in più rispetto a WOFF. La riduzione delle dimensioni dei file porta a tempi di download più rapidi. Il formato WOFF2 è spesso l'unico necessario per garantire la piena compatibilità tra i browser moderni.
Sottoimposta i caratteri web
In genere, i caratteri web includono una vasta gamma di glifi diversi, necessari per rappresentare l'ampia varietà di caratteri utilizzati in diverse lingue. Se la pagina pubblica i contenuti in una sola lingua o utilizza un solo alfabeto, puoi ridurre le dimensioni dei caratteri web creando un sottoinsieme. Ciò spesso avviene specificando un numero o un intervallo di punti codice Unicode.
Un sottoinsieme è un insieme ridotto di glifi inclusi nel file dei caratteri web originali. 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 notevolmente le dimensioni di un file dei caratteri.
Alcuni fornitori di caratteri web, come Google Fonts, offrono automaticamente sottoinsiemi tramite l'uso di un parametro della stringa di query. Ad esempio, l'URL https://fonts.googleapis.com/css?family=Roboto&subset=latin pubblica un foglio di stile con il carattere web Roboto che utilizza solo l'alfabeto latino.
Se hai deciso di ospitare autonomamente i tuoi caratteri web, il passaggio successivo consiste nel generare e ospitare personalmente questi sottoinsiemi utilizzando strumenti come glyphanger o subfont.
Tuttavia, se non disponi della capacità di ospitare autonomamente i tuoi caratteri web, puoi sottoimpostare i caratteri web forniti da Google Fonts specificando un parametro aggiuntivo della stringa di query text contenente solo i punti di codice Unicode necessari per il tuo sito web. Ad esempio, se sul tuo sito è presente un carattere web display che
richiede solo un numero ridotto di caratteri per la frase "Benvenuto", puoi
richiedere quel sottoinsieme tramite Google Fonts tramite il seguente URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Ciò può ridurre
significativamente la quantità di dati relativi ai caratteri web necessari per un singolo tipo di carattere
sul tuo sito web, se l'impostazione secondaria così estrema può essere utile sul tuo sito web.
Rendering dei caratteri
Dopo che il browser ha rilevato e scaricato un carattere web, è possibile eseguirne il rendering. Per impostazione predefinita, il browser blocca il rendering di qualsiasi testo che utilizza un carattere web fino a quando il testo non viene scaricato. Puoi modificare il comportamento di rendering del testo del browser e configurare il testo da mostrare o meno fino a quando il carattere web non è stato completamente caricato 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 elemento di riserva. Safari blocca sempre
fino al caricamento del carattere web.
swap
swap è il valore font-display più utilizzato. swap non blocca il rendering e mostra il testo immediatamente in un fallback prima di passare al carattere web specificato. In questo modo puoi mostrare i contenuti immediatamente
senza attendere il download del carattere web.
Tuttavia, lo svantaggio di swap è che causa una variazione del layout se il carattere web di riserva e il carattere web specificato nel CSS variano notevolmente in termini di altezza delle righe, crenatura e altre metriche dei caratteri. Ciò può influire sul CLS del tuo sito web se
non ti preoccupi di utilizzare il suggerimento preload per caricare una risorsa di carattere web il prima
possibile o se non prendi in considerazione altri valori font-display.
fallback
Il valore fallback di font-display potrebbe corrispondere a un compromesso tra block e swap. A differenza di swap, il browser blocca il rendering di un carattere, ma
cambia il testo di riserva solo per un breve periodo di tempo. Tuttavia, a differenza di block, il periodo di blocco è estremamente breve.
L'uso del valore fallback può funzionare bene su reti veloci dove, se il carattere web si scarica rapidamente, il carattere web è il carattere utilizzato immediatamente nella visualizzazione iniziale della pagina. Tuttavia, se le reti sono lente, il testo di fallback viene visualizzato
prima dopo la scadenza del periodo di blocco e poi scambiato 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 carattere web richiede più tempo, non viene utilizzato nella pagina e il browser utilizza il carattere di riserva per la navigazione corrente mentre il carattere web viene scaricato in background e inserito nella cache del browser.
Di conseguenza, le navigazioni successive nelle pagine potranno utilizzare immediatamente il carattere web, poiché è già stato scaricato. font-display: optional evita la variazione del layout rilevata con swap, ma alcuni utenti non vedono il carattere web se arriva troppo tardi nella navigazione iniziale della pagina.
Demo sui caratteri
verifica le tue conoscenze
Quando il browser scarica una risorsa di carattere web (supponendo che non sia stata recuperata con un'istruzione preload)?
Qual è l'unico (e il più efficiente) formato necessario per pubblicare caratteri web su tutti i browser moderni?
A seguire: JavaScript con suddivisione del codice
Una volta compreso l'ottimizzazione dei caratteri a tua disposizione, puoi ora passare al modulo successivo, che tratta un argomento con un elevato potenziale di miglioramento della velocità di caricamento iniziale delle pagine per i tuoi utenti, ovvero di rimandare il caricamento di JavaScript tramite la suddivisione del codice. In questo modo, puoi ridurre il più possibile la larghezza di banda e la contesa della CPU durante la fase di avvio di una pagina, un periodo di tempo in cui è molto probabile che gli utenti interagiscano con la pagina.