Avec ou sans serif, police Google ou que vous avez décidé de customizer... Quel est l'impact du chargement des fonts sur votre vitesse de chargement ? Quelle est la meilleure stratégie à adopter pour optimiser le chargement des fonts et donc vos performances web ? Analyse des meilleures techniques d'optimisation des fonts, et décryptage du FOUT, du preload et de l'inlining... Tout savoir pour un affichage rapide des polices de caractère dans le navigateur !

D'après les statistiques de HTTP Archive, un site web est composé en moyenne de 3 fonts (chiffre d'avril 2017). Ces fonts pèsent environ 100 Ko.
Nous avons analysé de notre côté quelques sites e-commerce français et nous avons pu constater un plus grand nombre de fonts chargées : 5 à 6 par site ; mais plus légères : environ 50 Ko.

Polices de caractère et vitesse de chargement : analyse des performances web

Quel est l'impact du chargement des fonts sur le Speed Index et le Start Render ?

Dans la majorité des cas, nous constatons une baisse de 5 à 10% du Speed Index et du Start Render lorsque les fonts ne sont pas chargées sur la page.

L'impact du chargement des polices de caractère sur la performance des pages

Comment se chargent les fonts ?

Comment se chargent les fonts dans un navigateur

Les fonts se chargent après le code HTML et le CSS.

Lors du téléchargement des fonts, le navigateur peut adopter deux comportements différents :

  • Le FOUT : le Flash Of Unstyled Text qui affiche le texte dans une font sans style avant d'afficher la bonne font.
  • Le FOIT : le Flash Of Invisible Text qui n'affiche pas le texte tant que la font n'est pas chargée. Le texte reste donc invisible.

Afin d'offrir la meilleure expérience utilisateur, nous allons éviter le texte invisible autant que possible. C'est dans cette optique que des navigateurs ont récemment ajouté des timeouts lors du chargement des fonts.

Ainsi, si au bout d'un certain temps, la font n'est pas chargée, c'est une font fallback (soit une police par défaut) qui sera utilisée pour afficher le texte.

Chargement des polices de caractère : FOUT et FOIT selon le navigateur

Quelle stratégie adopter pour le chargement de vos fonts ?

1. Les "system fonts"

Certains sites de contenu majeurs (tels que Medium, des sites utilisant WordPress ou encore Github) font appel à des "system fonts", utilisables sur les plupart des OS.
Cette stratégie est intéressante dans le cas où vous n'avez pas un grand besoin de style (comme sur des dashboard par exemple).

2. Réduire le poids des fichiers

Nous vous conseillons d'utiliser le format de polices WOFF2 (norme de format de fichier de police vectorielle) pour réduire le poids de vos fichiers (et donc de vos pages web). Il est supporté par beaucoup de navigateurs et il est possible d'utiliser WOFF en fallback.

3. Utiliser la propriété CSS "font-display"

Cette propriété CSS permet de choisir le comportement du navigateur lorsque les polices sont en cours de chargement :

  • block : le texte sera invisible (ce qui équivaut au FOIT) ;
  • swap : permet de passer de la police fallback à la bonne police ;
  • fallback : il s'agit de l'équivalent du swap mais auquel on ajoute un timeout ;
  • optional : permet de laisser la police fallback lors du premier chargement. La vraie police sera affichée sur la page lorsqu'elle aura été mise en cache.

4. Le preload des fonts

Il est possible d'utiliser le link rel="preload" pour pré-charger les fonts. Ainsi les fonts sont chargées avant que le CSS ne soit exécuté.

Chargement des polices de caractères par un navigateur

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 :

Retrouvez les slides ici >>

Pour recevoir chaque mois des astuces et techniques webperf, témoignages,
retours d'expérience et être au courant de l'actualité webperf, abonnez-vous à notre newsletter :

Je m'abonne !


Hello SMX Paris !