Améliorer les performances web grâce à l'optimisation des polices

En matière de performance web, l'attention se porte presque toujours sur les images, la mise en cache, les CDN, la compression HTML, le CSS, le JavaScript, l'optimisation des bases de données et les temps de réponse du serveur. Ce sont là des aspects cruciaux, notamment dans les environnements CMS comme WordPress , WooCommerce , Joomla, Drupal, Magento ou PrestaShop. Cependant, un élément est souvent négligé ou traité superficiellement : les polices web.

Une police d'apparence anodine peut peser des dizaines, voire des centaines de kilo-octets . Si une page charge plusieurs variantes de la même police (Regular, Bold, ExtraBold, Thin, Italic, et leurs combinaisons), le poids total peut devenir considérable. Ce problème est encore plus flagrant sur les sites WordPress et WooCommerce construits avec des constructeurs de pages, des thèmes commerciaux et des extensions de personnalisation typographique, où il est très facile de charger plus de polices que nécessaire sans s'en rendre compte.

L'optimisation des polices ne se résume pas à « utiliser une police plus légère ». Il s'agit de choisir le bon format, d'éliminer les formats obsolètes lorsqu'ils ne sont plus nécessaires, de convertir les fichiers au format le plus efficace, de réduire le nombre de glyphes chargés et de configurer correctement le CSS afin que le navigateur ne télécharge que ce dont il a besoin, au moment où il en a besoin.

Pourquoi les polices de caractères ont un impact sur les performances web

Les polices de caractères sont des ressources bloquantes ou semi-bloquantes nécessaires à l'affichage de la page. Le navigateur doit les télécharger, les interpréter et les appliquer aux éléments HTML. Si la police n'est pas immédiatement disponible, le navigateur peut se comporter de différentes manières : afficher temporairement une police de remplacement, masquer brièvement le texte ou effectuer un changement visuel lorsque la police personnalisée est finalement chargée.

Ces comportements ont un impact direct sur l'expérience utilisateur et, indirectement, sur les signaux mesurés par des outils comme PageSpeed ​​Insights, Lighthouse, WebPageTest et Google Core Web Vitals . Une police trop grasse peut ralentir l'affichage du texte, augmenter le trafic réseau et dégrader la perception globale de la vitesse du site.

Ce problème est particulièrement fréquent sur les sites WordPress et WooCommerce, où l'utilisation de thèmes avancés, de constructeurs de pages et d'extensions de gestion des polices peut entraîner des chargements de fichiers inutiles. Par exemple, un site peut n'utiliser visuellement que les graisses 400 et 700, mais charger également les graisses 300, 500, 600, 800, l'italique et d'autres variantes inutilisées. Chaque fichier supplémentaire représente une requête HTTP et un poids de fichier transféré au client.

TTF, WOFF et WOFF2 : Différences pratiques

Pour comprendre comment optimiser les polices de caractères, il faut d’abord distinguer les formats les plus courants : TTF , WOFF et WOFF2.

Le format TTF (TrueType Font) est un format historique, largement utilisé dans les systèmes d'exploitation et les environnements de bureau. Il convient à une installation locale sur les ordinateurs, les logiciels graphiques et les systèmes d'exploitation, mais n'est pas idéal pour une diffusion directe sur le web. Un fichier TTF contient toutes les informations relatives à la police, mais n'est pas spécifiquement conçu pour un transfert efficace via HTTP.

Le format WOFF (Web Open Font Format) a été spécialement conçu pour le web. Il s'agit d'un conteneur compressé pour les polices TrueType ou OpenType, permettant de réduire la taille du fichier source et de faciliter son traitement par les navigateurs. Comparé au format TTF, un fichier WOFF est généralement plus petit et plus adapté à la distribution en ligne.

Le format WOFF2 est l'évolution du format WOFF. Il utilise une méthode de compression plus moderne et efficace basée sur Brotli et est désormais le format recommandé pour les polices web. Dans de nombreux cas, passer du format TTF ou OTF au format WOFF2 permet de réaliser des économies d'environ 30 % à 50 %. Passer du format WOFF au format WOFF2 permet souvent de réaliser des économies plus modestes, mais néanmoins significatives, généralement de l'ordre de 15 % à 30 %, même avant l'application de techniques plus avancées telles que le sous-ensemble.

Le problème des plugins de polices dans les CMS

