Nei moduli precedenti hai imparato a ottimizzare HTML, CSS, JavaScript e risorse multimediali. In questo modulo scoprirai alcuni metodi per ottimizzare il Web i caratteri.
I caratteri web possono influire sulle prestazioni della pagina sia al momento del caricamento che al momento del rendering.
Il download dei file di caratteri di grandi dimensioni può richiedere un po' di tempo e incidono negativamente su Nome
Contentful Paint (FCP), mentre un valore font-display errato potrebbe causare
variazioni del layout indesiderate che contribuiscono alla Cumulative Layout Shift di una pagina
(CLS).
Prima di ottimizzare i caratteri web, è utile sapere come vengono scoperti il browser può essere utile, in modo che tu possa capire in che modo il 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 un @font-face
dichiarazione:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
Lo snippet di codice precedente definisce un valore font-family denominato "Open Sans" e
indica al browser dove trovare la rispettiva risorsa per il carattere web. Per preservare
larghezza di banda, il browser non scarica il carattere web fino a quando non viene determinato
che il layout della pagina corrente lo richieda.
h1 {
font-family: "Open Sans";
}
Nello snippet CSS precedente, il browser scarica il file del carattere "Open Sans"
quando analizza un elemento <h1> nel codice HTML della pagina.
preload
Se le tue dichiarazioni @font-face sono definite in un foglio di stile esterno,
un browser può iniziare a scaricarli solo dopo aver scaricato il foglio di stile.
Questo rende i caratteri web scoperti in ritardo, ma ci sono modi per aiutare i
a scoprire più rapidamente i caratteri web.
Puoi avviare una richiesta in anteprima di risorse per i caratteri web utilizzando preload
. L'istruzione preload rende i caratteri web rilevabili nelle prime fasi della
caricamento pagina e il browser inizierà subito a scaricarli senza attendere
per completare il download e l'analisi del foglio di stile. 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 in anticipo durante il caricamento della pagina incorporando
il codice CSS che blocca la visualizzazione, incluse le dichiarazioni @font-face, in <head> di
il tuo codice HTML utilizzando l'elemento <style>. In questo caso, il browser scopre
i caratteri web nelle prime fasi del caricamento pagina, in quanto non è necessario attendere un
foglio di stile da scaricare.
L'incorporamento delle dichiarazioni @font-face ha un vantaggio rispetto all'utilizzo di preload
Suggerimento: il browser scarica soltanto i caratteri necessari per visualizzare
. In questo modo si elimina il rischio di scaricare caratteri inutilizzati.
Scarica
Dopo aver scoperto i caratteri web e aver verificato che siano necessari per il testo , il browser può scaricarli. Il numero di caratteri web, la loro codifica, e le dimensioni dei loro file possono influire notevolmente sulla velocità di caricamento scaricate e visualizzate dal browser.
Ospita autonomamente i tuoi caratteri web
I caratteri web possono essere pubblicati tramite servizi di terze parti, come Google Fonts oppure può essere ospitato autonomamente sulla tua origine. Quando utilizzi un servizio di terze parti, il tuo sito la pagina deve aprire una connessione al dominio del provider prima di poter iniziare scaricare i caratteri web necessari. Questo può ritardare il rilevamento e la successiva il download dei caratteri web.
Questo overhead può essere ridotto utilizzando il hint delle risorse preconnect. Utilizzando
preconnect, puoi dire al browser di aprire una connessione al multiorigine
prima di quanto farebbe normalmente 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. Alcune
I fornitori di caratteri, come Google Fonts, forniscono risorse CSS e caratteri di diverse
diverse origini dati.
Puoi eliminare la necessità di una connessione di terze parti ospitando autonomamente il tuo caratteri web. Nella maggior parte dei casi, il self-hosting dei caratteri web è più veloce del download. da un'origine multiorigine. Se prevedi di ospitare autonomamente i caratteri web, verifica che il tuo sito utilizza una rete CDN (Content Delivery Network), HTTP/2 o HTTP/3 e imposta le intestazioni di memorizzazione nella cache corrette per i caratteri web necessari per il sito web.
Usare solo WOFF2 e WOFF2
WOFF2 sfrutta il supporto del browser ampio e la compressione migliore, fino al 30% in più rispetto a WOFF. La riduzione delle dimensioni dei file comporta tempi di download più rapidi. WOFF2 è spesso l'unico necessario per la piena compatibilità con i browser.
Sottoscrivi i caratteri web
In genere, i caratteri web includono una vasta gamma di glifi diversi, necessari per rappresentare l'ampia varietà di caratteri usati nelle varie lingue. Se le tue pagina pubblica contenuti in una sola lingua (o utilizza un solo alfabeto), quindi puoi puoi ridurre le dimensioni dei caratteri web mediante il sottoinsieme. Questa operazione spesso specificando un numero o un intervallo di punti di codice Unicode.
Un sottoinsieme è un insieme ridotto di glifi inclusi nel web originale del tipo di carattere. Ad esempio, invece di mostrare tutti i glifi, la pagina potrebbe mostrare una un sottoinsieme specifico di caratteri latini. A seconda del sottoinsieme necessario, la rimozione i glifi possono ridurre notevolmente le dimensioni di un file di caratteri.
Alcuni fornitori di caratteri web, come Google Fonts, offrono sottoinsiemi automaticamente 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 esclusivamente l'alfabeto latino.
Se hai deciso di ospitare autonomamente i tuoi caratteri web, il passaggio successivo consiste nel generare ospitare personalmente questi sottoinsiemi utilizzando strumenti come glyphanger o subfont.
Tuttavia, se non hai la possibilità di ospitare autonomamente i tuoi caratteri web, puoi
sottoinsiemi di caratteri web forniti da Google Fonts specificando un text aggiuntivo
parametro della stringa di query contenente solo i punti di codice Unicode necessari
del tuo sito web. Ad esempio, se sul tuo sito è presente un carattere web che mostra solo
richiede un piccolo numero di caratteri per la frase "Benvenuto", puoi
richiedi il sottoinsieme tramite Google Fonts tramite il seguente URL:
https://fonts.googleapis.com/css?family=Monoton&text=Welcome. Questo può
Ridurre significativamente la quantità di dati web necessari per un singolo carattere tipografico
sul tuo sito web, se una riduzione così estrema può rivelarsi utile per il tuo sito web.
Rendering dei caratteri
Dopo che il browser ha individuato e scaricato un carattere web, può essere
eseguire il rendering. Per impostazione predefinita, il browser blocca il rendering di qualsiasi testo che utilizza un
carattere web fino al download. Puoi modificare il rendering del testo del browser
e configurare il testo da mostrare (o non mostrare) fino a quando
sia 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. Diverso
i browser si comportano in modo leggermente diverso. Rendering a blocchi di Chromium e Firefox per
fino a un massimo di 3 secondi prima di utilizzare una creatività di riserva. Safari blocca all'infinito
fino al caricamento del carattere web.
swap
swap è il valore font-display più utilizzato. swap non blocca
e mostra il testo immediatamente in una versione di riserva prima di essere scambiato
carattere web specificato. In questo modo puoi mostrare i tuoi contenuti immediatamente senza aspettare
per scaricare il carattere web.
Tuttavia, lo svantaggio di swap è che causa una variazione del layout se il video di riserva
e il carattere web specificato nel tuo CSS varia notevolmente in termini di linee
altezza, crenatura e altre metriche del carattere. Ciò può influire sulla CLS del tuo sito web se
non utilizzare il suggerimento preload per caricare una risorsa carattere web
è possibile, o se non si considerano altri valori di font-display.
fallback
Il valore fallback di font-display è una sorta di compromesso tra
block e swap. A differenza di swap, il browser blocca il rendering di un carattere, ma
solo per un breve periodo di tempo. A differenza di block,
tuttavia, il periodo di blocco
è estremamente breve.
L'utilizzo del valore fallback può funzionare bene sulle reti veloci in cui, se il carattere web
viene scaricato rapidamente, il carattere web è il carattere tipografico utilizzato immediatamente nella
rendering iniziale. Tuttavia, se le reti sono lente, viene visualizzato il testo di fallback
prima che sia trascorso il periodo di blocco e poi
scambiato quando il carattere web
in arrivo.
optional
optional è il valore font-display più rigoroso e utilizza solo il valore web
risorsa di questo tipo se viene scaricata entro 100 millisecondi. Se un carattere web richiede
oltre questo limite per essere caricato, non viene utilizzato nella pagina e il browser utilizza
carattere tipografico di riserva per la navigazione corrente mentre viene scaricato il carattere web
sullo sfondo e inseriti nella cache del browser.
Di conseguenza, le successive navigazioni nelle pagine possono utilizzare immediatamente il carattere web, poiché
è già stata scaricata. font-display: optional evita la variazione del layout rilevata
con swap, ma alcuni utenti non lo vedranno se arriva troppo tardi sul
navigazione nelle pagine iniziali.
Demo dei caratteri
Verifica le tue conoscenze
Quando il browser scarica una risorsa carattere web (supponendo che non lo sia
recuperato con un'istruzione preload)?
Qual è l'unico formato (e più efficiente) necessario per pubblicare gli annunci sul Web a tutti i browser moderni?
A seguire: JavaScript suddiviso di codice
Ora che hai una conoscenza approfondita dell'ottimizzazione dei caratteri, puoi nel prossimo modulo, che tratta un argomento con un elevato potenziale di miglioramento. la velocità di caricamento iniziale della pagina per gli utenti, ovvero rimandare il caricamento JavaScript tramite la suddivisione del codice. In questo modo, puoi mantenere la larghezza di banda il più basso possibile durante la fase di avvio di una pagina, un periodo momento in cui è probabile che gli utenti interagiscano con il sito.