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 lors du chargement de la page, 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 et sollicitent davantage la batterie, 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 :

Copie d’écran d’un titre et d’un sous-titre d’un article avec une police classique
Site eWatchers.org sur Windows à partir du navigateur Firefox.
Copie d’écran d’un titre et d’un sous-titre d’un article avec une police classique quasiment identique à la précédente
Site eWatchers.org sur MacOS à partir du navigateur Safari.
Copie d’écran d’un titre et d’un sous-titre d’un article avec une police classique quasiment identique à la précédente
Site eWatchers.org sur Android à partir du navigateur Chrome.
Copie d’écran d’un titre et d’un sous-titre d’un article avec une police classique quasiment identique à la précédente
Site eWatchers.org sur iOS à partir du navigateur Safari.

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 ont fait 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é des entreprises et indépendants, qui demande à ses utilisateurs de télécharger non pas une, mais 7 polices de caractères différentes !

Logo de Alan avec le slogan « L’assurance santé qui fait simple. »
Page d’accueil du site Alan.com

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.

Six versions d’une même police de caractère avec des épaisseurs différentes
Police de caractères FilsonPro proposées dans plein de déclinaisons sur le site BestFonts.pro

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

Des petites icônes diverses comme une maison, un stylo ou un avion
Police de caractères proposée par icomoon.io

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

Copie d’écran de la police Lato en deux versions : normale et italique
Police de caractères Lato proposée par Google Fonts

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[9], 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[10] 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 :

Tableau de bord d’un assuré Alan
Site d’Alan.com original, avec les 6 polices de caractères différentes.

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 :

Tableau de bord d’un assuré Alan quasiment identique au précédent
Site d’Alan.com réalisé par eWatchers.org avec des polices natives.

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.

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.

Copie d’écran des paramètres de l’application avec l’option « Bloquer les polices d’écriture distantes » désactivée
Paramètre à activer pour désactiver le téléchargement des polices de caractères dans le module uBlockOrigin.

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. Cela permet aux utilisateurs d’Alan, dont je fais partie, de consulter le site dans le cas où le téléchargement de police herbergée chez Google échoue, ou dans le cas où l’utilisateur ne souhaite pas utiliser de polices personnalisées.

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

Notes et références

  1. Deux méthodes de chargement de polices de caractères sont possibles en réalité : celle qui consiste à demander à l’internaute d’attendre le téléchargement complet de la police avant d’afficher la page et celle qui consiste à afficher la page avec une police native lors du chargement de la police externe. La première méthode est souvent privilégiée, car la deuxième introduit la plupart du temps une modification de la disposition des éléments à l’écran lorsque la nouvelle police est appliquée, car la taille des caractères n’est pas nécessairement identique d’une police à l’autre.
  2. Une police de caractères a une taille variable, qui peut aller de 20 kB à 2 MB.
  3. Il est courant, en 2021, de posséder un forfait mobile avec une enveloppe de 3 Go, 5 Go, ou 10 Go de données 3G/4G par mois.
  4. Le site Booking.com utilise des polices de caractères natives sur son site Internet (source : booking.design, en anglais).
  5. Le site GitHub.com, propriété de Microsoft, utilise des polices de caractères natives sur son site Internet (source : le code source de leur page d’accueil).
  6. Les sites du réseau StackExchange utilisent des polices de caractères natives depuis la 10/05/2021 (source : stackexchange.com, en anglais).
  7. Par le passé, il était courant de créer des polices en remplaçant chaque caractère par une icône. Cette pratique a l’avantage de permettre l’utilisation d’un grand nombre d’icônes en téléchargeant uniquement un seul document, et l’inconvénient de demander le téléchargement d’une ressource contenant toutes les icônes, même si certaines ne sont probablement pas utilisées.
  8. Google propose un grand choix de polices de caractères pour permettre aux éditeurs et développeurs d’intégrer facilement des polices dans leurs pages Web, sans se soucier du stockage et de la bande passante : fonts.google.com.
  9. La page de l’article « Des pixels espions sont présents dans tous vos e-mails, mais vous pouvez les bloquer » est de 244 kB, en comptant toutes les ressources extérieures comme les images, les images de favoris, etc.
  10. Le chargement d’une page intégrant une police de caractères de 200 kB prend 2 secondes avec une connexion 3G classique (source : morgan.schmiedt.fr).
  11. Le module uBlock Origin permet de bloquer les publicités et certains trackers. Le module peut être téléchargé gratuitement sur ublockorigin.com.