Dans les systèmes de gestion de contenu modernes, il est courant d'importer des polices personnalisées via des extensions. Sous WordPress, par exemple, des extensions comme « Custom Fonts » permettent d'importer des fichiers WOFF, WOFF2, TTF ou OTF et de les enregistrer dans le thème ou l'éditeur. Cette facilité d'utilisation peut toutefois masquer certains problèmes.

Le premier problème est que le nom affiché dans le CSS ne correspond pas toujours au nom physique du fichier. Si l'on voit une règle comme celle-ci dans le navigateur :

element.style {
    font-family: "Managed Server Extra Bold";
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 400;
}

la valeur font-family: "Managed Server Extra Bold" représente le nom de la famille de polices de caractères enregistrée dans le CSS, et non nécessairement le nom du fichier téléchargé sur le serveur. Le nom du fichier lui-même pourrait être complètement différent, par exemple : Gordita-Black.woff, managed-server-extra-bold.woff2 ou ont été automatiquement renommés par l'extension.

Pour identifier le fichier effectivement servi au navigateur, il est préférable d'utiliser les outils de développement de ce dernier, en ouvrant le panneau Réseau et en filtrant les requêtes de polices. Vous pouvez également, côté serveur, rechercher les fichiers téléchargés dans le répertoire du site.

find . -path "*/wp-content/*" -type f ( -iname "*.woff" -o -iname "*.woff2" -o -iname "*.ttf" -o -iname "*.otf" )

Une autre option consiste à rechercher dans le code ou la base de données le nom de la famille de polices affichée dans le CSS :

grep -Rni "Managed Server Extra Bold" wp-content/

Ou, si vous avez WP-CLI :

wp db search "Managed Server Extra Bold"

Cette approche est utile car de nombreux plugins génèrent des règles de manière dynamique. @font-face ou enregistrez-les comme options dans la base de données.

Conversion des polices au format WOFF2

Une première optimisation consiste à convertir les polices disponibles aux formats WOFF, TTF ou OTF au format WOFF2. Sous Linux, vous pouvez utiliser des outils tels que FontTools , Brotli et, dans certains cas, des outils de la suite WOFF2.

Il est important de clarifier un aspect pratique : la commande woff2_compress Il n'est pas toujours possible de convertir directement un fichier WOFF en WOFF2. Dans de nombreux cas, la conversion fonctionne correctement à partir de fichiers TTF ou OTF, mais elle peut échouer avec un fichier WOFF déjà compressé, entraînant des erreurs d'analyse. C'est pourquoi une solution plus fiable consiste à utiliser directement FontTools, qui permet de lire un fichier WOFF et de l'enregistrer au format WOFF2.

Installation sur les environnements Debian, Ubuntu ou WSL :

apt update
apt install python3-fonttools python3-brotli

Alternativement, via pip :

pip3 install fonttools brotli

Conversion directe d'un fichier WOFF unique au format WOFF2 avec Python et FontTools :

from fontTools.ttLib import TTFont

src = "Gordita-Black.woff"
dst = "Gordita-Black.woff2"

font = TTFont(src)
font.flavor = "woff2"
font.save(dst)

print(f"{src} -> {dst}")

Convertir tous les fichiers .woff présent dans le répertoire courant :

from fontTools.ttLib import TTFont
from pathlib import Path

for src in Path(".").glob("*.woff"):
    dst = src.with_suffix(".woff2")
    try:
        font = TTFont(str(src))
        font.flavor = "woff2"
        font.save(str(dst))
        print(f"OK: {src} -> {dst}")
    except Exception as e:
        print(f"ERRORE: {src}: {e}")

Après conversion, il est toujours recommandé de vérifier la taille et le format du fichier :

ls -lh *.woff *.woff2
file *.woff2

Le véritable bond en avant en matière de qualité : le sous-ensemble

La conversion au format WOFF2 est utile car elle permet d'effectuer des optimisations théoriques représentant entre 25 et 30 % du poids, mais ce n'est souvent pas l'optimisation la plus performante. Le véritable gain de qualité provient de la création d'un sous-ensemble , c'est-à-dire d'un fichier de police contenant uniquement les glyphes nécessaires.

