Ottimizza i caratteri web

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)?

Non appena rileva il relativo riferimento in un foglio di stile.
Quando viene creato il CSSOM della pagina e si determina che il carattere web è necessarie per il layout corrente.

Qual è l'unico formato (e più efficiente) necessario per pubblicare gli annunci sul Web a tutti i browser moderni?

fine del ciclo di vita
WOFF
TTF
WOFF2

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.