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

A partire da Chrome 83, link rel="preload" e font-display: optional possono essere combinati per rimuovere completamente i jank del layout

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 vengono precaricati i caratteri facoltativi.

Ottimizzando i cicli di rendering, Chrome 83 elimina le variazioni del layout durante il precaricamento dei caratteri facoltativi. La combinazione di <link rel="preload"> con font-display: optional è il modo più efficace per garantire l'assenza di jank del layout 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

La variazione del layout o il nuovo layout si verifica quando una risorsa di una pagina web cambia in modo dinamico, causando una "variazione" dei contenuti. Il recupero e il rendering dei web font possono causare direttamente variazioni del layout in uno dei seguenti modi:

• Un carattere di riserva viene sostituito con un nuovo carattere ("flash di testo senza stile")
• Il testo "invisibile" viene mostrato finché non viene eseguito il rendering di un nuovo carattere 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, ognuno di questi valori supportati può attivare il ricalcolo del layout in uno dei due modi elencati sopra, fino ad ora.

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

Caratteri facoltativi

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

• Block: esegue il rendering del testo "invisibile", ma passa al carattere web non appena termina il caricamento.
• Swap: esegue il rendering del testo utilizzando un carattere di sistema di riserva, ma passa al carattere web non appena il caricamento è completato.
• Errore: 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 per un breve periodo di tempo 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 avviene alcuno scambio.

Comportamento precedente di font-display: optional in Chrome quando il font 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 visualizzato e utilizzato nella pagina.

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

Chrome esegue nuovamente il rendering della pagina due volte in entrambe le istanze, indipendentemente dal fatto che venga utilizzato il carattere di riserva o che il carattere personalizzato venga caricato in tempo. Ciò causa un leggero sfarfallio del testo invisibile e, nei casi in cui viene eseguito il rendering di un nuovo carattere, un jank del layout che sposta alcuni contenuti della pagina. Ciò 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.

In Chrome 83 sono state introdotte ottimizzazioni per rimuovere completamente il primo ciclo di rendering per i caratteri facoltativi precaricati con <link rel="preload'>. Invece, il rendering viene bloccato fino al completamento del caricamento del carattere personalizzato o fino al trascorrere di un determinato periodo di tempo. Questo periodo di timeout è attualmente impostato su 100 ms, ma potrebbe cambiare nel prossimo futuro per ottimizzare le prestazioni.

Nuovo comportamento di 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 di 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 facoltativi in Chrome elimina la possibilità di jank del layout e di flash di testo non formattato. Questo corrisponde al comportamento richiesto, come specificato in CSS Fonts Module Level 4, in cui i caratteri facoltativi non devono mai causare un nuovo layout e gli user agent possono invece ritardare il rendering per un periodo di tempo adeguato.

Sebbene non sia necessario precaricare un carattere facoltativo, 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 facoltativi con queste nuove ottimizzazioni. Segnala un problema se riscontri problemi o vuoi inviare suggerimenti per le funzionalità.