Polices web et performance : des polices sans pénalité de chargement

Une belle police transforme n'importe quel site web en un site qui vous ressemble. Elle porte l'ambiance, elle crée la confiance, elle vous distingue de la concurrence. Seulement, cette présentation a un prix que beaucoup négligent : les polices doivent être chargées, et si cela tourne mal, la première impression devient saccadée.

Dans cet article, je vous montre pourquoi les polices web peuvent peser sur le temps de chargement, ce qui agace le plus dans ce contexte, et comment obtenir une belle typographie sans le payer en rapidité. Le tout sans charabia technique.

Pourquoi les polices deviennent une charge

Sur votre ordinateur, la police est simplement là. Sur le web, c'est différent : chaque police qui ne se trouve pas par défaut sur l'appareil du visiteur doit d'abord être téléchargée via Internet, comme un fichier à part, en plus de tout le reste.

Et ces fichiers de polices sont souvent étonnamment lourds. Une famille avec plusieurs graisses, normal, gras, italique, peut vite peser plusieurs centaines de kilo-octets. Cela semble peu, pourtant en déplacement, avec une réception instable, ce sont de précieuses secondes. Précisément au moment où le visiteur décide s'il reste.

Le problème le plus agaçant : le texte qui saute

Il existe un effet que presque tout le monde connaît sans savoir le nommer : on ouvre une page, on commence à lire, et soudain tout saute d'une ligne vers le bas, parce que la bonne police vient seulement de se charger. C'est le décalage de mise en page, et c'est le plus grand désagrément lié aux polices web.

Cela arrive parce que la police de remplacement, affichée en premier, est un peu différente en largeur et en hauteur de la police finale. Quand la vraie police arrive, tout se réajuste. Dans le meilleur des cas, cela paraît agité, dans le pire on clique à côté, parce que le bouton a sauté à ce moment-là.

Google évalue justement cela, sous le terme de Cumulative Layout Shift. Une page calme et stable compte donc non seulement pour l'œil, mais aussi pour le référencement. Vous trouverez plus à ce sujet dans mes autres articles autour de la rapidité et des Core Web Vitals.

Le deuxième écueil : le texte invisible

Il existe encore une autre variante, presque pire. Certaines pages cachent le texte complètement, jusqu'à ce que la police soit chargée. Le visiteur fixe donc une surface vide, alors que le contenu serait depuis longtemps disponible. Les spécialistes appellent cela le texte invisible.

Les deux, le texte qui saute et le texte invisible, peuvent être évités. C'est une question de soin apporté à l'intégration de la police.

Comment les polices web se chargent vite et sans à-coups

La bonne nouvelle : il ne faut pas choisir entre une belle police et une bonne performance. Avec quelques gestes éprouvés, vous obtenez les deux. Voici les leviers les plus efficaces :

• Ne charger que ce qui est utile : souvent deux ou trois graisses suffisent au lieu de toute la famille. Chaque graisse laissée de côté est un fichier de moins.
• Servir la police soi-même : plutôt que d'aller la chercher chez un service tiers, je place le fichier de police directement auprès du site web. Cela évite un détour et c'est en plus plus respectueux de la vie privée.
• Utiliser des formats modernes et légers : le format WOFF2 est nettement plus petit que les anciens fichiers de polices, même police, moins de poids.
• Prévenir le navigateur tôt : avec une petite indication dans le code, la police se charge déjà pendant que le reste de la page se construit, au lieu de seulement après.
• Montrer le texte tout de suite : le navigateur peut d'abord afficher le contenu dans une police de remplacement et basculer discrètement vers la bonne. Ainsi personne ne voit une page vide.

Comment éviter complètement le saut

L'astuce contre le texte qui saute est étonnamment simple : on choisit une police de remplacement qui ressemble à la police finale, et on les accorde de sorte qu'elles occupent à peu près le même espace. Quand la vraie police arrive, presque rien ne change plus, pas de saut, pas de à-coup.

C'est un travail de précision qu'on ne remarque pas sur la page finie. Mais ce sont justement ces détails invisibles qui décident si une page paraît soignée et calme ou fébrile. Et il est bien plus facile de bien la construire dès le départ que de la corriger après coup.

Les polices standards ne suffisent-elles pas ?

Une question légitime. Il existe des polices présentes sur pratiquement chaque appareil, elles n'ont même pas besoin d'être chargées et sont donc ultra-rapides. Pour certains projets, elles sont un choix honnête et judicieux.

Mais une police propre est souvent une grande part du caractère d'une marque. Mon approche est donc pragmatique : une police choisie là où elle fait effet, proprement intégrée, complétée par une police de remplacement bien accordée. Ainsi vous obtenez le caractère, sans la pénalité.

Caractère et rapidité ne s'excluent pas

Les polices web ne sont pas un mal nécessaire, mais un outil, et comme pour tout outil, c'est le soin qui décide du résultat. Bien employée, une belle police se charge presque sans qu'on le remarque, sans que rien ne saute ou ne se bloque. Mal employée, elle coûte de la patience et de la confiance.

C'est pourquoi j'intègre les polices à la main et je vérifie qu'elles se chargent vite et sans à-coups, afin que votre présence ne soit pas seulement belle, mais aussi agréable. Si votre page tremble au chargement ou paraît laborieuse, je regarde volontiers d'où cela vient. Contactez-moi simplement via le formulaire de contact, et nous en discutons tranquillement.