Pourquoi votre thème PrestaShop charge 15 polices dont vous n'avez pas besoin

Le coût caché de la surcharge de polices dans les thèmes PrestaShop

Ouvrez les DevTools de votre navigateur, passez à l'onglet Réseau, filtrez par « Font » et rechargez votre boutique PrestaShop. Si vous voyez plus de trois ou quatre fichiers de polices en cours de téléchargement, vous avez un problème qui vous coûte silencieusement des clients. La plupart des thèmes PrestaShop sont livrés avec un nombre impressionnant de ressources de polices que la boutique moyenne n'utilise jamais, et chacune d'entre elles retarde le moment où vos visiteurs peuvent réellement lire votre contenu.

La surcharge de polices est l'un des problèmes de performance les plus négligés dans PrestaShop. Les propriétaires de boutiques passent des heures à optimiser les images, à activer le CCC (Combiner, Compresser, Mettre en cache) et à peaufiner les configurations serveur, tout en ignorant le fait que leur thème charge 800 Ko ou plus de fichiers de polices à chaque chargement de page. Cet article explique exactement pourquoi cela se produit, comment auditer votre chargement de polices et que faire pour y remédier.

Comment les thèmes PrestaShop intègrent les polices

Les thèmes PrestaShop sont distribués sous forme de packages autonomes. Lorsqu'un développeur de thème construit un thème, il souhaite qu'il fonctionne clé en main pour le plus grand nombre de boutiques possible. Cela signifie qu'il inclut chaque variante de police et chaque bibliothèque d'icônes dont il pourrait concevoir le besoin. Le résultat est un thème livré avec bien plus de ressources de polices qu'une seule boutique n'en utilisera jamais.

Un thème PrestaShop typique inclut trois catégories de polices. Premièrement, il y a les polices d'affichage utilisées pour les titres, le corps du texte et les éléments d'interface. Ce sont généralement des Google Fonts comme Roboto, Open Sans, Lato ou Montserrat. Deuxièmement, il y a les polices d'icônes comme FontAwesome, Material Icons ou des jeux d'icônes spécifiques au thème. Troisièmement, il y a les polices de repli ou décoratives que le thème utilise pour des composants spécifiques comme les bannières, les badges ou les sections promotionnelles.

Le problème se multiplie car chaque famille de polices est généralement livrée avec plusieurs graisses et styles. Une seule police comme Roboto peut inclure Regular (400), Medium (500), Bold (700) et leurs variantes italiques, chacune sous forme d'un fichier WOFF2 séparé. Multipliez cela par deux ou trois familles de polices plus une bibliothèque d'icônes, et vous atteignez rapidement 12 à 15 fichiers de polices individuels chargés à chaque page.

Le problème FontAwesome

FontAwesome mérite sa propre section car c'est le plus grand coupable en matière de performance liée aux polices dans les thèmes PrestaShop. La bibliothèque complète de FontAwesome 5 pèse environ 150 Ko pour le fichier de police web seul, plus 60 à 80 Ko supplémentaires pour son CSS. FontAwesome 6 est encore plus volumineux. La bibliothèque contient plus de 1 600 icônes, mais la boutique PrestaShop moyenne en utilise peut-être 20 à 30.

Cela signifie que vous forcez chaque visiteur à télécharger plus de 200 Ko de données de police et de CSS juste pour afficher une icône de panier, une loupe de recherche et quelques logos de réseaux sociaux. C'est un compromis absurde, et cela se produit parce que les développeurs de thèmes trouvent plus facile d'inclure la bibliothèque entière que de la sous-ensemble pour les besoins spécifiques de chaque boutique.

Le thème Classic de PrestaShop 1.7 et 8.x inclut FontAwesome 4.7, qui est légèrement plus petit mais contient tout de même des centaines d'icônes que vous n'utiliserez jamais. Le thème Hummingbird de PrestaShop 8.x s'est éloigné de FontAwesome en faveur des icônes SVG, ce qui est une amélioration significative, mais de nombreux thèmes et modules tiers s'appuient toujours sur FontAwesome et chargent leur propre copie en plus de ce que le thème fournit.

Google Fonts et la taxe sur les performances

Google Fonts est le service de polices web le plus populaire, et les thèmes PrestaShop en font un usage intensif. Cependant, charger Google Fonts de la manière par défaut crée une chaîne de requêtes qui nuisent aux performances.

Lorsque votre thème charge Google Fonts via la balise link standard, le navigateur doit d'abord se connecter à fonts.googleapis.com pour télécharger le fichier CSS. Ce fichier CSS indique ensuite au navigateur de télécharger les fichiers de polices réels depuis fonts.gstatic.com. Chacune de ces connexions nécessite une résolution DNS, un handshake TCP et une négociation TLS. Sur les connexions mobiles, cette chaîne peut ajouter 300 à 500 ms de délai avant qu'un seul caractère de texte ne s'affiche à l'écran.