Une police de caractères commerciale ou professionnelle peut contenir des centaines, voire des milliers de glyphes : lettres latines, accents, symboles mathématiques, caractères grecs, cyrilliques, ligatures, flèches, icônes, symboles monétaires, symboles typographiques avancés, et bien plus encore. Si le site web est en italien et utilise cette police uniquement pour les titres, les boutons et les textes en latin, il est inutile de transférer l’intégralité du jeu de caractères au navigateur.

Pour un site italien ou européen, un sous-ensemble raisonnable pourrait inclure le bloc ASCII de base et le supplément latin nécessaire pour les lettres accentuées. Une plage couramment utilisée est :

• U+0020-007E: caractères ASCII imprimables, donc lettres de base, chiffres et ponctuation ;
• U+00A0-00FF: Supplément Latin-1, qui comprend de nombreuses lettres accentuées utilisées dans les langues européennes.

Avec FontTools, il est possible de générer un sous-ensemble de WOFF2 à l'aide de pyftsubset:

pyftsubset Gordita-Black.woff 
  --output-file=Gordita-Black-subset.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --unicodes="U+0020-007E,U+00A0-00FF" 
  --with-zopfli

La même approche peut être appliquée à toutes les variantes de polices effectivement utilisées :

pyftsubset Gordita-Bold.woff 
  --output-file=Gordita-Bold-subset.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --unicodes="U+0020-007E,U+00A0-00FF" 
  --with-zopfli

pyftsubset Gordita-Thin-1.woff 
  --output-file=Gordita-Thin-1-subset.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --unicodes="U+0020-007E,U+00A0-00FF" 
  --with-zopfli

l'option --with-zopfli Cela peut s'avérer utile lors de la génération de fichiers WOFF, tandis que pour les fichiers WOFF2, le bénéfice réel peut être limité ou dépendre du pipeline FontTools et des bibliothèques installées. Quoi qu'il en soit, l'important n'est pas de « compresser davantage » un fichier WOFF2 déjà compressé avec Brotli, mais de réduire le nombre de glyphes et de tables inclus dans le fichier final.

Exemple concret : Optimisation de la police Gordita

Prenons l'exemple concret d'une étude de cas portant sur l'optimisation de trois variantes de la police Gordita : Black, Bold et Thin. Les fichiers initiaux étaient au format WOFF. Ils ont d'abord été convertis au format WOFF2, puis un sous-ensemble a été créé, conservant les caractères ASCII et Latin-1 Supplement, suffisants pour une utilisation courante en italien et dans les langues européennes.

Le répertoire de travail présentait cette situation après conversion et sous-ensemble :

Gordita-Black.woff              86K
Gordita-Black.woff2             66K
Gordita-Black-subset.woff2      24K

Gordita-Bold.woff               84K
Gordita-Bold.woff2              64K
Gordita-Bold-subset.woff2       23K

Gordita-Thin-1.woff             81K
Gordita-Thin-1.woff2            62K
Gordita-Thin-1-subset.woff2     22K

Nous présentons ces données sous forme de tableau :

Le résultat est extrêmement intéressant. La simple conversion de WOFF en WOFF2 permet déjà une économie d'environ 23 à 24 %. Il s'agit d'une amélioration significative, obtenue sans modifier le jeu de caractères disponible. Cependant, le sous-ensemble de caractères porte les économies globales à plus de 72 % par rapport aux fichiers WOFF d'origine.

En considérant les trois variantes ensemble, le poids total passe de :

• 251 KB au format WOFF original ;
• 192 KB au format WOFF2 converti ;
• 69 KB au format WOFF2 sous-ensemble.

En pratique, par rapport au fichier WOFF original, vous économisez environ 182 Ko . Par rapport au fichier WOFF2 non sous-échantillonné, vous économisez encore environ 123 Ko . Lors d'une visite unique, cela peut paraître peu, mais avec le trafic mobile, les connexions lentes, les pages gourmandes en ressources et des milliers de visites quotidiennes, l'impact devient significatif.

Pourquoi le sous-ensemble est plus efficace que la simple compression

Lorsqu'un fichier est déjà au format WOFF2, il est difficile d'améliorer encore sa compression. WOFF2 utilise déjà Brotli, un algorithme de compression très performant. La méthode la plus efficace pour réduire davantage la taille d'un fichier n'est pas d'améliorer la compression des données existantes, mais de supprimer les données inutiles.

