Comment charger les polices web sans tuer la performance

Web_fonts

Les polices personnalisées sont parfaites pour donner un look sympa à notre site. Cependant elles ont un inconvénient : le comportement des navigateurs est de ne pas montrer le texte tant que la police de caractère qu’il doit utiliser (d’après notre CSS) n’est pas disponible. Autrement dit, pendant que la police se télécharge, aucun texte n’est visible sur le site !

Cela se nomme le FOIT (Flash of Invisible Text) : le texte est invisible, puis apparaît (il y a un comme un flash) quand la police est disponible.
Pas de problème pour des connexions rapides qui rapatrieront les polices très vite, mais le web étant de plus en plus mobile (donc avec des connexions lentes), et les utilisateurs de plus en plus exigeants en terme de rapidité, il faut trouver un moyen d’optimiser tout cela si nous ne voulons pas perdre des internautes qui en ont assez d’attendre pour pouvoir consulter le site.

FOIT

  1. La police commence à être téléchargée
  2. Pendant le chargement, le texte est invisible
  3. La police est disponible
  4. Le texte apparaît avec la police

Le FOIT est donc un gros problème d’expérience utilisateur car il affecte la rapidité d’affichage.

Pour les polices dont nous ne possédons pas les fichiers (distantes) :

Il faut utiliser une autre approche : le FOUT (Flash of Unstyled Text) !

FOUT

  1. La police commence à être téléchargée
  2. Montrer immédiatement le texte avec une police de secours n’ayant pas besoin d’être téléchargée (native, Arial par exemple)
  3. La police est disponible
  4. La police de secours est remplacée par la bonne police

L’énorme avantage de cette méthode est que l’information est tout de suite visible, ce qui permet de garder l’internaute sur le site. Il bénéficie ainsi d’une bonne expérience et d’une sensation de rapidité appréciable. Le seul léger désagrément sera le changement d’aspect du texte une fois la police chargée (la nouvelle police peut causer des retours à la ligne, avoir une autre hauteur de ligne, ce qui est visible lors de la transition). Mais cela est minime en regard des avantages, et il y a des méthodes pour minimiser cet inconvénient.
Un exemple de FOUT très minime est visible sur ce site : http://bramstein.com/

Mettre en place le FOUT :
Typekit (fournisseur de polices web) a développé un script permettant le FOUT.
Il faut l'intégrer au bas de nos pages :

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

Nous ajoutons l’attribut async pour le faire de manière asynchrone afin qu’il ne bloque pas le rendu de la page pendant son téléchargement. Nous pouvons nous le permettre car il n’est pas utile pour l’affichage immédiat de la page.
Puis nous configurons l’objet WebFontConfig en lui passant les polices, qui peuvent provenir de Google Fonts, Typekit, Fontdeck, Fonts.com.
La documentation nous donne toutes les clés.

  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" async></script>

  <script>
    WebFontConfig = {
      google:{
        families: ['Indie Flower']
      },
      timeout: 2000
    };
  </script>
Configuration de l'objet WebFontConfig

Une fois les polices téléchargées et disponibles, des classes sont ajoutées à l’élément <html> :
html-classes

 

Chaque police demandée est présente avec sa variante (bold, normal, italic…  Représentée par un code à 2 caractères) sous forme de classe avec un suffixe « active » nous informant qu’elle est prête. La classe wf-active est alors aussi présente sur l’élément <html>.
A ce moment, les polices sont prêtes à être utilisées.
Notre CSS doit ressembler à ceci :

$fallback: Georgia, serif;
$fontTitle: 'Indie Flower';
$fontText: 'euclidFlex';

h1, p{
	font-family: $fallback;
}

.wf-active h1{
	font-family: $fontTitle;
}
.wf-active p{
	font-family: $fontText;
}

Nous donnons une police système visible tout de suite, et lorsque les polices sont actives, nous changeons la police.
Bien entendu ceci peut générer un désagrément visuel si la nouvelle police fait prendre plus ou moins de lignes au texte et change ainsi la hauteur des blocs. Nous pouvons donc faire des tests et jouer sur la font-size et line-height des 2 polices pour lisser le changement.

Pour les polices dont nous possédons les fichiers (locales) :

La méthode précédente a l’inconvénient de toujours présenter un petit retard pour l’affichage de la bonne police. Même une fois la police en cache, au rechargement de la page, la police de secours apparaît toujours un cours instant.
Une autre méthode qui règle ce problème est plus adaptée pour les polices hébergées localement : il s’agit de stocker directement dans le navigateur le fichier de la police. L’accès au stockage local du navigateur est bien plus rapide que l’accès au cache. Ainsi le premier chargement est similaire à la méthode précédente, mais les accès ultérieurs seront bien plus rapides et présenteront la bonne police immédiatement.
Il faut créer un fichier CSS par police, contenant la police encodée en base64.
Il faut placer un petit script JS dans le <head> de nos pages qui va insérer ce fichier dans le stockage du navigateur (localStorage) nos fichiers CSS contenant les polices.
Un outil en ligne très pratique nous permet de réaliser ces 2 tâches : https://jaicab.com/localFont/

Il suffit de mettre à jour le chemin vers le fichier CSS et le tour est joué. Lors des visites ultérieures de la page (et même du site), l’affichage de la bonne police est instantané. Celle-ci n’étant pas appelée depuis le cache, même s’il est vidé ce n’est pas un problème.
Pour alléger le poids des fichiers CSS, seuls les formats WOFF2 et WOFF peuvent être inclus si IE 8 et Android 4.3 ne sont pas dans la cible. Dans le cas contraire, il suffit d’inclure également le format TTF. Inutile d’inclure les fichiers SVG et EOT.
Cette méthode est utilisée par les sites du Guardian et de Smashing Magazine, réputés pour leur optimisation et rapidité d’affichage.
Il est donc plus performant d’avoir des fichiers de polices en local plutôt que faire appel à la police stockée en ligne. Ainsi il est recommandé de télécharger les Google Fonts en local et d’appliquer cette technique.

Voilà pour le chargement optimisé de polices, qui donnera à votre site un atout supplémentaire !

Références :
https://css-tricks.com/snippets/css/using-font-face/
https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
https://github.com/typekit/webfontloader
https://jaicab.com/2015/03/03/introducing-localfont-a-localstorage-solution/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.