Pire encore, le CSS de Google Fonts utilise le descripteur font-display défini sur « swap » par défaut depuis 2019, mais de nombreux thèmes plus anciens référencent encore des URL de CSS Google Fonts qui précèdent ce changement. Sans font-display: swap, le navigateur peut masquer tout le texte de la page jusqu'à ce que la police soit téléchargée, créant le redouté Flash of Invisible Text (FOIT) où les visiteurs voient une page vide pendant une à trois secondes.

Il y a également une préoccupation en matière de vie privée. Charger des polices depuis le CDN de Google signifie que Google reçoit des informations sur chaque visiteur de votre boutique, y compris son adresse IP et les pages visitées. En vertu du RGPD, cela nécessite un consentement explicite, et un tribunal allemand a jugé en janvier 2022 que l'utilisation de Google Fonts sans consentement viole le RGPD, avec des amendes à la clé.

Comment auditer votre chargement de polices

Avant de pouvoir résoudre le problème, vous devez comprendre exactement quelles polices votre thème charge et lesquelles vous utilisez réellement. Voici une approche systématique.

Ouvrez les DevTools de Chrome (F12), allez dans l'onglet Réseau et cochez la case « Désactiver le cache ». Rechargez votre page et filtrez par « Font » dans la barre de filtre. Vous verrez chaque fichier de police que le navigateur télécharge. Notez les noms de fichiers, les tailles et la colonne Initiateur qui vous indique quel fichier CSS a demandé chaque police.

Ensuite, utilisez l'onglet Couverture dans les DevTools (Ctrl+Shift+P, puis tapez « Coverage »). Démarrez un enregistrement de couverture et naviguez dans votre boutique. L'onglet Couverture vous montre exactement quelle proportion de chaque fichier CSS est réellement utilisée. Pour le CSS de FontAwesome, vous verrez généralement 90 % ou plus marqué comme non utilisé.

Vous pouvez également utiliser l'audit Lighthouse dans les DevTools. Lancez un audit de performance et recherchez les opportunités « Réduire le CSS inutilisé » et « Garantir que le texte reste visible pendant le chargement des polices web ». Lighthouse signalera spécifiquement les problèmes de performance liés aux polices.

Pour une analyse plus approfondie, utilisez WebPageTest (webpagetest.org) pour lancer un test depuis une connexion mobile. Examinez le graphique en cascade et trouvez les requêtes de polices. Notez quand elles commencent à se charger par rapport aux autres ressources et combien de temps elles prennent. Sur une connexion 3G, les délais de chargement des polices deviennent douloureusement évidents.

Supprimer les polices inutilisées étape par étape

Une fois que vous savez quelles polices votre thème charge et lesquelles vous utilisez réellement, il est temps de supprimer le surplus. L'approche diffère selon l'architecture de votre thème.

Pour les thèmes qui chargent Google Fonts via une balise link dans le template d'en-tête, trouvez le fichier de template qui contient la référence Google Fonts. Dans la plupart des thèmes, il se trouve dans templates/layout/head.tpl ou un fichier similaire. Si vous utilisez un thème enfant, copiez ce template dans le répertoire de votre thème enfant avant de le modifier. Supprimez ou modifiez le lien Google Fonts pour n'inclure que les graisses et familles que vous utilisez réellement.

Pour FontAwesome, vérifiez si votre thème le charge via un fichier CSS dans le répertoire assets/css ou via un lien CDN. S'il s'agit d'un fichier local, vous avez deux options. Vous pouvez remplacer le package complet de FontAwesome par un sous-ensemble contenant uniquement les icônes que vous utilisez, ou vous pouvez remplacer entièrement l'utilisation de la police d'icônes par des SVG en ligne.

Pour créer un sous-ensemble de FontAwesome, utilisez un outil comme IcoMoon (icomoon.io) ou Fontello (fontello.com). Ces outils vous permettent de sélectionner uniquement les icônes spécifiques dont vous avez besoin et de générer un fichier de police personnalisé qui pourrait peser 5 à 10 Ko au lieu de 150 Ko. Vous devrez mettre à jour les noms de classes CSS si l'outil en génère de différents, mais la plupart permettent de conserver les noms de classes FontAwesome originaux.

Pour Google Fonts, vérifiez chaque fichier CSS de votre thème pour les déclarations @font-face. Les développeurs de thèmes importent parfois des polices directement dans le CSS plutôt que via le template d'en-tête. Utilisez la recherche DevTools (Ctrl+Shift+F) pour chercher dans toutes les ressources chargées « @font-face » et « fonts.googleapis.com ».

Implémenter font-display: swap

