5. Le FOUT with class
Cette façon de charger les fonts est très intéressante. Elle permet de contrôler le chargement des fonts en JavaScript via l'API CSS Font Loading ou via différentes librairies comme Font Face Observer.
Le principe est de détecter le moment où une font est chargée, et seulement l'appliquer au niveau CSS après qu'elle a été chargée avec succès. Généralement, cela consiste à ajouter une classe à l'élément HTML du document. On évite ainsi le texte invisible.
Malgré tout, cette optimisation nécessite de la maintenance et elle est difficile à automatiser.
6. L'inlining / preload des fonts
Cette optimisation est un peu plus poussée que les précédentes. L'objectif ici est d'afficher le texte directement dans la bonne police, on ne veut ni texte invisible, ni police fallback.
Pour cela, nous générons une police qu'avec des éléments critiques (les caractères de A à Z, les chiffres et la ponctuation). Le fichier est ainsi plus léger, nous pouvons alors l'inliner dans un CSS que nous chargeons le plus tôt possible.
Les variations de style (italique, gras, etc.) seront quant à elles chargées dans un second temps.
Cette stratégie est la meilleure en termes de performance, mais la maintenance nécessaire est très importante.
Pour en savoir plus sur les avantages et inconvénients de chacune de ces stratégies d'optimisation des fonts, nous vous invitons à faire un tour sur cette présentation, basée sur des études menées à la fois en interne chez Fasterize, mais aussi sur les travaux de Bram Stein et Zach Leatherman, deux gourous de la webperf :
retours d'expérience et être au courant de l'actualité webperf, abonnez-vous à notre newsletter :
