Fallback font e CLS

…nel contesto di Core Web Vitals

Il caricamento di un font personalizzato (un font che non è noto per impostazione predefinita da tutti i browser) può facilmente causare ritardi nella sequenza di caricamento e un problema di CLS (spostamento layout cumulativo). Questo vale per il primo caricamento di pagina sul sito, fino a quando il font non viene memorizzato nella cache dal browser.

Puoi provare a precaricare e/o inviare il font personalizzato, ma ci sarà sempre un momento in cui il browser riprodurrà il corpo con un font predefinito. Ciò è particolarmente vero per i dispositivi lenti o su una connessione lenta. È possibile nascondere l'intero corpo fino al caricamento del tipo di carattere, ma i punteggi FCP (primo contento) e LCP (massimo contento) saranno altamente penalizzati.

È anche possibile utilizzare trucchi CSS come font-display: optional, ma il font potrebbe non essere caricato affatto su una connessione lenta: il browser ha l'istruzione di ignorarlo dopo un certo (breve) ritardo.

Quest'ultima soluzione non impedisce di influenzare il punteggio CLS: quando si scambia il font, la dimensione del contenuto potrebbe cambiare e il layout potrebbe "spostarsi".

Esiste un altro meccanismo che può essere utilizzato per evitare questi 2 problemi (ritardo nel caricamento dei font e CLS): utilizza un fallback dei font.

L’idea del fallback del font è di ridimensionare un font predefinito del browser in modo che, quando applicato al contenuto di una pagina, il contenuto occupi lo stesso "spazio" con il font di fallback e con il font personalizzato. In questo modo, è possibile scambiare l'uno con l'altro senza spostare il layout. Se si utilizza un tipo di carattere predefinito "simile" al tipo di carattere personalizzato, i pochi millisecondi del primo caricamento della pagina saranno molto simili all'esperienza che si desidera fornire con il tipo di carattere personalizzato. È quindi possibile posticipare il caricamento del carattere personalizzato o almeno renderlo non bloccante nella sequenza di caricamento.

Estensione font-fallback

È stata creata un'estensione chrome per facilitare il calcolo del fallback dei font.

Quando apri l’estensione su una pagina, analizza le facce dei font in uso su tale pagina: una faccia dei font è una combinazione di famiglia e spessore dei font. Ora, per ciascuna di queste facce, è possibile selezionare un font browser predefinito ed eseguire il calcolo di fallback del font. Per ogni font, l'estensione calcola quale size-adjustment del font predefinito del browser è necessario in modo che il contenuto abbia la stessa larghezza con entrambi i font.
Il calcolo viene eseguito solo sulla larghezza perché l'altezza deve essere controllata da line-height: è necessario impostare un line-height sul sito per non lasciare che sia il font a decidere l'altezza del testo. Questo vale per paragrafi, intestazioni, elenchi…

Nota: con i kit di tipi di carattere, si tende a caricare molte facce che non vengono mai utilizzate (o che vengono utilizzate in una posizione diversa sul sito rispetto alla pagina corrente). L'estensione mostra anche quante sono caricate in totale. È anche un buon indicatore se si può fare qualche ottimizzazione: ottimizzare il kit font riducendo le facce font che fornisce, è possibile risparmiare un sacco di byte da trasferire!

Al termine del lavoro di calcolo, puoi copiare il CSS calcolato e incollarlo nel CSS principale.

Le famiglie di font generate devono essere aggiunte dopo il font personalizzato nel CSS font-family: il browser inizialmente non troverà il font personalizzato, utilizza il fallback fino a quando, successivamente, il font personalizzato non viene caricato. Poiché utilizzano lo stesso spazio, lo scambio non genera CLS.

Per ottimizzare il valore di regolazione del carattere, potete utilizzare anche il pannello di simulazione.

Selezionando la casella, il font personalizzato viene sostituito dal font di fallback calcolato direttamente nella pagina. L'input di testo consente di modificare il valore size-adjust e visualizzare immediatamente il risultato (è necessario attivare o disattivare la casella di controllo ogni volta che si modifica il valore).

Casi Edge

L’estensione effettua un calcolo basato su un sito esistente, con contenuto e regole CSS esistenti. In un contesto diverso, size-adjust potrebbe non adattarsi perfettamente e lo scambio di font potrebbe ancora produrre CLS:

Troverai ulteriori dettagli tecnici e altri strumenti direttamente nell'archivio delle estensioni: https://github.com/adobe/helix-font-fallback-extension