Si vous conservez des polices web, assurez-vous absolument qu'elles utilisent le descripteur font-display: swap. Cela indique au navigateur d'afficher immédiatement le texte en utilisant une police système de repli pendant que la police web se télécharge en arrière-plan. Une fois la police web prête, le navigateur la substitue. Cela élimine le FOIT et garantit que votre contenu est lisible instantanément.

Pour les Google Fonts chargées via CDN, ajoutez le paramètre display=swap à l'URL. Par exemple, changez fonts.googleapis.com/css2?family=Roboto:wght@400;700 en fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Notez que Google a ajouté ce paramètre par défaut en 2019, mais de nombreux thèmes PrestaShop utilisent encore des formats d'URL plus anciens.

Pour les polices auto-hébergées avec des déclarations @font-face dans votre CSS, ajoutez font-display: swap à chaque bloc @font-face. Ouvrez le fichier CSS de votre thème contenant les règles @font-face et ajoutez la propriété. Elle se place à l'intérieur du bloc @font-face aux côtés de font-family, src et font-weight.

Sachez que font-display: swap peut provoquer un Flash of Unstyled Text (FOUT) où le texte apparaît brièvement dans la police de repli avant de basculer vers la police web. C'est une bien meilleure expérience que du texte invisible, mais vous pouvez minimiser le décalage visuel en choisissant des polices de repli qui correspondent étroitement aux métriques de votre police web. Les propriétés CSS size-adjust, ascent-override et descent-override aident dans ce sens.

Auto-hébergement des polices vs chargement via CDN

L'auto-hébergement de vos polices plutôt que leur chargement depuis le CDN de Google offre plusieurs avantages significatifs pour les boutiques PrestaShop.

Les performances s'améliorent car vous éliminez la requête DNS supplémentaire et la connexion aux serveurs de Google. Vos polices se chargent depuis le même domaine que vos autres ressources, ce qui signifie que le navigateur peut réutiliser les connexions existantes. Avec HTTP/2 ou HTTP/3, tous vos fichiers de polices peuvent se télécharger simultanément via une seule connexion.

La conformité en matière de vie privée devient plus simple car les données des visiteurs ne sont plus envoyées à Google. Cela élimine entièrement une préoccupation liée au RGPD, et vous n'avez pas besoin d'ajouter Google Fonts à votre bandeau de consentement aux cookies.

La fiabilité s'améliore car vous ne dépendez pas d'un service externe. Si le CDN de Google a un problème (rare mais cela arrive), vos polices se chargent tout de même.

Pour auto-héberger les Google Fonts, utilisez l'outil google-webfonts-helper (gwfh.mranftl.com/fonts) qui fournit une interface simple pour télécharger n'importe quelle Google Font au format WOFF2 avec le CSS @font-face correct. Téléchargez uniquement les graisses et styles dont vous avez besoin, placez les fichiers dans le répertoire assets/fonts de votre thème et ajoutez le CSS @font-face à la feuille de style de votre thème.

Le seul inconvénient potentiel de l'auto-hébergement est la perte de la possibilité d'un cache hit si le visiteur a déjà chargé la même police depuis le CDN de Google sur un autre site. Cependant, les navigateurs ont largement éliminé ce cache inter-sites pour des raisons de confidentialité depuis 2020, donc cet avantage n'existe plus en pratique.

Le sous-ensemble de polices : l'option radicale

Le sous-ensemble de polices signifie la suppression des caractères dont vous n'avez pas besoin dans un fichier de police. Une police web latine typique inclut des caractères pour des dizaines de langues, dont beaucoup ne sont pas utilisées par votre boutique. En faisant un sous-ensemble limité aux seuls caractères dont votre boutique a besoin, vous pouvez réduire la taille des fichiers de polices de 50 à 70 %.

L'outil pyftsubset de la bibliothèque Python fonttools est la méthode la plus fiable pour créer des sous-ensembles de polices. Vous pouvez spécifier exactement quelles plages Unicode inclure. Pour une boutique qui opère uniquement en français, vous pourriez faire un sous-ensemble limité au Latin de base (U+0020-007F) plus le Supplément Latin-1 (U+00A0-00FF) pour les symboles de devises et les caractères accentués.

Pour les boutiques opérant dans plusieurs langues, vous devez être plus prudent. Incluez les plages Unicode pour toutes les langues que votre boutique prend en charge. Le CSS de Google Fonts fait en réalité cela automatiquement avec les descripteurs unicode-range, chargeant les sous-ensembles de caractères à la demande, mais les polices auto-hébergées nécessitent un sous-ensemble manuel.

Une approche plus simple consiste à utiliser exclusivement le format WOFF2 et à abandonner la prise en charge des formats plus anciens. WOFF2 utilise la compression Brotli et produit des fichiers 30 % plus petits que WOFF. Chaque navigateur moderne prend en charge WOFF2, donc à moins de devoir prendre en charge Internet Explorer 11, il n'y a aucune raison d'inclure les formats WOFF, TTF ou EOT. De nombreux thèmes PrestaShop sont encore livrés avec les quatre formats pour une rétrocompatibilité qui n'est plus nécessaire.

