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

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

Houssein Djirdeh

Ottimizzando i cicli di rendering, Chrome 83 elimina lo spostamento del layout durante il precaricamento dei caratteri facoltativi. La combinazione di <link rel="preload"> con font-display: optional è il modo più efficace per garantire che non siano presenti interruzioni del layout durante il rendering dei caratteri personalizzati.

Compatibilità del browser

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

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

Rendering dei caratteri

Una variazione del layout, o re-layout, si verifica quando una risorsa su una pagina web cambia in modo dinamico, determinando una "variazione" dei contenuti. Il recupero e il rendering dei caratteri web possono causare direttamente variazioni del layout in due modi:

• Un carattere di riserva viene scambiato con un nuovo carattere ("lampo di testo senza stile")
• Il testo "Invisibile" viene visualizzato finché non viene visualizzato un nuovo carattere nella pagina ("testo lampeggiante invisibile")

La proprietà CSS font-display consente di modificare il comportamento di rendering dei caratteri personalizzati tramite una serie di diversi valori supportati (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 re-layout in uno dei due modi elencati sopra. Finora,

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:

• Blocca: rende il testo "invisibile", ma passa al carattere web non appena termina il caricamento.
• Scambia: visualizza il testo utilizzando un carattere di sistema di riserva, ma passa al carattere web al termine del caricamento.
• Non superato: visualizza il 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.

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.

Chrome visualizza la pagina due volte in entrambi i casi, indipendentemente dal fatto che venga utilizzato il carattere di riserva o che il carattere personalizzato termini il caricamento in tempo. Questo causa un leggero sfarfallio del testo invisibile e, nel caso in cui venga visualizzato un nuovo carattere, il blocco del layout che sposta parte dei contenuti della pagina viene spostato. Questo si verifica anche se il carattere è archiviato nella cache del disco del browser e può essere caricato molto prima del termine del periodo di blocco.

Le ottimizzazioni sono arrivate in Chrome 83 per rimuovere completamente il primo ciclo di rendering per i caratteri facoltativi precaricati con <link rel="preload'>. ma viene bloccato fino al termine del caricamento del carattere personalizzato o fino a quando non è trascorso un determinato periodo di tempo. Questo periodo di timeout è attualmente impostato su 100 ms, ma potrebbe variare nel prossimo futuro per ottimizzare le prestazioni.

Il precaricamento dei caratteri facoltativi in Chrome elimina la possibilità di layout jank e lampo di testo senza stile. Questo comportamento corrisponde al comportamento richiesto specificato nel livello 4 del modulo dei caratteri CSS, dove i caratteri facoltativi non dovrebbero mai causare il re-layout e gli user agent possono ritardare il rendering per un periodo di tempo adeguato.

Sebbene non sia necessario precaricare un carattere facoltativo, aumenta notevolmente le probabilità che venga caricato prima del primo ciclo di rendering, soprattutto se non è ancora archiviato nella cache del browser.

Conclusione

Il team di Chrome vuole conoscere le tue esperienze precaricando caratteri facoltativi con queste nuove ottimizzazioni in atto. Segnala un problema se riscontri problemi o se vuoi ignorare eventuali suggerimenti sulle funzionalità.