PageSpeed Insights : optimiser ses fonts pour la webperf

Sommaire

“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.

Fonts timeout by browser

La nécessité d’avoir une font de fallback

Il est donc nécessaire d’avoir une font de fallback, au cas où votre font web ne se télécharge pas assez rapidement. Si en plus de ça, aucun texte n’apparaît, vos visiteurs peuvent penser que votre site rencontre des problèmes et quitter la page.

Point de vigilance : s’il est nécessaire d’avoir une font de fallback, il vous faut tout de même la choisir soigneusement. En effet, si cette font met aussi du temps à charger, elle impactera négativement l’UX. Pour éviter cela, privilégiez une font system en tant que police alternative, qui est disponible sur la majorité des systèmes d’exploitation (web-safe fonts).

Par ailleurs, elle doit avoir une taille similaire à celle de la font initiale. Si elle est plus grande ou plus petite, alors vous risquez de générer du CLS au moment de son affichage. Vous pouvez vous aider de Screenspan pour comparer l’affichage avec vos deux fonts.

La règle à retenir : afficher une font, même “hors branding” est plus pertinent que de faire patienter vos visiteurs pour avoir la bonne font. Et pour cela, des propriétés CSS existent afin que du texte reste affiché, en attendant la font que vous aviez initialement prévue.

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.

Fonts and CSS display - Fallback, Block, Swap, optional - timeout and explanation

Source image

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.

Point de vigilance

Si vous devez privilégier l’attribut swap sur l’ensemble de vos pages, vous devez tout de même l’éviter pour les icônes qui s’affichent dans la page (et plus généralement éviter les icônes chargés via des polices). Par exemple, les polices comme fontawesome ou icomoon, utilisées pour afficher des symboles, ne sont pas compatibles avec le swap. La raison ? La police alternative ne prend pas toujours en compte ces symboles et risque d’afficher un carré en tant que caractère de substitution.

Pour ces icônes, nous vous recommandons l’utilisation de SVG plutôt que du texte.

Dans les contextes où la navigation est rapide, l’attribut fallback peut aussi donner de bons résultats, car il affiche directement la bonne police si elle met moins de 100ms à arriver.

3. Utiliser avec parcimonie le preload des fonts

Enfin, le préchargement peut aussi être un atout à utiliser pour vos fonts. Pour cela, vous pouvez vous servir de la balise <link rel= »preload »> pour indiquer au navigateur de télécharger les polices en amont. Et en préchargeant vos fonts, elles s’afficheront plus tôt. Par ailleurs, cette technique est complémentaire avec l’attribut swap, car vous pourrez afficher le texte stylé plus rapidement que si l’attribut était utilisé seul.

Mais c’est à réserver aux polices essentielles (notamment pour le texte dans le viewport, les titres par exemple). Sinon, vous risquez de vous retrouver dans le cas par défaut où les polices vont être téléchargées avant certaines ressources plus importantes pour l’affichage. Ces pratiques (attribut swap et preload) sont donc celles à privilégier si vous savez ce que vous faites. Cependant, elles doivent être réalisées sur tous vos templates, ce qui demande un temps et des ressources considérables.

D’une part, il s’agit de pratiques à diffuser au sein de vos équipes IT, et d’autre part un travail de sensibilisation est aussi à réaliser auprès du reste de vos équipes (marketing, direction artistique…) pour limiter l’usage des fonts. Comme toujours, nous vous recommandons d’automatiser ces pratiques et de vous entourer d’experts.

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.

Dashboard Fasterize - Application Police : font display

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 !

Demandez une démo
Sommaire
Demandez un diagnostic de vos temps de chargement !
Solutions