Une police de caractères complète peut contenir des caractères que le site n'utilisera jamais. Un site en italien, par exemple, n'aura peut-être pas besoin des glyphes cyrilliques ou grecs, des symboles phonétiques, des opérateurs mathématiques avancés ni des alphabets étendus. Si la police est utilisée uniquement dans les titres, il n'est pas forcément nécessaire d'inclure tous les symboles typographiques disponibles. Enfin, si elle sert uniquement à un logo textuel ou à quelques appels à l'action, vous pouvez même générer un sous-ensemble basé sur les caractères réellement présents dans ces phrases.

FontTools vous permet également de créer des sous-ensembles à partir d'un fichier texte contenant les polices réellement utilisées :

pyftsubset Gordita-Black.woff 
  --output-file=Gordita-Black-used.woff2 
  --flavor=woff2 
  --layout-features='*' 
  --text-file=caratteri-usati.txt

Cette technique est très radicale et doit être utilisée avec précaution. Elle est idéale pour les éléments bien contrôlés, tels que les logos textuels, les titres d'en-tête statiques, les boutons ou les titres principaux. En revanche, elle est risquée pour les textes dynamiques, le contenu généré par les utilisateurs, les catalogues WooCommerce, les blogs multilingues ou les zones où le contenu change fréquemment.

Comment intégrer des polices optimisées dans CSS

Après avoir généré les fichiers WOFF2 optimisés, vous devez les intégrer correctement à votre site. @font-face permet de déclarer la police et d'indiquer au navigateur quel fichier télécharger.

