Webfont e performance: caratteri senza penalità sui tempi

Un bel carattere trasforma un sito qualunque in uno che suona come Lei. Trasporta l'atmosfera, crea fiducia, La distingue dalla concorrenza. Solo che questa presenza ha un prezzo che in molti trascurano: i caratteri vanno caricati, e quando qualcosa va storto la prima impressione traballa.

In questo articolo mostro perché i webfont possono appesantire i tempi di caricamento, che cosa dà più fastidio e come ottenere una bella tipografia senza pagarla in velocità. Il tutto senza tecnicismi incomprensibili.

Perché i caratteri diventano un peso

Sul Suo computer il carattere è semplicemente lì. Sul web è diverso: ogni carattere che non è presente di serie sul dispositivo del visitatore deve prima essere scaricato da internet, come file a sé, in aggiunta a tutto il resto.

E questi file di caratteri sono spesso sorprendentemente pesanti. Una famiglia con più stili, normale, grassetto, corsivo, può facilmente arrivare a diverse centinaia di kilobyte. Sembra poco, ma in mobilità, con una ricezione instabile, sono secondi preziosi. Proprio nel momento in cui il visitatore decide se restare.

Il problema più fastidioso: il testo che salta

C'è un effetto che quasi tutti conoscono senza saperlo nominare: si apre una pagina, si comincia a leggere e all'improvviso tutto salta di una riga verso il basso, perché solo ora si è caricato il carattere giusto. Questo è il layout shift, ed è il fastidio più grande legato ai webfont.

Succede perché il carattere sostitutivo, visualizzato per primo, ha una larghezza e un'altezza un po' diverse da quello definitivo. Quando arriva il carattere vero, tutto si ricompone. Nel migliore dei casi dà un senso di irrequietezza, nel peggiore si clicca a vuoto, perché in quel momento il pulsante è saltato altrove.

Google valuta proprio questo, sotto la voce Cumulative Layout Shift. Una pagina tranquilla e stabile conta quindi non solo per l'occhio, ma anche per il posizionamento. Trova maggiori dettagli nei miei altri articoli su velocità e Core Web Vitals.

Il secondo ostacolo: il testo invisibile

C'è ancora un'altra variante, quasi peggiore. Alcune pagine nascondono completamente il testo finché il carattere non è caricato. Il visitatore fissa quindi una superficie vuota, benché il contenuto sia già disponibile da tempo. Gli esperti lo chiamano testo invisibile.

Entrambi, testo che salta e testo invisibile, si possono evitare. È una questione di quanto accuratamente il carattere è stato integrato.

Come i webfont si caricano in fretta e senza scosse

La buona notizia: non si deve scegliere tra bel carattere e buona performance. Con alcuni accorgimenti collaudati si ottengono entrambi. Ecco le leve più efficaci:

• Caricare solo ciò che serve: spesso bastano due o tre stili invece dell'intera famiglia. Ogni stile tralasciato è un file in meno.
• Servire il carattere in proprio: invece di prenderlo da un servizio esterno, metto il file del carattere direttamente accanto al sito. Questo evita una deviazione ed è per di più più rispettoso della privacy.
• Usare formati moderni e leggeri: il formato WOFF2 è nettamente più piccolo dei vecchi file di caratteri, stesso carattere, meno peso.
• Avvisare presto il browser: con una piccola indicazione nel codice il carattere si carica già mentre il resto della pagina si costruisce, invece che solo dopo.
• Mostrare subito il testo: il browser può visualizzare prima il contenuto in un carattere sostitutivo e passare silenziosamente a quello giusto. Così nessuno vede una pagina vuota.

Come evitare del tutto il salto

Il trucco contro il testo che salta è sorprendentemente semplice: si sceglie un carattere sostitutivo simile a quello definitivo e si accordano entrambi in modo che occupino all'incirca lo stesso spazio. Quando arriva il carattere vero, non cambia quasi nulla, nessun salto, nessuna scossa.

È un lavoro di rifinitura che nella pagina finita non si nota. Ma sono proprio questi dettagli invisibili a decidere se una pagina risulta di valore e tranquilla oppure frenetica. Ed è molto più facile costruirla bene fin dall'inizio che correggerla in seguito.

Non bastano anche i caratteri di sistema?

Una domanda legittima. Esistono caratteri presenti praticamente su ogni dispositivo, non devono affatto essere caricati e sono quindi velocissimi. Per alcuni progetti sono una scelta onesta e valida.

Ma un carattere proprio è spesso una gran parte del carattere di un marchio. Il mio approccio è perciò pragmatico: un carattere selezionato dove ha effetto, integrato in modo pulito, completato da un carattere sostitutivo ben accordato. Così ottiene il carattere, senza la penalità.

Carattere e velocità non si escludono a vicenda

I webfont non sono un male necessario, ma uno strumento, e come ogni strumento è la cura a decidere il risultato. Usato bene, un bel carattere si carica quasi impercettibilmente, senza che nulla salti o si blocchi. Usato male, costa pazienza e fiducia.

Per questo integro i caratteri a mano e verifico che si carichino in fretta e senza scosse, affinché la Sua presenza non solo appaia bene, ma dia anche una buona sensazione. Se la Sua pagina traballa durante il caricamento o risulta lenta, guardo volentieri da dove dipende. Mi contatti semplicemente tramite il modulo di contatto e ne parliamo con calma.