Se stai ottimizzando la pagespeed di un sito, il caricamento degli stili di carattere come i Google Fonts possono generare dei rallentamenti.

Per la precisione, il caricamento da link esterno dei Google Fonts blocca il render della pagina che deve aspettare la risoluzione dei processi dedicati ai caratteri.

Un altro problema ricorrente è il caricamento delle informazioni della pagina prima del fonts, che crea l’effetto FOIT (flash of invisible text), rendendo invisibile il testo fino alla fine del caricamento dell’informazione richiesta.

Nell’articolo precedente ho iniziato a pubblicare guide per l’ottimizzazione tramite Lighthouse, usando il tool di Google per individuare le aree critiche da migliorare.

In questo articolo continuerò con il miglioramento della User Experience mostrando metodi di caricamento alternativi dei fonts. 

Caricamento asincrono

Il metodo più semplice per risolvere i problemi di blocco nel render della pagina è caricare in maniera asincrona i fonts.

Questo metodo richiede l’utilizzo di javascript e un setup di fonts di fallback (caricati nel caso il font primario non sia visibile) nel caso in cui l’utente blocchi da impostazione del browser i processi javascript.

Un altro requisito è che il browser supporti la chiamata CSS @font-face.

Per operare bisogna padroneggiare Web Font Loader, un progetto realizzato da Google e Adobe Typekit

Esistono degli script personalizzati per i differenti tipi di fonts (Fonts.com, Typekit) che troverete nella pagina del progetto, vi riporto solo la versione più utilizzata, quella dei fonts di Google:

<script type="text/javascript">
 WebFontConfig = { 
  google: { families: [ 'INSERISCI TRA APICI I TUOI FONTS' ] }
};
(function() { var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
'://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js'; 
wf.type = 'text/javascript'; 
wf.async = 'true';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(wf, s);
})(); </script>

Lo svantaggio di questo metodo è che richiede una certa familiarità con le proprietà di @font-face e un bel po di prove per comprendere qual’è l’opzione migliore per il sito.

Senza considerare che la visibilità dei fonts dipende da una fonte esterna, che potrebbe essere essere inutilizzabile per un tempo indefinito.

Caricare i google fonts localmente

Un metodo semplice ed efficace è quello di caricare localmente i font ed effettuare la chiamata tramite quella sezione di CSS (critical path) interno alle pagine che vogliamo venga caricato velocemente.

Vai su fonts.google.com e scarica i fonts che utilizzi.

  • Vai su fonts.google.com e scarica i fonts che utilizzi.
  • Crea una cartella nella root del tuo sito dove inserire i file scaricati.
  • Vai su Google Webfonts Helper e personalizza il codice CSS relativo ai fonts in uso. Puoi inserire il percorso dal quale verrà caricato il carattere direttamente sul sito.
  • Inserisci le chiamate nel tuo CSS principale.
  • Controlla che non ci siano chiamate esterne ancora attive.

Lo svantaggio di questo sistema è che risulta più lento del caricamento da CDN di Google.

Esatto: caricare un file localmente impiega più tempo del caricamento da fonts.google.com .

Ma c’è una soluzione.

Potete segnalare i file nel vostro service worker e tenerli in cache per un tempo indefinito.

In questo modo riuscirete ad avere i caratteri necessari a visualizzare il sito sempre visibili e senza ritardi nel caricamento della pagina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.