Quel est l'impact du chargement des fonts sur vos temps de chargement ? Quelle est la meilleure stratégie webperf à adopter pour optimiser le chargement des fonts ? Anthony, un de nos experts webperf vous dévoile une analyse menée en interne et vous parle FOUT, preload et inlining.

NB : nous entendons ici par font, "police de caractère web".

Cette présentation est 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 gurus de la webperf.

D'après les statistiques de HTTP Archive, un site est composé en moyenne de 3 fonts (chiffre d'avril 2017). Ces fonts pèsent environ 100ko.
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 50ko).

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 lorsqu'on ne charge pas les fonts.

Comment se chargent les fonts ?

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

Lors du téléchargement des fonts, les navigateurs peuvent adopter deux comportements différents :

  • Le FOUT : le Flash Of Unstyled Text qui affiche le texte dans une font non stylisée 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 possible, 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 qui sera utilisée pour afficher le texte.

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

1. Les "system fonts"

Depuis ces deux dernières années, nous voyons des sites de contenu majeurs (tels que medium, wordpress ou encore github) utiliser 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 WOFF2 pour réduire le poids de vos fichiers. 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 nouvelle 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 : il 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 : il permet de laisser la police fallback lors du premier chargement. La vraie police sera affichée lorsqu'elle aura été cachée.

Si cette optimisation est facile à mettre en place et ne nécessite que peu de maintenance, elle n'est pour l'instant supportée que par Chrome 60.

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é.

Mais là encore, le preload est peu implémenté par les navigateurs (seulement Chrome, Opera).

5. Le FOUT with class

Cette façon de charger les fonts est la façon conseillée encore aujourd'hui. 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é et seulement l'appliquer au niveau CSS après qu'elle soit 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 est difficile à automatiser.

6. L'inline / 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 (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 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 à écouter l'intervention d'Anthony dans la vidéo ci-dessus !

Retrouvez les slides ici >>

 
Restez informé(e) des prochains rendez-vous !
 
 

VOUS AIMEREZ PEUT-ÊTRE AUSSI...

HTTPS : l’impact sur les temps de chargement Ce n'est un secret pour personne : les sites en HTTPS sont à priori plus gourmands en ressources que les sites HTTP et la complexité introdu...
Les conseils SEO et Webperf pour passer au full HT... Rendez-vous le mardi 19 septembre de 15h à 16h à la Paris Retail Week pour aborder la question de votre migration vers HTTPS. Comment préser...
Comment organiser ses équipes pour booster la webp... article img { margin:15px !important; } .grey-box { background: #dfe1e1; padding: 20px; margin-bottom: 20px; } Des utilisateurs aux...
4 conseils pour tenir la charge pendant les soldes article img { margin:15px !important; } .grey-box { background: #dfe1e1; padding: 20px; margin-bottom: 20px; } Nous y revoilà, le...