Impedisci lo spostamento del layout e i flash di testo invisibile (FOIT) precaricando i caratteri facoltativi

A partire da Chrome 83, è possibile combinare link rel="preload" e font-display: optional per eliminare completamente il layout jank

Houssein Djirdeh

Nota: in Chrome 83 sono stati apportati nuovi miglioramenti al caricamento dei caratteri per eliminare completamente lo spostamento del layout e il flash di testo invisibile (FOIT) quando i caratteri opzionali vengono precaricati.

Ottimizzando i cicli di rendering, Chrome 83 elimina lo spostamento del layout durante il precaricamento dei caratteri opzionali. La combinazione di <link rel="preload"> con font-display: optional è il modo più efficace per garantire l'assenza di layout jank durante il rendering dei caratteri personalizzati.

Compatibilità del browser

Consulta i dati di MDN per informazioni aggiornate sul supporto cross-browser:

• <link rel="preload">
• font-display

Rendering dei caratteri

Lo spostamento del layout, o ri-layout, si verifica quando una risorsa su una pagina web cambia dinamicamente, causando uno "spostamento" dei contenuti. Il recupero e il rendering dei caratteri web possono causare direttamente spostamenti del layout in due modi:

• Un carattere di riserva viene sostituito con un nuovo carattere ("flash di testo senza stile")
• Il testo "invisibile" viene mostrato finché un nuovo carattere non viene sottoposto a rendering nella pagina ("flash di testo invisibile")

La proprietà CSS font-display consente di modificare il comportamento di rendering dei caratteri personalizzati tramite una serie di valori supportati diversi (auto, block, swap, fallback e optional). La scelta del valore da utilizzare dipende dal comportamento preferito per i caratteri caricati in modo asincrono. Tuttavia, finora, ognuno di questi valori supportati poteva attivare il ri-layout in uno dei due modi elencati sopra.

Nota: la metrica Cumulative Layout Shift consente di misurare l'instabilità del layout di una pagina web.

Caratteri opzionali

La proprietà font-display utilizza una sequenza temporale di tre periodi per gestire i caratteri che devono essere scaricati prima di poter essere sottoposti a rendering:

• Block: esegui il rendering del testo "invisibile", ma passa al carattere web non appena il caricamento è terminato.
• Swap: esegui il rendering del testo utilizzando un carattere di sistema di riserva, ma passa al carattere web non appena il caricamento è terminato.
• Fail: esegui il rendering del testo utilizzando un carattere di sistema di riserva.

In precedenza, i caratteri designati con font-display: optional avevano un periodo di blocco di 100 ms e nessun periodo di scambio. Ciò significa che il testo "invisibile" viene visualizzato molto brevemente prima di passare a un carattere di riserva. Se il carattere non viene scaricato entro 100 ms, viene utilizzato il carattere di riserva e non viene eseguito alcuno scambio.

Comportamento precedente font-display: optional in Chrome quando il carattere viene scaricato dopo il periodo di blocco di 100 ms

Tuttavia, se il carattere viene scaricato prima del completamento del periodo di blocco di 100 ms, il carattere personalizzato viene sottoposto a rendering e utilizzato nella pagina.

Comportamento precedente font-display: optional in Chrome quando il carattere viene scaricato prima del periodo di blocco di 100 ms

In entrambi i casi, Chrome esegue il rendering della pagina due volte , indipendentemente dal fatto che venga utilizzato il carattere di riserva o che il caricamento del carattere personalizzato termini in tempo. Questo causa un leggero sfarfallio del testo invisibile e, nei casi in cui viene sottoposto a rendering un nuovo carattere, un layout jank che sposta alcuni contenuti della pagina. Questo si verifica anche se il carattere è memorizzato nella cache del disco del browser e può essere caricato molto prima del completamento del periodo di blocco.

Ottimizzazioni sono state introdotte in Chrome 83 per rimuovere completamente il primo ciclo di rendering per i caratteri opzionali precaricati con <link rel="preload'>. Il rendering viene invece bloccato finché il caricamento del carattere personalizzato non è terminato o non è trascorso un determinato periodo di tempo. Questo periodo di timeout è attualmente impostato su 100 ms, ma potrebbe essere modificato nel prossimo futuro per ottimizzare le prestazioni.

Nuovo comportamento font-display: optional in Chrome quando i caratteri vengono precaricati e il carattere viene scaricato dopo il periodo di blocco di 100 ms (nessun flash di testo invisibile)

Nuovo comportamento font-display: optional in Chrome quando i caratteri vengono precaricati e il carattere viene scaricato prima del periodo di blocco di 100 ms (nessun flash di testo invisibile)

Il precaricamento dei caratteri opzionali in Chrome elimina la possibilità di layout jank e flash di testo senza stile. Questo corrisponde al comportamento richiesto specificato nel modulo CSS Fonts Level 4, in cui i caratteri opzionali non devono mai causare il ri-layout e gli user agent possono invece ritardare il rendering per un periodo di tempo adeguato.

Sebbene non sia necessario precaricare un carattere opzionale, ciò aumenta notevolmente la probabilità che venga caricato prima del primo ciclo di rendering, soprattutto se non è ancora memorizzato nella cache del browser.

Conclusione

Il team di Chrome è interessato a conoscere le tue esperienze di precaricamento dei caratteri opzionali con queste nuove ottimizzazioni. Segnala un problema se riscontri problemi o vuoi inviare suggerimenti per le funzionalità.