Optimiser les polices web : WOFF2, sous-ensembles, hébergement

Les polices web font partie intégrante du design d’un site, mais elles ont toujours un coût en performance. Des fichiers volumineux mettent du temps à se télécharger et retardent l’affichage du texte. La bonne nouvelle : plusieurs techniques permettent de réduire fortement ce coût, en ne servant que les caractères réellement utiles et dans le format le plus léger.

Pour le SEO, l’enjeu est clair. Des polices plus légères se téléchargent plus vite, améliorent le First Contentful Paint et limitent la contention de bande passante au démarrage de la page, au moment précis où l’utilisateur attend de voir et d’interagir avec le contenu. Optimiser les polices, en complément de l’optimisation du chargement des polices, c’est offrir une expérience plus rapide, et donc renforcer les signaux de performance pris en compte par Google.

Une police web se déclare dans une feuille de style avec une règle @font-face qui associe un nom de famille à une ressource. Pour économiser la bande passante, le navigateur ne télécharge la police que lorsqu’il constate qu’un élément de la page l’utilise réellement, par exemple un titre h1.

Ce mécanisme évite de récupérer des polices inutiles, mais il a un revers : si vos déclarations @font-face se trouvent dans une feuille de style externe, le navigateur ne peut les découvrir qu’après l’avoir téléchargée. Les polices deviennent alors des ressources découvertes tardivement, ce que les techniques ci-dessous viennent corriger.

Le premier levier est le format. WOFF2 est largement compatible avec les navigateurs et offre la meilleure compression, jusqu’à 30 % de mieux que WOFF. Pour les navigateurs modernes, c’est souvent le seul format nécessaire : n’ajoutez WOFF, EOT ou TTF que si vous devez prendre en charge des navigateurs anciens.

Le second levier est le sous-ensemble. Une police contient généralement un large éventail de glyphes couvrant de nombreuses langues. Si votre page n’utilise qu’un seul alphabet, vous pouvez retirer les glyphes inutiles et réduire fortement la taille du fichier. Certains fournisseurs proposent des sous-ensembles via un paramètre d’URL ; en auto-hébergement, des outils comme glyphhanger ou subfont génèrent ces sous-ensembles.

Une police peut être servie par un service tiers ou auto-hébergée sur votre propre origine. Avec un service tiers, le navigateur doit d’abord ouvrir une connexion au domaine du fournisseur avant de télécharger la police, ce qui retarde sa récupération. L’indice de ressource preconnect réduit cette surcharge en ouvrant la connexion plus tôt, l’un des gestes pour anticiper les connexions réseau.

Dans la plupart des cas, l’auto-hébergement est plus rapide car il supprime cette connexion à une origine externe. Si vous choisissez cette voie, assurez-vous que votre site utilise un CDN, le protocole HTTP/2 ou HTTP/3, et qu’il définit des en-têtes de cache adaptés pour vos polices.

Pour que le navigateur découvre les polices au plus vite, vous pouvez intégrer le CSS critique, y compris les déclarations @font-face, directement dans la balise head via un élément style. Le navigateur n’a alors plus besoin d’attendre une feuille de style externe. Avantage par rapport au fait de précharger les ressources critiques : il ne télécharge que les polices réellement nécessaires au rendu de la page courante, sans risque de charger des polices inutilisées. Attention toutefois, le téléchargement ne démarre qu’une fois toutes les ressources bloquant le rendu chargées.