Le choix d'une police de caractères semble purement esthétique, mais il a un impact technique réel sur la vitesse de chargement d'un site. Entre charger une police externe, l'héberger soi-même, ou se contenter des polices déjà présentes sur l'appareil du visiteur, les conséquences en termes de performance varient sensiblement.
Le coût d'une police externe
Charger une police depuis un service externe comme Google Fonts dans sa configuration la plus courante implique une connexion vers un domaine distinct (fonts.googleapis.com, puis fonts.gstatic.com pour le fichier de police lui-même), avec sa propre résolution DNS, sa propre poignée de main TCP et TLS. Cette connexion supplémentaire s'ajoute au temps nécessaire avant que le texte ne s'affiche avec la police définitive, surtout si elle est déclarée dans le <head> de la page sans optimisation particulière.
FOIT et FOUT : deux comportements d'attente possibles
Pendant que la police externe se charge, le navigateur doit décider comment afficher le texte en attendant :
- FOIT (Flash of Invisible Text) : le texte reste invisible jusqu'à ce que la police soit chargée, ce qui peut donner l'impression d'une page vide pendant un court instant.
- FOUT (Flash of Unstyled Text) : le texte s'affiche immédiatement avec une police de secours, puis bascule vers la police définitive une fois chargée, au prix d'un léger changement visuel.
La propriété CSS font-display: swap force ce second comportement, généralement préférable puisqu'il permet au visiteur de lire le contenu sans attendre, même si l'apparence change légèrement une fraction de seconde plus tard.
L'auto-hébergement, une alternative à considérer
Héberger directement les fichiers de police sur votre propre serveur, plutôt que de les charger depuis un service tiers, supprime la connexion externe supplémentaire et le temps de résolution DNS associé : le fichier de police arrive depuis le même serveur que le reste du site. Cette approche a aussi gagné en popularité pour une raison de confidentialité des données : charger une police depuis un service externe transmet l'adresse IP du visiteur à ce service tiers à chaque chargement de page, ce qui a fait l'objet de décisions de justice en Europe considérant que cela nécessite, dans certains cas, un consentement préalable au titre du RGPD. L'auto-hébergement règle simultanément la question de performance et celle de confidentialité.
Limiter le nombre de polices et de variantes
Chaque graisse supplémentaire d'une même police (régulier, gras, italique, extra-gras) correspond généralement à un fichier distinct à charger. Limiter le nombre de polices différentes utilisées sur un site, ainsi que le nombre de graisses chargées pour chacune, réduit directement le poids total à transférer avant un rendu visuel complet.
Le cas voisin des polices d'icônes
Le même raisonnement s'applique à un usage voisin très répandu : les polices d'icônes comme Font Awesome, qui chargent un fichier de police entier pour afficher quelques symboles (flèches, réseaux sociaux, pictogrammes d'interface). Ce choix historique présente les mêmes inconvénients qu'une police de texte externe, pour un besoin souvent bien plus limité :
- Le fichier de police complet se charge même si seules quelques icônes sont réellement utilisées sur la page.
- Remplacer ces polices d'icônes par des fichiers SVG individuels, intégrés directement dans le code de la page, élimine cette dépendance externe tout en permettant de ne charger que les icônes effectivement utilisées, avec un rendu généralement plus net sur les écrans à haute densité de pixels.
Une optimisation complémentaire, moins connue, consiste à ne charger qu'un sous-ensemble de caractères réellement utilisés par le site plutôt que le jeu de caractères complet d'une police (accents étendus, alphabets non utilisés). Cette technique, appelée subsetting, réduit encore le poids du fichier de police, particulièrement utile pour un site qui n'utilise qu'une langue ou un alphabet précis.
Faut-il toujours auto-héberger ses polices plutôt que d'utiliser Google Fonts directement ?
Ce n'est pas obligatoire, mais c'est généralement préférable à la fois pour la vitesse et pour la confidentialité des données de vos visiteurs, surtout si votre audience inclut des visiteurs européens soumis au RGPD.
Utiliser les polices système élimine-t-il complètement ce problème ?
Oui, se contenter des polices déjà installées sur l'appareil du visiteur (comme la pile de polices système utilisée par de nombreuses interfaces modernes) élimine tout chargement de police externe, au prix d'un contrôle visuel moins précis sur l'apparence exacte selon l'appareil.
Nos offres d'hébergement mutualisé et d'hébergement WordPress permettent d'héberger vos propres fichiers de police directement sur votre espace, et notre équipe reste disponible via une demande de contact pour vous accompagner dans cette configuration.
