Les polices de caractères personnalisées sont néfastes aux internautes

Lorsqu’on souhaite réaliser un site Internet, on peut être tenté de privilégier l’esthétique à la performance, car, après-tout, l’internaute est probablement plus sensible à ce qu’il voit. Je pense que c’est une erreur.

Un site Internet devrait toujours avoir comme priorités essentielles d’être fonctionnel, accessible et performant. Tout ce qui ne rentre pas dans ces trois catégories est secondaire et peut être ajouté uniquement si cela ne dégrade pas ces trois qualités principales.

Les ordinateurs et les téléphones portables des internautes sont aujourd’hui d’une puissance considérable. Les réseaux filaires et mobiles que l’on utilise sont également très performants depuis la généralisation de la 4G et de la fibre optique. Tout cela est un net progrès et permet d’accéder à des usages qui étaient autrefois impossibles ou réservés à certains privilégiés. Il faut cependant rester attentif à ne pas gâcher cette puissance et cette rapidité avec des éléments superflus. C’est notamment le cas sur Internet, où les éditeurs de sites Internet peuvent être tentés d’ajouter des images haute-définition, des vidéos, des animations, des interactions ou des polices de caractères particulières. Ce n’est pas parce que des choses sont techniquement possibles et faciles à réaliser qu’il est judicieux de les faire. Certains éléments, comme les polices de caractères, ont une utilité discutable et pourraient probablement être supprimées pour le bien de tous.

Choix de la police de caractères d’un site Internet

Les éditeurs de sites Internet ont le choix entre trois options lorsqu’ils souhaitent implémenter une police de caractères sur leurs pages :

• ne rien faire et laisser le navigateur de l’internaute utiliser la police de caractères par défaut ;
• demander au navigateur d’afficher le texte dans une police de caractères spécifique, en espérant qu’elle soit présente dans l’appareil de l’internaute ;
• inclure une police de caractères personnalisée et demander à l’internaute de la télécharger.

La première option, qui consiste à ne rien faire, a l’avantage d’être facile à implémenter et d’être performante pour l’internaute, qui ne doit pas attendre le téléchargement d’une ressource extérieure. Elle a cependant l’inconvénient de proposer une expérience différente selon que l’utilisateur est sur Windows, sur Mac, sur iOS (iPhone) ou sur Android, car la police de caractères par défaut n’est pas identique.

La seconde option, qui consiste à utiliser une police que l’internaute possède, a l’avantage d’être gratuite pour l’éditeur et d’être performant pour l’utilisateur, qui ne doit rien télécharger. Elle a cependant l’inconvénient de demander un peu de travail pour l’éditeur, car les polices présentes sur les Mac, PC, ou sur les appareils Android/iPhone ne sont pas identiques, pour des raisons de droits principalement. Il faut donc bien les choisir, si l’on souhaite proposer une expérience similaire sur tous les supports.

Enfin, la dernière option, qui consiste à inclure une police de caractères personnalisée, permet de s’assurer que tous les utilisateurs aient la même expérience, mais a des conséquences non négligeables pour l’éditeur et pour l’internaute.

Le coût des polices spécifiques

On peut facilement tomber dans la facilité de choisir une ou plusieurs polices particulières pour rendre son site « plus joli », mais cette opération est coûteuse pour l’internaute :

• en termes de temps, car l’internaute doit attendre le téléchargement complet de la police de caractères avant de pouvoir visualiser le site^[1].
• en termes de bande-passante, car la taille des polices de caractères n’est pas négligeable^[2] et la quantité de données mensuelle allouée à l’utilisateur est souvent limitée^[3], notamment en 3G/4G.
• en termes de puissance de calcul, car l’opération demande un traitement, certes peu gourmand, mais non négligeable.

Sur un ordinateur de bureau avec une connexion « illimitée » de bonne qualité, le coût est probablement acceptable. Sur mobile, ce n’est pas la même histoire. Le traitement et le transfert de données sont énergivores, ce qui est néfaste pour l’utilisateur.

Pour l’éditeur du site, l’opération n’est pas non plus gratuite. La ou les polices de caractères doivent être potentiellement achetées. Elles doivent ensuite être stockées dans de nombreux formats, pour un maximum de compatibilité avec les différents appareils, et ce stockage à un coût. La bande passante issue des serveurs sur lesquels sont stockées les polices a également un coût non négligeable.

Aussi, l’ajout de polices de caractères complexifie un site Internet en ajoutant un élément non essentiel aux pages, ce qui rend la maintenance plus compliquée pour les éditeurs et peut entraîner des effets indésirables, comme on le verra plus loin.

La meilleure des polices est celle que l’internaute possède déjà

Les éditeurs de site devraient privilégier des polices natives, c’est-à-dire celles déjà présentes sur les appareils des internautes. Cela permet d’améliorer la performance du site Internet, d’être respectueux du temps de l’utilisateur, et de lui permettre une meilleure utilisation de son appareil.

