Web fonts e performance CSS

Steve Souders ha condotto delle interessanti ricerche sul miglioramento della performance dei siti Web condensate nel volume High Performance Web Sites, che ha rappresentato una tappa fondamentale nella comprensione delle dinamiche relative alle best practice da seguire per avere siti veloci e performanti.

Steve attualmente lavora per Google. Recentemente ha pubblicato un articolo sull'impatto dei Web fonts (e della regola @font-face) sulla performance delle pagine. Dai suoi test risulta chiaro come tale regola comporti un notevole carico di lavoro per un browser che deve caricare, fare il parsing ed infine produrre il rendering del font specificato. L'effetto che si ha nei browser è quello di avere prima il testo reso senza il font specificato, esattamente come avviene per il problema definito FOUC (Flash Of Unstyled Content).

C'è da dire che tale problema si verifica anche con la tecnica JavaScript basata su Cufon. La dinamica è esattamente la stessa della regola @font-face: caricamento, parsing, font senza stile e solo in ultimo il rendering finale.

Testando invece la soluzione proposta da Google con i suoi Web fonts, ossia includendo il font tramite l'elemento link e un CSS esterno, non ho notato questo effetto. C'è da dire che anche in questo caso usare la marcatura HTML invece di una regola @import aumenta la performance percepita dall'utente.

In conclusione, occorre vagliare con attenzione le varie possibilità  offerte dai web fonts al fine di scegliere quella che ha il minimo impatto sulla performance del vostro sito.