Les piles de polices système : l'alternative à coût zéro

La solution la plus radicale aux problèmes de performance des polices est de ne pas utiliser de polices web du tout. Les systèmes d'exploitation modernes sont livrés avec des polices de haute qualité qui s'affichent parfaitement à l'écran. Une pile de polices système utilise la police que le système d'exploitation fournit, ce qui signifie zéro fichier de police à télécharger et un rendu du texte instantané.

La pile de polices système moderne ressemble à ceci : font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Cela vous donne San Francisco sur les appareils Apple, Segoe UI sur Windows et Roboto sur Android. Ce sont toutes des polices sans-serif propres, modernes et très lisibles.

GitHub, Bootstrap 5 et de nombreux sites web haute performance utilisent des piles de polices système. La différence visuelle entre une police système et une Google Font comme Open Sans ou Roboto est minimale, surtout pour le corps du texte. La plupart de vos clients ne remarqueront pas ou ne se soucieront pas de savoir si votre boutique utilise Roboto chargée depuis un serveur ou Roboto déjà installée sur leur téléphone Android.

Pour implémenter une pile de polices système dans PrestaShop, vous devez modifier le CSS de votre thème pour remplacer les déclarations font-family existantes, supprimer les règles @font-face et les balises link Google Fonts, et supprimer les fichiers de polices du répertoire assets de votre thème. Si vous utilisez un thème enfant, vous pouvez surcharger les déclarations de polices du thème parent sans modifier les fichiers du thème parent.

Et les polices d'icônes ?

Si vous supprimez FontAwesome ou une autre police d'icônes, vous avez besoin d'une alternative pour afficher les icônes. La meilleure approche moderne est le SVG en ligne. Les icônes SVG s'affichent nettement à toute taille, peuvent être stylisées avec du CSS, et n'ajoutent du poids que pour les icônes spécifiques que vous utilisez plutôt que de charger une bibliothèque d'icônes entière.

Le thème Hummingbird de PrestaShop utilise nativement les icônes SVG, ce qui est l'une des raisons pour lesquelles il est plus performant que Classic. Si votre thème utilise FontAwesome, vous pouvez remplacer les icônes individuelles par des SVG provenant de sources comme Heroicons, Feather Icons, ou même les fichiers SVG propres à FontAwesome (qui sont disponibles séparément de la version police).

Pour une boutique PrestaShop, vous avez généralement besoin de moins de 30 icônes uniques : panier, recherche, compte utilisateur, cœur/liste de souhaits, flèches, logos de réseaux sociaux et quelques icônes spécifiques aux catégories. Sous forme de SVG en ligne, celles-ci pourraient totaliser 10 à 15 Ko, contre 150 à 200 Ko pour la police et le CSS complets de FontAwesome.

Mesurer l'impact

Après avoir supprimé les polices inutilisées, mesurez l'amélioration. Lancez Lighthouse avant et après, en comparant le score de Performance, le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP). L'optimisation des polices améliore généralement le FCP de 200 à 500 ms sur les connexions mobiles.

Vérifiez la taille totale de transfert dans l'onglet Réseau des DevTools. Une boutique PrestaShop bien optimisée devrait transférer moins de 50 Ko de données de polices au total. Si vous passez aux polices système, ce chiffre tombe à zéro.

Vérifiez également que votre boutique s'affiche toujours correctement. Vérifiez chaque type de page : page d'accueil, catégorie, produit, panier et commande. Certains thèmes utilisent des polices spécifiques pour des éléments spécifiques, et la suppression d'une police peut provoquer un rendu de repli inattendu. Testez toujours minutieusement avant de déployer les modifications de polices en production.

Résumé : une checklist de chargement des polices

Auditez votre chargement de polices actuel avec l'onglet Réseau des DevTools filtré sur les polices. Identifiez quelles polices sont réellement utilisées en vérifiant la couverture CSS. Supprimez toutes les familles ou graisses Google Fonts que vous n'utilisez pas. Remplacez les polices d'icônes complètes par des versions sous-ensemblées ou des SVG en ligne. Ajoutez font-display: swap à toutes les déclarations @font-face restantes. Auto-hébergez vos polices au lieu de les charger depuis le CDN de Google. Envisagez le WOFF2 uniquement pour éliminer les formats plus anciens et volumineux. Évaluez si les polices système pourraient remplacer vos polices web entièrement. Mesurez avant et après avec Lighthouse et WebPageTest. L'objectif est simple : ne charger que ce dont vous avez besoin, le charger efficacement, et ne jamais faire attendre vos visiteurs pour des polices qu'ils ne peuvent pas voir.