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

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

Une police de caractères apparemment anodine peut peser des dizaines, voire des centaines de kilo-octets.Si une page charge plusieurs variantes d'une même police, comme Regular, Bold, ExtraBold, Thin, Italic et leurs combinaisons, le poids total peut devenir important. Ce problème est encore plus flagrant sur les sites WordPress et WooCommerce créés 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 tels que PageSpeed ​​Insights, Lighthouse, WebPageTest et Google. Vitaux Web de baseUne police de caractères trop grasse peut retarder 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 e WOFF2.

Le format TTFLe 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 WOFFLe 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 mieux adapté à la distribution en ligne.

Le format WOFF2 Voici 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 des économies plus modestes, mais néanmoins significatives, généralement de l'ordre de 15 à 30 %, même avant d'appliquer des techniques plus avancées comme 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 comme… Outils de police, Brotli et, dans certains cas, les 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 il ne s'agit souvent pas de l'optimisation la plus performante. Le véritable gain en qualité est obtenu avec… sous-ensemble, c'est-à-dire la création d'un fichier de police contenant uniquement les glyphes réellement 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, signes typographiques avancés et bien plus encore. Si le site est en italien et n'utilise cette police que pour les titres, les boutons et le texte 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 permet de réaliser des économies globales de 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 aux WOFF d'origine, vous économisez environ 182 KBPar rapport aux WOFF2 non sous-ensembles, vous économisez tout de même environ 123 KBLors d'une visite unique, cela peut ne pas paraître un nombre énorme, mais avec le trafic mobile, les connexions lentes, les pages gourmandes en ressources et des milliers de visites quotidiennes, l'impact devient tangible.

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

Lorsqu'un fichier est déjà au format WOFF2, la recherche d'une compression encore plus forte est limitée. WOFF2 utilise déjà Brotli, un algorithme de compression très performant. La méthode la plus efficace pour réduire davantage la taille du fichier ne consiste pas à compresser davantage les mêmes données, mais… 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 : ne chargez que les formats et les pondérations dont vous avez réellement besoin. Si le site utilise uniquement le format WOFF2, il est inutile de charger également les formats TTF, OTF et WOFF, sauf si la compatibilité avec les navigateurs très anciens est indispensable. De même, 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 orienté vers la vitesse perçue, la qualité de l'expérience utilisateur et Vitaux Web de baseLes polices de caractères ne peuvent plus être considérées comme un détail esthétique secondaire. Elles doivent être traitées comme des ressources véritablement critiques, à analyser, compresser, extraire des sous-ensembles, mettre en cache et diffuser aussi efficacement que possible.

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.