Controllo del rendimento dei caratteri con font-display

Rob Dodson

Decidere il comportamento di un carattere web durante il caricamento può essere un'importante tecnica di ottimizzazione delle prestazioni. Il nuovo descrittore font-display per @font-face consente agli sviluppatori di decidere come verranno visualizzati (o come verrà utilizzato il carattere di riserva) i caratteri web, a seconda del tempo necessario per il loro caricamento.

Differenze nell'attuale rendering dei caratteri

Le Web Fonts consentono agli sviluppatori di incorporare una tipografia avanzata nei loro progetti, con il compromesso che, se l'utente non dispone già di un carattere, il browser deve impiegare un po' di tempo per scaricarlo. Poiché le reti possono essere instabili, questo tempo di download potrebbe influire negativamente sull'esperienza dell'utente. Dopotutto, a nessuno interessa quanto sia bello il testo se impiega un tempo eccessivo per essere visualizzato.

Per ridurre il rischio di un download lento dei caratteri, la maggior parte dei browser implementa un timeout dopo il quale verrà utilizzato un carattere di riserva. Si tratta di una tecnica utile, ma purtroppo l'implementazione effettiva varia in base al browser.

• Chrome e Firefox hanno un timeout di tre secondi dopo il quale il testo viene visualizzato con il carattere di riserva. Se il carattere riesce a essere scaricato, alla fine avviene uno scambio e il testo viene visualizzato di nuovo con il carattere previsto.
• Internet Explorer ha un timeout di zero secondi che comporta il rendering immediato del testo. Se il carattere richiesto non è ancora disponibile, viene utilizzato un carattere di riserva e il testo viene visualizzato di nuovo in un secondo momento, quando il carattere richiesto diventa disponibile.
• Safari non ha un comportamento di timeout (o almeno non oltre un timeout di rete di base).

A peggiorare le cose, gli sviluppatori hanno un controllo limitato sulla decisione di come queste regole influiranno sulla loro applicazione. Uno sviluppatore attento al rendimento potrebbe preferire un'esperienza iniziale più rapida che utilizza un carattere di riserva e sfruttare il carattere web più bello solo nelle visite successive, dopo che ha avuto la possibilità di scaricarlo. Utilizzando strumenti come l'API Font Loading, potrebbe essere possibile ignorare alcuni comportamenti predefiniti del browser e ottenere miglioramenti delle prestazioni, ma a costo di dover scrivere quantità non trascurabili di codice JavaScript che devono poi essere incorporate nella pagina o richieste da un file esterno, con un aumento della latenza HTTP.

Per contribuire a risolvere questa situazione, il gruppo di lavoro CSS ha proposto un nuovo descriptor @font-face, font-display, e una proprietà corrispondente per controllare il rendering di un carattere scaricabile prima del caricamento completo.

Tempistiche di download dei caratteri

Analogamente ai comportamenti di timeout dei caratteri esistenti implementati oggi da alcuni browser, font-display suddivide la durata del download di un carattere in tre periodi principali.

1. Il primo periodo è il periodo del blocco di caratteri. Durante questo periodo, se il carattere non viene caricato, qualsiasi elemento che tenta di utilizzarlo deve essere visualizzato con un carattere di riserva invisibile. Se il carattere viene caricato correttamente durante il periodo di blocco, viene utilizzato normalmente.
2. Il periodo di sostituzione dei caratteri si verifica immediatamente dopo il periodo di blocco dei caratteri. Durante questo periodo, se il carattere non viene caricato, qualsiasi elemento che tenta di utilizzarlo deve essere visualizzato con un carattere di riserva. Se il carattere viene caricato correttamente durante il periodo di scambio, viene utilizzato normalmente.
3. Il periodo di errore del carattere si verifica immediatamente dopo il periodo di sostituzione dei caratteri. Se il carattere non è ancora stato caricato all'inizio di questo periodo, viene contrassegnato come caricamento non riuscito, causando il normale fallback del carattere. In caso contrario, il carattere viene utilizzato normalmente.

Comprendere questi periodi significa che puoi utilizzare font-display per decidere come deve essere visualizzato il carattere a seconda che sia stato scaricato o meno e quando.

Quale valore font-display è più adatto a te?

Per utilizzare il descrittore font-display, aggiungilo alle regole at @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display attualmente supporta il seguente intervallo di valori auto | block | swap | fallback | optional.

Automatica

auto utilizza la strategia di visualizzazione dei caratteri utilizzata dall'user-agent. Al momento, la maggior parte dei browser ha una strategia predefinita simile a block.

blocco

block assegna al carattere un breve periodo di blocco (nella maggior parte dei casi è consigliabile 3 secondi) e un periodo di scambio infinito. In altre parole, il browser disegna inizialmente un testo "invisibile" se il carattere non è caricato, ma sostituisce il carattere non appena viene caricato. A questo scopo, il browser crea un carattere anonimo con dimensioni simili al carattere selezionato, ma con tutti i glifi che non contengono "inchiostro". Questo valore deve essere utilizzato solo se il rendering del testo in un determinato carattere è necessario per l'utilizzo della pagina.

inverti

swap assegna al carattere un periodo di blocco di zero secondi e un periodo di scambio infinito. Ciò significa che il browser disegna immediatamente il testo con un carattere di riserva se il carattere non viene caricato, ma sostituisce il carattere non appena viene caricato. Analogamente a block, questo valore deve essere utilizzato solo quando il rendering del testo in un determinato carattere è importante per la pagina, ma il rendering in qualsiasi carattere trasmette comunque un messaggio corretto. Il testo del logo è un buon candidato per la sostituzione, poiché la visualizzazione del nome di un'azienda utilizzando un'opzione di riserva ragionevole trasmette il messaggio, ma alla fine utilizzerai il carattere ufficiale.

fallback

L'attributo fallback assegna al carattere un periodo di blocco estremamente breve (si consiglia di utilizzare un valore pari o inferiore a 100 ms nella maggior parte dei casi) e un breve periodo di scambio (si consiglia di utilizzare un valore pari a tre secondi nella maggior parte dei casi). In altre parole, se il carattere non viene caricato, inizialmente viene visualizzato con un carattere di riserva, ma viene sostituito non appena viene caricato. Tuttavia, se trascorre troppo tempo, il valore di riserva verrà utilizzato per il resto del ciclo di vita della pagina. Il valore fallback è una buona scelta per elementi come il testo del corpo, in cui vuoi che l'utente inizi a leggere il prima possibile e non vuoi disturbare la sua esperienza spostando il testo durante il caricamento di un nuovo carattere.

facoltativo

Facoltativo assegna al carattere un periodo di blocco estremamente ridotto (nella maggior parte dei casi è consigliato un valore pari o inferiore a 100 ms) e un periodo di scambio pari a zero secondi. Analogamente al fallback, si tratta di una buona scelta quando il carattere in download è più un "bell'avere" ma non è fondamentale per l'esperienza. Il valore facoltativo lascia al browser la decisione di avviare o meno il download del carattere, che potrebbe scegliere di non eseguire o di eseguire con priorità bassa, a seconda di ciò che ritiene essere meglio per l'utente. Questo può essere utile in situazioni in cui l'utente ha una connessione debole e il download di un carattere potrebbe non essere il miglior utilizzo delle risorse.

Supporto browser

font-display è attualmente dietro il flag Funzionalità della piattaforma web sperimentale in Chrome 49 per computer ed è disponibile in Opera e Opera per Android.

Demo

Dai un'occhiata all'esempio per provare font-display. Per gli sviluppatori attenti al rendimento, può essere un altro strumento utile a tua disposizione.