FOUT - Flash of Unstyled Text

Qu’est-ce qu'un FOUT ?

un FOUT est un acronyme anglais signifiant  Flash of Unstyled Text soit littéralement un Flash de Text Non-Stylisé. Lorsque vous chargez un site Web, vous pouvez remarquer que le texte est affiché avec une police différente pendant une seconde jusqu'à ce que la "vraie" police s'affiche, et vous pouvez remarquer un "flash" ou un "glitch" lorsque la police change.

Un certain FOUT est attendu lors de l'utilisation de  font-display: swap car cette déclaration permet au navigateur d'afficher une police de substitution jusqu'à ce que la police choisie soit chargée. Ceci est très important car il s'agit d'éviter tout Flash de texte invisible, qui est pénalisé par les scores PSI.

Selon PageSpeed, il est préférable pour l'expérience de l'utilisateur d'afficher le texte visible dans une police différente que de ne pas afficher de texte du tout.

Le fait d'avoir un flash de texte invisible est pire pour l'expérience de l'utilisateur et pour le score du site web, c'est pourquoi il est très important de régler l'affichage de la police sur swap. L'inconvénient est son inévitable effet secondaire : le FOUT

WP Rocket définit la police d'affichage comme étant permutable ( font-display: swap) dans les cas suivants :

• La fonction Optimiser les Google Fonts ajoutera le paramètre font-display:swap à la requête.
• Lorsque les options minifier et combiner le CSS sont actives, WP Rocket appliquera également automatiquement font-display : swap; à toutes les polices auxquelles il est fait référence dans les fichiers CSS.
• Lorsque  Optimiser le chargement du CSS est activé, font-display : swap; est ajouté aux polices dans le CSS du Critical Path CSS.

Comment réduire le FOUT ?

Tout d'abord, il est important de souligner qu' une certaine quantité de FOUT est inévitable lors de l'utilisation de polices web. 

Mais il existe des moyens d' atténuer ce problème : 

• Si vous utilisez des polices locales, c'est-à-dire des polices hébergées sur votre propre domaine, vous pouvez pécharger les polices pour atténuer ce problème autant que possible en chargeant les polices plus tôt.

• Si vous utilisez des polices externes, comme Google Fonts, il n'y a pas grand-chose à faire pour "corriger" ce problème.

• Dans les deux cas (polices externes et internes), essayez d'utiliser une police de secours par défaut similaire à la police finale. Cela contribuera à réduire la perception du FOUT. Si vous passez d'une police Serif à une police Sans-Serif, la perception du FOUT sera beaucoup plus forte que si vous passez d'une police Sans-Serif à une police Sans-Serif.

  Par exemple : Si votre site utilise Open Sans, utiliser Arial comme police de secours, sur bien mieux que Georgia.