Come ottimizzare Font-face e migliorare le performance.


Premessa

L’utilizzo di font-face è ormai diventata una soluzione comune per molteplici siti web. L’ampio supporto dei browser ha portato sviluppatori e designer ad abbandonare altre tecniche di font-replacement basate su javascript o flash in favore di questa tecnica.

Integrazione di font-face in una pagina web

Partiamo come esempio da un’integrazione standard del font-face:

@font-face {
    font-family: 'custom font';
    src: url('../font/custom-font.eot');
    src: url('../font/custom-font.eot?#iefix') format('embedded-opentype'),
         url('../font/custom-font.woff') format('woff'),
         url('../font/custom-font.ttf') format('truetype'),
         url('../font/custom-font.svg#custom-font') format('svg');
	font-weight: normal;
        font-style: normal;
}

Per questo esempio sono partito da un font-face-kit proposto su font squirrel del font Yanone nelle varianti regular,bold e light.
Le uniche modifiche apportate sono sugli elementi contenitori e la definizione dei font attraverso le classi.
Considerato che a livello di rendering un selettore specifico è più performante rispetto ad un selettore generico la soluzione ideale sarebbe di utilizzare gli id ma per porre l’esempio in un contesto reale dove esistono più elementi nella pagina con lo stesso font ho utilizzato le classi.
In questo caso la soluzione non pesa in maniera significativa sui tempi di rendering e permette di gestire lo stile in maniera più semplice.

Demo – Integrazione classica di font-face

Ottimizzazione

Come visto in precedenza la soluzione è funzionale ma può diventare onerosa nel caso esistano numerosi font da applicare nella stessa pagina.
Nell’esempio proposto abbiamo 3 font quindi 3 chiamate aggiunte e 3 font diversi renderizzati nello stesso contesto portando ad un ampio consumo di risorse sia sul lato server sia sul lato client.

Ridurre le dimensioni del file

Come prima buona norma per migliorare le performance di una pagina occorre ottimizzare i pesi dei files.
Per ciò che concerne i font possiamo scegliere di non utilizzare un file che includa tutti i caratteri possibili ma si limiti a quelli che ci servono.
Su font squirrel è possibile scegliere nel dettaglio i subset di un font attraverso la modalità “expert”.

Per fare un esempio pratico, se il vostro sito è in inglese probabilmente non necessita di lettere accentate che sono invece più comuni nell’italiano.
I vantaggi di questa ottimizzazione sono evidenti sul peso dei files che si riducono notevolmente e migliorano i tempi di caricamento.
Un rovescio della medaglia è il fatto che se in un futuro abbiate bisogno di un carattere in più dovrete ricreare i file con i subset che vi occorrono.
E’ quindi consigliabile definire a priori i caratteri necessari per l’integrazione del font.

Comprimere e mettere in cache i files

Oltre a ridurre i pesi dei files è buona norma definire alcune regole sul server perchè questi vengano richiamati correttamente.
Nell’esempio a seguire definirò alcune regole nel file .htaccess da aggiungere per specificare i mime corretti alle varie estensioni dei files.

AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot

Oltre a correggere eventuali problemi di mime è opportuno settare una cache per i file dei font in modo che in seguito alla prima richiesta sul sito questi rimangano in cache e non debbano essere richiamati una seconda volta.


ExpiresActive On
ExpiresByType font/ttf "access plus 10 years"
ExpiresByType font/otf "access plus 10 years"
ExpiresByType application/vnd.ms-fontobject "access plus 10 years"
ExpiresByType application/x-woff "access plus 10 years"
ExpiresByType image/svg+xml "access plus 10 years"




Header set Cache-Control "max-age=290304000, public"


Ultimo suggerimento per l’ .htaccess è quello di servire i file dei font compressi attraverso gzip.


AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE image/svg+xml

Utilizzare text-rendering per ridurre i tempi di rendering

Per migliorare i tempi di rendering dei testi (o eventualmente la qualità) è possibile utilizzare text-rendering che si occupa della modalità di rendering dei testi. Questa proprietà non è supportata da tutti i browser ma viene ignorata in caso di mancato supporto.

text-rendering:optimizeSpeed;

In aggiunta si può utilizzare -webkit-font-smoothing per gestire l’antialias su browser basati su webkit (safari e chrome).

-webkit-font-smoothing:antialiased;

Questa proprietà è raramente utile in contesti normali ma diventa preziosa nel caso si applichino trasformazioni css ai testi.

Fontface in base64 per ridurre le richieste

Uno dei modi migliori per ottimizzare i tempi di caricamento di una pagina è quella di ridurre le richieste al server.
Come ultima modifica alla nostra soluzione originale suggerisco di includere i font in base64.

@font-face {
    font-family: 'custom font';
    src: url('../font/custom-font.eot');
	font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'custom font';
    src: url('data:application/x-font-woff;charset=utf-8;base64,ILCODICEINBASE64') format('woff'),
         url('../font/custom-font.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}

E’ possibile ottenere questo codice direttamente da font-squirrel utilizzando il font generator in modalità “expert”.

In questo modo risparmiamo la chiamata ai files dei font per i browser che supportano il data uri mentre per gli altri (internet explorer) serviremo i file nel loro formato supportato. Il problema del mancato supporto di ie per il data uri è stato risolto da ie8 che però presenta dei limiti di peso che impediscono di fatto l’inclusione dei font in base64. Alcune proposte per aggirare questi limiti sono l’utilizzo del behavior nel css o l’integrazione con l’MHTML per una diversa presentazione del base64. Al momento non esistono soluzioni definite per integrare i font in base64 su internet explorer ma questo non deve fermarci dall’ottimizzare la soluzione per tutti gli altri browser.

Conclusioni

Grazie a questi interventi è possibile notare come siamo riusciti a ridurre i tempi di caricamento con piccoli interventi mirati all’ottimizzazione.
Di seguito trovate due esempi delle soluzioni proposte per valutare le differenze sui tempi di presentazione della pagina.

Demo – Integrazione classica di font-face
Demo – Integrazione ottimizzata di font-face

Una piccola nota aggiuntiva relativa al FOUT, ovvero il tempo nel quale font e css vengono caricati e normalmente viene mostrato un font di default.
Google presenta una soluzione per gestire (non eliminare) questa casistitca. Propongo di seguito un esempio.

Demo – Integrazione ottimizzata di font-face con font loader

In questo caso potete notare come la chiamata ajax allo script di google rallenta notevolmente la pagina rimane quindi a vostra discrezione l’utilizzo o meno di questa tecnica.

Link utili
font squirrel
Convertitore in base 64 di font
htaccess e web font
gestione del base64 con behavior
gestione del base64 con MHTML
google font loader api
spiegazione approfondita del FOUT di Paul Irish

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con , . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>