Home CSS Web font, come ottimizzare per migliorare le performance

Web font, come ottimizzare per migliorare le performance

102
0
Lettering and Typography for Designs: Logo, Poster, Packaging, Invitation, etc. The modern cursive font in minimal and simple style isolated on white background.

Quando abbiamo come obiettivo quello di progettare un sito web, la regola per quanto riguarda la scelta dei font è chiara e netta: è necessario utilizzare font standard.

Il loro grande vantaggio deriva dal fatto che, poiché sono già installati sul dispositivo, non è necessario scaricare nuovi file per visualizzare il contenuto di una pagina. E il fatto che non vengano trasferiti dei dati non solo riduce il numero di comunicazioni con il server e quindi abbrevia anche il tempo di caricamento della pagina.

Ecco una lista di font sicuri per il web che generalmente non creano problemi

Ecco una lista di font sicuri per il web che generalmente non creano problemi:

  • Arial
  • Brush Script MT
  • Comic Sans
  • Courier New
  • Garamond
  • Georgia
  • Helvetica
  • Impact
  • Lucida Console
  • Palatino
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Utilizzare i caratteri non predefini

Se volete aggiungere un web font al vostro sito, avete alcune opzioni. In primo luogo, è possibile utilizzare i font ospitati altrove, come con Google Fonts. Le istruzioni qui dipendono da quale servizio scegliete. Con Google Fonts, dovreste incorporare il font che volete usare nel vostro <head> e poi richiamarlo quando volete usarlo.

Potete anche ospitare localmente i font che avete scaricato da internet sul vostro sito web. Questo può essere preferibile perché non avrete bisogno di affidarvi a servizi di terze parti.

Fortunatamente, questo è molto facile da fare se avete un web font correttamente configurato. Basta caricare i file sul vostro server, potete usare la regola @font-face nel vostro foglio di stile per definirlo.
Per esempio:

@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}

È necessario invece prestare molta attenzione a quale web font si utilizza nel proprio sito web, in quanto e’ elemento può avere un impatto rilevante per il caricamento della pagina.

Esistono diversi modi in cui i caratteri web influiscono sulle prestazioni:

  • RITARDO NEL RENDERING DEL TESTO: se un carattere Web non è stato caricato, i browser in genere ritardano il rendering del testo. In molte situazioni, questo ritarda il First Contentful Paint (FCP). In alcune situazioni, ciò ritarda anche il Largest Contentful Paint (LCP).
  • SPOSTAMENTI DI LAYOUT: la pratica dello scambio di caratteri ha il potenziale di causare cambiamenti di layout .

In questo caso sono presenti 6 font diversi che devono essere caricati, inoltre tutti questi caratteri danno luogo ad altre problematiche:


Ecco un altro dettaglio sugli errori che il browser incontra nel momento di eseguire il rendering della pagina:

Come migliorare la gestione dei web font:

Convertire i file TTF in WOFF2:

Il nuovo protocollo per migliorare le prestazioni di caricamento si chiama WOFF2.

Questo nuovo protocollo fornisce una versione compressa dei font a tutto vantaggio del tempo di caricamento.

Dichiarazione in linea:

Migliorare la prestazioni di caricamento sarebbe buona prassi dichiarare in line i font che si vogliono caricare sulla pagina:

Preload o Preconnect?:

Nel caso dei web font è importante utilizzare il rel=”preconnect” se si vogliono caricare font come quelli messi a disposizione da Google.

Il preload al contrario andrebbe a peggiorare il tempo di caricamento della pagina in quanto comunque farebbe una chiamata server a una risorsa esterna:

Le “Famiglie di caratteri” invece sono insiemi di font che prevedono diverse tipologie di caratteri come il Bold, l’Italic, il Light ecc. e con il caricamento di un’unica cartella si avranno a disposizione molte variabili per gestire i testi delle pagine, anche in questo caso a vantaggio delle performance.
Font-display:

font-display informa il browser su come procedere con il rendering del testo quando il font web associato non è stato caricato.

 

senza entrare troppo nel dettaglio di tutte le tipologie la discriminante maggiore è tra font-display: optional che è l’approccio più performante in quanto i web font reagiranno in non più di 100ms e non comporteranno variazioni di layout, mentre se l’aspetto “estetico” è una componente irrinunciabile anche e soprattutto a discapito delle performance dovremmo inserire font-display: swap.

Rimuovere i caratteri non necessari

Un font può incorporare un numero maggiore o minore di caratteri a seconda del numero di lingue supportate. Se non si dispone dell’utilizzo di tutte le lingue, è possibile rimuovere dai file un certo numero di caratteri utilizzati solo in determinati alfabeti e ridurne così notevolmente le dimensioni.

  1. Identificazione del numero di lingue supportate dal font
    Dopo aver scelto e scaricato un font da Dafont.com, inviare il file .otf a FontDrop per scoprire il numero di lingue supportate da questo font (qui 69 lingue).
  2. Selezionare i caratteri e gli alfabeti di cui hai bisogno
    Utilizzando lo strumento gratuito di Everything Fonts , seleziona solo i caratteri e gli alfabeti che desideri conservare e quindi carica di nuovo il file, senza fronzoli.
Previous articleOperazioni matematiche in PHP
Next articleArte – Theme WordPress per Creati e Artisti

LEAVE A REPLY

Please enter your comment!
Please enter your name here