Résoudre "Ensure text remains visible during webfont load" dans Lighthouse.

Assurez-vous que le texte reste visible pendant le chargement des webfonts

Avant l'existence des webfonts, les web designers étaient limités à un petit nombre de polices préinstallées. Les Webfonts vous donnent la liberté d'utiliser n'importe quelle police sur un site web. 

Bien sûr, cela semble agréable, mais les webfonts ont aussi leurs inconvénients ; elles ralentissent la vitesse de chargement de la page de plusieurs façons.

Les Webfonts sont généralement des fichiers volumineux qui ne sont pas installés par défaut sur un ordinateur. Elles doivent donc être téléchargées avant de pouvoir être utilisées. Pendant le téléchargement d'une webfont, le texte d'une page web sera temporairement masqué jusqu'à ce que la webfont soit complètement chargée. Cela crée une mauvaise expérience utilisateur ; personne ne veut fixer un écran vide trop longtemps.

Dès que la webfont est chargée et rendue, le navigateur remplace le “texte invisible” par le texte final avec la nouvelle webfont. Ce moment est appelé le Flash of Invisible Text (FOIT). C'est ce FOIT qui provoque l'apparition du message d'erreur "Ensure text remains visible during webfont load"..

Charger une webfont sur votre page sans prendre de précautions pour éviter ce Flash of Invisible Text ? Pendant que vous analysez le PageSpeed sur Lighthouse, le message suivant apparaîtra : "Ensure text remains visible during webfont load". Cela vous indique combien de temps vous pourriez gagner en rendant le texte visible avant que la webfont ne soit chargée. Pour une seule police, cela représente facilement 100ms.

Pourquoi le texte invisible est-il mauvais pour la vitesse de la page ?

Le texte invisible ne ralentira pas vraiment le temps de chargement final mesuré d'une page. Alors pourquoi Lighthouse pense-t-il que c'est un tel problème ? 

Google estime qu'il est important qu'une page web offre la meilleure expérience utilisateur possible. L'expérience utilisateur peut être améliorée en affichant le contenu sur la page aussi vite que possible. Comparez les deux versions de pellicule de notre page d'accueil ci-dessous :

Flash of Invisible Text

Pas de flash de texte invisible avec display:swap

Comme vous pouvez le voir, les deux pages ont fini de charger exactement au même moment. Pourtant, la dernière version du site web semble bien meilleure pour les visiteurs. Les visiteurs peuvent commencer à lire immédiatement.

C'est pourquoi il est intelligent d'afficher du texte de toute façon - pas dans la police finale, mais dans une police de “fallback” (secours). De cette façon, le visiteur pense que votre page se charge vraiment super vite.

Un bref rappel : FOIT et FOUT

Avant d'aller plus loin, il est utile de distinguer les concepts suivants : FOIT et FOUT. FOIT signifie Flash of Invisible Text et se produit lorsque les webfonts ne sont pas visibles pendant le chargement. Vous pouvez atténuer cela en incluant une police de secours. Lorsque la police de secours est remplacée par la webfont, on appelle cela FOUT, Flash of Unstyled Text.

Rendre les webfonts visibles pendant le chargement

Il existe deux façons de rendre les webfonts visibles pendant le chargement : la première est via la valeur CSS font-display ; la seconde est en utilisant une police de secours via une classe. Les deux méthodes ont des avantages et des inconvénients, que je vais discuter ci-dessous.

Méthode 1 : Font-display:swap

Font-display est un descripteur CSS qui est disponible pour tous les navigateurs modernes. Le descripteur font-display détermine comment une police est affichée en fonction de si et quand elle a été téléchargée. Font-display est utilisé dans une règle @font-face. 

Il existe différentes valeurs de font-display : block, swap, fallback et optional. Utilisez la valeur swap pour éviter le FOIT, et pour que le texte apparaisse à l'écran aussi vite que possible, utilisez la valeur swap. 

Une fois que nous définissons la valeur font-display: swap dans la règle @font-face, les polices par défaut du système sont utilisées pendant le chargement de la page jusqu'à ce que les webfonts soient chargées. Cela aide le visiteur à lire le texte sur la page immédiatement.

Google fonts

Lorsque vous utilisez Google fonts, vous pouvez utiliser la méthode font-display: swap avec un simple “&display=swap” dans la feuille de style ou le code d'intégration.  

<!-- via une feuille de style externe -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via la méthode import -->
<style>
 @import url ('https://fonts.googleapis.com/css?family=Open+Sans&display=swap); 
</style>

Au fait, nous ne sommes pas fans de Google fonts. Il est presque toujours beaucoup plus rapide d'héberger les webfonts vous-même. Cela vous donne plus de contrôle sur le processus de “preloading” (préchargement) des polices. Vous pouvez utiliser la connexion http/2 déjà existante et vous n'avez pas à télécharger une feuille de style supplémentaire.

Polices locales

@font-face { 
 font-family: "Open Sans";  
 font-weight: 400; 
 font-style: normal; 
 src: url("OpenSans400.woff2") format("woff2"); 
 
}

Méthode 2 : Polices avec une classe

La deuxième façon de rendre les polices visibles pendant le chargement est de travailler avec des classes. Ces classes sont généralement (mais pas toujours) ajoutées à l'élément <body> ou <html>.

L'avantage de cette méthode est que vous avez plus de contrôle sur la police de secours et le timing du Flash of Unstyled Text.

Cette méthode fonctionne comme suit : Indiquez dans votre feuille de style qu'une page doit initialement être rendue avec une police (la police de secours). Vous chargez ensuite la webfont via l'API JavaScript FontFace ou via le préchargement. Une fois que cette police a été chargée, ajoutez une classe à votre page. La classe s'assure que la webfont est activée.

Pourquoi feriez-vous cela, demanderez-vous ? Vous faites cela pour gagner plus de contrôle sur la police de secours. Vous pouvez afficher la police de secours avec un espacement de ligne plus grand ou une taille différente pour qu'elle corresponde mieux à la webfont. Cela empêche les décalages de mise en page (layout shifts).

Lorsque vous utilisez plusieurs webfonts, vous pouvez utiliser la méthode API FontFace pour changer toutes les polices en même temps. Cela économise beaucoup de redessins (repaints) du navigateur. Personnellement, je ne suis pas fan de cette méthode ; cela garantit que le FOUT a lieu après que la dernière police a été chargée. C'est donc toujours plus tard que nécessaire.

Police avec une classe via l'API FontFace :

<style>
  //police de secours avec une taille de police de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //police webfont avec une taille de police de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// ne pas attendre l'arbre de rendu, initier une récupération immédiate !
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via un lien de préchargement (preload)

La deuxième méthode est via un lien de préchargement. Préchargez la police comme décrit ci-dessous. Une fois que c'est fait, changez la classe de l'élément <html>.

<link 
  rel="preload" 
  href="/webfont.woff2" 
  as="font" 
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  //police de secours avec une taille de police de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }  

  //police webfont avec une taille de police de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  //fontface, n'est activé que lorsque la classe .fl est ajoutée à la balise html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }</style>

Conseils et astuces supplémentaires

1.    Toujours précharger les polices visibles. Les polices ne sont pas téléchargées par défaut jusqu'à ce qu'une police soit utilisée. Sûr que vous avez besoin d'une webfont ? Dans ce cas, préchargez-la pour qu'elle soit disponible plus tôt.
2. Vous voulez éviter FOIT et FOUT entièrement ? Utilisez font-display: optional en combinaison avec le préchargement.
3. Héberger les webfonts vous-même est toujours plus rapide que les webfonts via Google fonts ou un autre CDN externe.