@font-face {
  font-family: 'Gordita';
  src: url('/wp-content/uploads/fonts/Gordita-Black-subset.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gordita';
  src: url('/wp-content/uploads/fonts/Gordita-Bold-subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gordita';
  src: url('/wp-content/uploads/fonts/Gordita-Thin-1-subset.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

La propriété font-display: swap C'est particulièrement important. Cela indique au navigateur d'afficher immédiatement une police de secours et de la remplacer par la police personnalisée dès qu'elle est disponible. Cela réduit le risque que du texte soit invisible pendant le chargement de la police.

Il est tout aussi important de faire correspondre correctement la graisse de la police. Si un fichier s'appelle « Noir » ou « ExtraBold », il devrait probablement être déclaré avec une graisse de 800 ou 900, et non de 400. Une incohérence entre le fichier réel et font-weight Cela peut entraîner des comportements indésirables, un rendu incohérent et le chargement de variantes incorrectes.

Optimisation dans WordPress et WooCommerce

L'optimisation des polices peut être gérée de plusieurs manières dans WordPress. Certains thèmes permettent d'importer des polices personnalisées depuis le panneau de configuration. Certains constructeurs de pages proposent une section dédiée aux polices personnalisées. Des extensions comme « Custom Fonts » permettent d'importer des familles de polices personnalisées et de les associer à différentes graisses.

La recommandation est simple : n’importez que les formats et graisses réellement nécessaires. Si le site utilise uniquement le format WOFF2, il est inutile d’importer également les formats TTF, OTF et WOFF, sauf si la compatibilité avec les navigateurs très anciens est impérative. Si la conception n’utilise que les polices Regular et Bold, il est inutile d’enregistrer six ou sept variantes.

Dans WooCommerce, c'est d'autant plus important que les pages produits, catégories, panier et paiement doivent être aussi rapides et stables que possible. Une police de caractères grasse peut sembler esthétique, mais sur mobile, elle peut ralentir l'affichage du contenu, surtout si elle est chargée avec des images de produits, des scripts de suivi, du CSS du thème, des plugins de paiement, des widgets marketing et des composants dynamiques.

Le principe reste toutefois valable quel que soit le CMS. Qu'il s'agisse de WordPress, WooCommerce, Magento, PrestaShop, Drupal, Joomla ou d'une application personnalisée développée avec Laravel, Symfony, Next.js ou une autre technologie, le navigateur devra toujours télécharger les polices. Moins il y a de données inutiles transférées, meilleur sera le comportement de la page.

Précharger les polices critiques

Dans certains cas, il peut être utile de précharger les polices essentielles, celles nécessaires pour la partie visible de la page. Le préchargement doit toutefois être utilisé avec précaution : précharger un trop grand nombre de polices peut dégrader les performances au lieu de les améliorer, car cela accapare d’autres ressources importantes.

Exemple de préchargement pour une police WOFF2 :

<link rel="preload"
      href="/wp-content/uploads/fonts/Gordita-Bold-subset.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

Le préchargement est pertinent pour une ou deux polices essentielles, comme celle du titre principal de la page d'accueil ou de la section principale. Il ne doit pas être utilisé systématiquement pour toutes les variantes de la même famille de polices.

Attention au cache, au CDN et au type MIME

Une fois les fichiers optimisés, il est essentiel de vérifier qu'ils sont correctement servis par le serveur. Les polices doivent comporter des en-têtes de cache longs, surtout si leur nom inclut une version ou s'il ne change que lors du déploiement. Un fichier WOFF2 peut être mis en cache en toute sécurité par le navigateur et un CDN pendant une période prolongée.

Il est également utile de vérifier le type MIME. Pour WOFF2, le type correct est :

font/woff2

Pour WOFF :

font/woff

Des configurations incorrectes peuvent générer des avertissements du navigateur ou un comportement non optimal. Sur Nginx, par exemple, vous pouvez vous assurer que les types MIME sont présents dans la configuration globale ou dans le fichier de configuration. mime.types.

Liste de contrôle pratique pour l'optimisation des polices

Une bonne méthode de travail pour optimiser les polices web peut être la suivante :

• localiser tous les fichiers de polices téléchargés sur le site à l'aide des outils de développement ou de la recherche côté serveur ;
• vérifier quelles variantes sont réellement utilisées dans le CSS ;
• éliminer les poids, styles et formats inutiles ;
• convertir les fichiers au format WOFF2 lorsque cela est possible ;
• appliquer un sous-ensemble pour n'inclure que les caractères nécessaires ;
• configurer correctement @font-face avec font-display: swap;
• N'utilisez le préchargement que pour les polices essentielles situées au-dessus de la ligne de flottaison ;
• Configurer une mise en cache HTTP adéquate ;
• Testez le résultat avec PageSpeed ​​Insights, Lighthouse et l'analyse en cascade du réseau.

Pour rechercher toutes les polices dans un répertoire WordPress, vous pouvez utiliser :

find . -type f ( -iname "*.woff" -o -iname "*.woff2" -o -iname "*.ttf" -o -iname "*.otf" )

Pour générer en masse des sous-ensembles WOFF2 à partir de tous les fichiers WOFF du répertoire courant :

for f in *.woff; do
  base="${f%.woff}"
  pyftsubset "$f" 
    --output-file="${base}-subset.woff2" 
    --flavor=woff2 
    --layout-features='*' 
    --unicodes="U+0020-007E,U+00A0-00FF"
done

conclusion

L'optimisation des polices de caractères est l'une des interventions les plus sous-estimées en matière de performance web. Contrairement à d'autres tâches plus complexes, telles que l'optimisation des bases de données, l'optimisation du backend ou les modifications architecturales, la réduction du poids des polices est souvent relativement simple, mesurable et immédiate.

L'exemple concret des fichiers Gordita illustre parfaitement le potentiel de cette intervention. La conversion WOFF vers WOFF2 a permis de réduire la taille totale des fichiers de 251 Ko à 192 Ko. Le sous-ensemble a ramené le total à seulement 69 Ko, soit une économie globale de plus de 70 % par rapport aux fichiers d'origine.

Ce type d'optimisation est particulièrement utile sur les sites WordPress et WooCommerce, où les thèmes, les constructeurs et les extensions peuvent générer une quantité importante de ressources typographiques superflues. Le principe reste toutefois universel : tout CMS, framework ou application web bénéficie d'une taille de fichier réduite, d'un nombre limité de variantes et de formats plus efficaces.

Dans un web de plus en plus axé sur la vitesse perçue, la qualité de l'expérience utilisateur et les indicateurs clés de performance (KPI) , les polices de caractères ne peuvent plus être considérées comme un simple détail esthétique. Elles doivent être traitées comme des ressources essentielles, analysées, compressées, extraites, mises en cache et diffusées avec une efficacité maximale.

L'optimisation des polices améliore les temps de chargement, réduit la consommation de bande passante, stabilise le rendu et offre une meilleure expérience utilisateur. De plus, comme le montrent les chiffres, quelques commandes Linux et une configuration CSS appropriée suffisent souvent à obtenir des résultats très concrets.