Une police, ça paraît gratuit. Tu en choisis une belle, tu l'ajoutes, et ta marque a tout de suite plus de caractère. Sauf qu'une police n'est pas un simple choix de style, c'est un fichier que le navigateur doit aller chercher, attendre, et appliquer, pendant que ton visiteur regarde un écran qui hésite. C'est l'une des frictions les plus discrètes du web, et l'une des plus bêtes, parce qu'elle se corrige presque sans rien sacrifier.
Cet article t'explique pourquoi tes polices ralentissent ta page, ce que ça coûte vraiment, et la checklist pour garder ta typo sans payer la note.
Pourquoi une police coûte cher au chargement
Le mécanisme tient en deux temps, et les deux pénalisent ton visiteur.
D'abord, une police personnalisée est un fichier à télécharger, en plus de ta page. Tant qu'il n'est pas arrivé, le navigateur a deux mauvais choix. Soit il masque ton texte en attendant la police, et le visiteur voit un trou à la place de tes mots. Soit il affiche tout de suite une police de repli, puis bascule sur la tienne quand elle arrive, et là, le texte saute sous les yeux du visiteur au moment où il commençait à lire.
Ensuite, ce saut a un coût mesuré. Quand le texte se redessine dans une police différente, la mise en page bouge, et ce mouvement compte dans la stabilité visuelle de ta page, l'un des critères que les moteurs surveillent. Tu paies donc deux fois, une fois en attente, une fois en instabilité.
Multiplie ça par le nombre de polices que tu charges. Beaucoup de sites en chargent trois ou quatre, une pour les titres, une pour le texte, une pour les détails, parfois la même en plusieurs graisses téléchargées séparément. Chaque variante est une requête de plus, une attente de plus.
Il y a un troisième coût, souvent ignoré, quand tu charges tes polices depuis un service externe, le cas le plus fréquent étant un hébergeur de polices tiers. Le navigateur doit alors ouvrir une connexion vers un autre domaine avant même de pouvoir demander le fichier, résoudre son adresse, négocier la sécurité, puis seulement télécharger. Cette poignée de main prend du temps, et elle arrive au pire moment, pendant que ta page essaie de s'afficher. Héberger toi-même tes polices, sur ton propre domaine, supprime cette connexion supplémentaire, et c'est souvent le gain le plus net pour le moins d'effort.
Mon reçu, le texte qui sautait sur Copyboost
Sur mon SaaS Copyboost, c'était exactement ce qui se passait. La typo était soignée, mais au chargement, le texte apparaissait d'abord dans une police de repli, puis sautait quand la vraie police arrivait. Désagréable à l'oeil, et coûteux pour la performance.
Le préchargement des polices a été l'une des deux corrections qui ont fait passer mon score de 57 à plus de 75. En disant au navigateur d'aller chercher la police en priorité, dès le départ, le texte s'affichait tout de suite dans la bonne, sans trou ni saut. Aucune modification du design, juste une instruction de priorité. La même page, mais qui ne tremble plus.
Le second intérêt du préchargement, c'est qu'il corrige un ordre de priorité que le navigateur fixe mal tout seul. Par défaut, il ne découvre l'existence d'une police qu'après avoir lu le CSS qui l'appelle, donc tard, alors que cette police est nécessaire pour afficher le tout premier texte que verra ton visiteur. Le préchargement renverse cet ordre, il annonce la police dès la première ligne, avant même que le navigateur ne sache qu'il en aura besoin. Tu ne télécharges pas plus, tu télécharges plus tôt, et plus tôt, sur le haut de page, c'est exactement ce qui compte pour le ressenti.
C'est typiquement le genre de gain invisible dans un audit pressé, et bien réel dans l'expérience du visiteur.
La police non préchargée, la friction la plus bête du web
Je vais être direct. Une police personnalisée que tu n'as pas préchargée est la friction la plus bête qui soit. Tu fais attendre ton visiteur, tu fais sauter ton texte, tu abîmes ta stabilité visuelle, et tout ça pour une nuance typographique que neuf visiteurs sur dix ne remarqueraient même pas si tu avais gardé une police système proche.
La plupart des sites chargent trop de polices, trop de graisses, et les laissent arriver en retard. C'est rarement un choix assumé, c'est presque toujours un réglage qu'on a oublié de faire. La bonne nouvelle, c'est que c'est aussi l'un des correctifs les plus rapides et les plus rentables de toute ta performance.
Mais je tiens à ma typo de marque
Rassure-toi, rien ici ne te demande de la sacrifier. La friction ne vient pas du fait d'avoir une belle police, elle vient de la façon dont tu la charges. Tu gardes ta typo de marque, tu changes seulement le quand et le comment. Précharge-la, sers-la en woff2, héberge-la chez toi, choisis un repli proche, et tu obtiens le même caractère visuel sans le tremblement. Le seul arbitrage honnête concerne le nombre, si tu charges quatre familles et huit graisses, là oui, il faut couper, mais on coupe le superflu, pas ta signature. Belle typo et page rapide ne s'opposent pas, c'est le mauvais chargement qui les oppose.
La checklist polices, ton artefact à garder
Voici les six réglages qui règlent le sujet. Applique-les, ta typo reste belle et cesse de te coûter de la vitesse.
- Limite-toi à une ou deux familles, et au strict nombre de graisses utilisées. Chaque graisse en trop est une requête en trop, et c'est la coupe qui coûte zéro effort pour un gain immédiat.
- Sers tes polices au format moderne woff2, le plus léger, compris par tous les navigateurs actuels. À rendu identique, il pèse nettement moins que les anciens formats, donc il arrive plus vite.
- Précharge les polices critiques, celles du haut de page, pour qu'elles partent en priorité dès le départ. C'est le réglage qui a payé sur Copyboost, il déplace la police en tête de file.
- Active l'affichage immédiat avec une police de repli, le réglage font-display, pour qu'aucun texte ne reste masqué. Mieux vaut un texte lisible tout de suite dans un repli qu'un trou en attendant la police parfaite.
- Choisis une police de repli proche de la tienne, pour que le basculement se voie le moins possible. Plus le repli ressemble à ta police finale, moins le saut se remarque, parfois plus du tout.
- Réduis le poids du fichier en ne gardant que les caractères dont tu as besoin, par sous-ensemble, si ta police le permet. Une police latine n'a aucune raison d'embarquer les alphabets que ton site n'affichera jamais.
Six lignes de réglage, et ta typo passe de coûteuse à invisible au compteur.
Si tu ne dois en appliquer qu'un aujourd'hui, prends le préchargement de la police du titre, c'est celui qui se voit le plus, parce qu'il touche le premier texte que lit ton visiteur. Les autres réglages se cumulent ensuite, chacun gratte un peu d'attente, et ensemble ils font passer une typo qui pénalise à une typo neutre au compteur. Aucun d'eux ne te demande de renoncer au style, ils ne touchent qu'au chargement.
Applique-le maintenant
Ouvre ta page d'accueil et recharge-la en vidant le cache, en regardant bien le texte au tout début. Si tu vois un trou, puis un saut quand les mots se redessinent, tu tiens ta friction. Déroule la checklist, et le tremblement disparaît.
Pour situer ce sujet dans l'ensemble de ta friction technique, lis le guide performance web et conversion. Les polices ne sont qu'un des coupables d'un site soigné mais lent, vois les autres dans pourquoi un beau site peut quand même être lent, et pour vérifier l'effet réel de tes correctifs, mesurer la vitesse réelle de ton site.
Si tu veux qu'on repère ensemble ces frictions invisibles sur ton site, c'est le coeur d'une Radiographie CRO. Le détail est sur le guide pilier.