“Assurez-vous que le texte est visible pendant le chargement”, c’est la recommandation PageSpeed Insights qui vous a amené sur cet article. Et vous avez bien fait ! Comme tout éditeur de site, lorsque vous avez créé votre site, vous avez sollicité de nombreux métiers : direction artistique, webdesign, IT, marketing… Et il y a fort à parier que vous leur avez précisé que le site doit s’aligner sur votre branding et vos valeurs. Tout en garantissant une expérience utilisateur fluide et agréable, bien sûr.
Mais voilà, les fonts de votre charte graphique ne font pas forcément bon ménage avec l’expérience de vos utilisateurs. Comme de nombreuses ressources (CSS, JavaScript…), les fonts peuvent d’une part alourdir vos pages et ainsi les ralentir et d’autre part, bloquer le rendu si votre stratégie de chargement et d’affichage n’est pas la plus optimale. Dans cet article, nous vous accompagnons pour faire de vos fonts un atout pour votre branding et votre expérience utilisateur !
L’impact des polices mal optimisées
Évidemment, toute dégradation de la vitesse d’affichage entraîne une dégradation de vos métriques (vous l’avez vu sur votre score PageSpeed Insights). Une page qui reste blanche trop longtemps ou qui subit des décalages intempestifs rend la navigation désagréable. Et ce qui est vécu par vos utilisateurs est aussi mesuré par Google. Ainsi, une font qui s’affiche trop lentement peut impacter négativement certaines métriques clés de l’expérience utilisateur.
Par exemple, le Start Render / FCP peut lui faire les frais d’une font mal optimisée. En effet, le Start Render/FCP marque le moment où le premier élément d'une page web est affiché dans le navigateur, quelle que soit sa taille ou son intérêt pour l'utilisateur. Cette métrique est intimement liée à la vitesse perçue par l'utilisateur. Si une font bloque le rendu de la page, ce Start Render en sera affecté.
Le Cumulative Layout Shift : cet indicateur mesure le nombre de fois où l’affichage subit des décalages d’affichage intempestifs.
Pour avoir un meilleur CLS, le texte doit être affiché le plus tôt possible et de manière à ce que l’application de la font ne décale pas le reste du contenu adjacent à ce bloc de texte. En effet, la police appliquée peut changer la taille du bloc et décaler le reste de la page. Alors, votre page subit des décalages intempestifs, ce qui dégrade l’UX et par la même occasion votre score PageSpeed.
Troisième indicateur qui peut être dégradé par vos fonts, le Speed Index. Celui-ci renseigne sur la vitesse de d’affichage des éléments dans le viewport. Il prend en compte la progression de l'affichage du contenu et mesure donc une durée. Comme l’affichage de la font est retardé, l’affichage complet de la page se fait tardivement et c’est votre Speed Index qui en pâtit.
Si l’une de ces métriques (ou plusieurs d’entre elles) est dégradée sur votre site et que vous avez cette recommandation PageSpeed Insights, ne vous inquiétez pas. Vous n’êtes pas les seuls dans ce cas ! Nous observons souvent cette problématique sur les sites que nous analysons. Par exemple, sur certains sites, le texte est invisible pendant plusieurs secondes. Pendant ce temps, des appels aux fonts ont lieu, mais sont en font-display:block dans le code. Nous faisons donc des recommandations aux équipes concernées pour régler le problème.
Dans la suite de l’article, c’est vous que nous accompagnons afin que votre texte s’affiche directement et que vos fonts soient utilisées de manière optimale.
Ce que vous devez savoir sur les fonts
Pour commencer, il est nécessaire de rappeler deux choses. Premièrement, comme pour tous les éléments que vous intégrez à votre code, vos fonts doivent être les plus légères possible. Leur poids doit être optimisé pour alléger le poids global de la page et son temps de chargement. Pour cela, compressez vos fonts en utilisant le format de polices WOFF2 (norme de format de fichier de police vectorielle le plus récent et le plus répandu).
Par ailleurs, il est primordial de bien gérer vos fonts en elles-mêmes. Pour cela, vous pouvez :
- limiter le nombre de polices utilisées sur une page pour réduire le nombre de requêtes ;
- limiter le nombre de caractères dans la police (par exemple, supprimer les caractères cyrilliques s’ils ne sont pas nécessaires), c’est la technique du font stripping ;
- recourir à un CDN pour un téléchargement rapide des fichiers de font.
Deuxièmement, les fonts se chargent après le code HTML et CSS. Et lorsqu’elles se téléchargent, le navigateur peut adopter deux comportements différents : FOUT ou FOIT.
FOUT et FOIT : quelle différence ?
Le FOUT : le Flash Of Unstyled Text qui affiche le texte dans une font sans style 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, nous devons éviter le texte invisible autant que possible (cela dégrade notamment le Speed Index). C'est dans cette optique que des navigateurs ont 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 de fallback (soit une police par défaut) qui sera utilisée pour afficher le texte.
Assurez vous que le texte reste affiché pendant le chargement
1. Utiliser la propriété CSS font-display
Nous l’avons vu, sans déclaration supplémentaire, les fonts sont une ressource bloquante au cours du téléchargement de la page. Heureusement, il existe la propriété CSS font-display pour améliorer tout ça.
En effet, cette propriété CSS permet de choisir le comportement du navigateur lorsque les polices sont en cours de chargement :
- block : ici, si le navigateur n’a pas la font initiale au bout de 3 sec, il affiche la font de fallback. Cela équivaut au FOIT et c’est le comportement par défaut
- Swap : avec ce comportement, la font de fallback s’affiche directement, puis est remplacée par la webfont dès qu’elle est chargée. C’est la technique que nous recommandons pour que vos utilisateurs voient le texte affiché, plutôt qu’une page avec du texte manquant.
- Fallback : ce cas est un équivalent du swap, où le navigateur dispose d’un timeout si la webfont n’est pas chargée dans les 100ms. Seulement après ce timeout, la font de fallback est affichée, suivie par la webfont. Dans les contextes rapides, cela permet de ne pas avoir de FOUT car la font initiale peut arriver rapidement.
- Optional : dans ce cas, un timeout de 100ms précède l’affichage des deux fonts. La webfont sera affichée sur la page dès qu’elle est disponible et si le navigateur le décide.
2. Privilégier l’attribut swap : pourquoi ?
L’attribut swap de la propriété font-display est la solution qui vous permet de garantir l’affichage du texte, avec une police de secours. En effet, les autres cas comprennent un délai d’attente, qui peut être néfaste pour l’expérience de la page, mais aussi votre score de performance web.
Le principal avantage de l’attribut swap réside dans la rapidité perçue par les utilisateurs. En affichant rapidement du texte avec une police alternative, les visiteurs de la page peuvent commencer à lire le contenu de la page sans attendre, ce qui aide à maintenir leur engagement et leur satisfaction.
En cas de connexion internet lente, de problèmes de serveur ou des limitations géographiques, vous assurez l’affichage du contenu textuel à vos utilisateurs. De plus, vous pouvez choisir une font qui est cohérente esthétiquement, même dans des conditions moins idéales. Le choix de la font de fallback peut toutefois s’avérer délicat.
La fonctionnalité Font Face de Fasterize
En ayant recours à notre solution, vous pourrez automatiquement bénéficier de l’optimisation de vos polices quel que soit le contexte. Et parmi elles, il existe une fonctionnalité qui vous permet d’appliquer les recommandations de cet article en quelques clics. Pour vos fonts propres, vous pourrez utiliser “Insert font display”, puis choisir la déclaration “Swap”. Par ailleurs, vous pourrez faire la même chose pour les fonts Google.
Vous retrouverez aussi dans ces optimisations de notre application Police la possibilité de “stripper” vos fonts en supprimant automatiquement les caractères inutiles et bien sûr la conversion vers le format le plus compressé, le format WOFF2.
Avec les optimisations des fonts Fasterize, vous garantissez l’affichage le plus tôt possible et réduisez ainsi votre Speed Index et/ou votre LCP si l’élément le plus grand de la page est un bloc de texte ! Vos autres métriques ont également la garantie d’être améliorées. En choisissant notre moteur intelligent, vous pourrez automatiser l’optimisation de vos fonts et appliquer facilement la recommandation Google PageSpeed Insight.
Vous avez maintenant les cartes en main pour l’appliquer et améliorer votre UX sur l’ensemble de vos pages. Si vous êtes curieux de tester l’une de nos nombreuses fonctionnalités intelligentes, demandez une démo !
