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'un certain FOUT est inévitable lors de l'utilisation de polices web.

Mais il existe des moyens d'atténuer ce phénomène :

Si vous n'utilisez pas Supprimer les ressources CSS inutilisées et que 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 phénomène autant que possible en chargeant les polices plus tôt.
Si vous utilisez Supprimer les ressources CSS inutilisées, les polices utilisées seront automatiquement préchargées.
Si vous utilisez des polices externes, comme Google Fonts, il n'y a pas grand-chose à faire pour "réparer" ce problème.
Dans les deux cas (polices externes et internes), essayez d'utiliser une police de remplacement par défaut qui soit similaire à la police finale. Cela contribuera à réduire la perception du FOUT. Si vous passez d'une police Serif à une police Sans-Serif, le FOUT sera perçu beaucoup plus fortement que si vous passez d'une police Sans-Serif à une police Sans-Serif.

Par exemple : si votre site web utilise Open Sans, l'utilisation d'Arial comme police de secours sera bien meilleure que l'utilisation de Georgia.