Certes, toutes les polices ne sont pas présentes nativement, mais est-ce réellement important ? La majorité des sites a pour objectif de délivrer une information spécifique, ou de permettre la réalisation d’une opération donnée. Dans ces deux cas, toutes les polices présentes dans les appareils des utilisateurs feront le travail.

Exemple de la police de caractères de eWatchers.org

Le site que vous êtes en train de lire, et qui a été réalisé par votre serviteur, utilise les polices natives de votre appareil. Concrètement, la page que vous recevez contient une liste de polices de caractères. Le navigateur peut alors choisir la police qu’il connaît parmi la liste et l’utiliser.

Les polices ne sont pas strictement identiques d’un point de vue esthétique, mais les différences sont négligeables. Jugez par vous-même :

Si vous ne voyez pas de différences, c’est normal, car même si les polices sont théoriquement différentes, tous se copient les uns les autres pour proposer une expérience semblable.

Exemple du site d’Alan.com

Peu font le choix d’utiliser des polices natives pour le bien de leurs utilisateurs. Parmi les bons élèves, on pourrait citer le célèbre site de réservations, « Booking.com »^[4], le site pour développeurs « GitHub.com »^[5] ou bien les sites de questions-réponses du réseau « StackExchange »^[6]. D’autres sont moins soucieux, comme le site « Alan.com », spécialisé dans l’assurance santé, qui demande à ses utilisateurs de télécharger non pas une, mais sept polices de caractères différentes !

Cinq de ces polices font référence à la police nommée FilsonPro, car le site demande à l’internaute de récupérer la police sous toutes ses déclinaisons : normal, italique, gras, « black », et « heavy ».

La sixième correspond à une (fausse) police de caractères nommée icomoon et contient en réalité des icônes^[7].

La dernière est la police de caractères nommée Lato, récupérée directement depuis les serveurs de Google^[8].

Au total, ce sont 207 kB de données que l’utilisateur doit télécharger et traiter. À titre de comparaison, la page de l’article sur les pixels espions pèse 244 kB, en incluant les six images que contient l’article. Si ces polices étaient appliquées à la page, le poids de la page doublerait.

Mes tests^[9] ont montré que le chargement d’une page simple avec 200 kB de police de caractères prenait 2 secondes avec une connexion 3G classique. Pendant tout ce temps, l’utilisateur doit attendre devant une page blanche.

Après avoir téléchargé ces six polices de caractères et attendu un temps bien trop long, la page s’affiche :

Cela est-il bien utile ? Voici, à titre d’exemple, la même page avec des polices natives, réalisée par mes soins, et qui ne nécessite aucun téléchargement :

Avouez que la différence n’est pas flagrante. Et pourtant, dans le second cas, tout le monde y gagne : plus simple et plus économique. Le choix idéal pour une société qui se veut « faire simple ». L’histoire ne s’arrête malheureusement pas là, car si, pour une raison ou une autre, le téléchargement de la police Lato, hébergée chez Google, échoue, le site d’Alan affiche une page blanche rendant le site totalement inutilisable.

Dans mon cas, le téléchargement de la police est bloqué intentionnellement pour les raisons que je détaille plus loin, mais l’échec aurait très bien pu venir d’une défaillance du réseau, ou d’un dysfonctionnement temporaire des services de Google. L’ajout de polices de caractères personnalisées censées améliorer l’expérience de l’utilisateur a donc eu l’effet inverse et a eu pour conséquence le blocage complet de la page. On ne peut pas blâmer les développeurs d’Alan d’être confrontés à des bugs, car le développement d’un site Internet est une tâche compliquée, surtout avec l’arrivée rapide de nouveaux usages et la diversité des équipements des internautes. On peut cependant se demander s’il est bien nécessaire de complexifier inutilement les pages et de prendre des risques que l’on pourrait facilement éviter.

Bloquer les polices pour une meilleure expérience sur Internet

Il y a plein de bonnes raisons de vouloir bloquer les polices extérieures :

• Un chargement plus rapide des pages Web ;
• Une utilisation moindre de son processeur et de sa mémoire vive ;
• Une meilleure autonomie de sa batterie, notamment sur mobile ;
• Moins de consommation de bande passante ;
• Une meilleure confidentialité, surtout si les polices sont hébergées chez des tiers^[10].

Si vous avez suivi les recommandations de sécurité présentes sur ce site et que vous avez ajouté le bloqueur de pub « uBlock Origin »^[11] sur votre navigateur, vous avez la possibilité de bloquer facilement le téléchargement des polices de caractères.

Essayez et testez la différence.

Note : le choix s’est porté sur le site d’Alan.com car le site illustrait au mieux les propos de cet article. L’objectif n’est pas de dénigrer leur travail, mais de faire comprendre au plus grand nombre les problèmes liés à l’utilisation de polices de caractères spécifiques et d’inciter les éditeurs de sites Internet à ne pas recourir à ces polices personnalisées.

Note 2 : les équipes d’Alan.com ont été contactées et la police extérieure Lato a été retirée suite à mon signalement.

MAJ du 07/05/2021 : ajout de StackExchange à la liste des sites utilisant des polices natives.