<link rel="preconnect" href="https://fonts.googleapis.com"> suivi de six lignes <link> différentes vers fonts.googleapis.com : c’est ce que l’onglet réseau du navigateur affichait au chargement d’un site vitrine construit sur un thème premium générique. Douze graisses et styles de deux familles de polices, alors que la page n’en affiche visuellement que deux : une regular pour le corps de texte, une semi-bold pour les titres.
Ce genre de thème est conçu pour plaire à un maximum d’acheteurs sur une place de marché : il propose donc toutes les combinaisons possibles dans son panneau d’options, et charge chaque variante par précaution, y compris celles jamais activées côté client. Le résultat se paie en requêtes réseau et en temps de rendu, sans bénéfice visuel.
Ce qu’on observe dans le thème
Dans le fichier de configuration du thème, chaque case à cocher du panneau « Typographie » du Customizer correspondait à un appel indépendant à wp_enqueue_style, sans condition sur ce qui était réellement sélectionné dans les réglages. Les feuilles de style Google Fonts étaient donc chargées en bloc, à chaque page, indépendamment du choix effectif de l’utilisateur dans le panneau d’administration.
Autre symptôme classique : plusieurs balises <link rel="preconnect"> pointant vers le même domaine, ajoutées par différents modules du thème sans coordination entre eux. Chacune déclenche une tentative de connexion anticipée, ce qui n’apporte rien de plus après la première occurrence et consomme du temps de traitement au démarrage de la page.
Pourquoi c’est un problème
Chaque famille de police Google Fonts chargée via une feuille de style externe déclenche une requête vers le domaine de Google, puis une seconde requête vers le fichier de police lui-même une fois la feuille de style interprétée. Multiplié par douze variantes, cela représente autant de connexions TLS, de résolutions DNS et de téléchargements qui retardent l’affichage du texte, en particulier sur une connexion mobile modeste.
Sur le site audité, le poids cumulé des fichiers de police téléchargés — dont la grande majorité jamais utilisée dans le rendu final — atteignait 640 Ko avant même l’apparition du premier caractère de texte. Le score de performance en pâtissait directement sur l’indicateur de temps jusqu’au premier affichage de contenu.
Quoi faire : ne garder que l’essentiel
- Ouvrir l’inspecteur du navigateur sur les pages types du site et relever les familles et graisses réellement rendues dans les styles calculés
- Retirer du
functions.phples appels àwp_enqueue_styleconditionnés à des options du Customizer jamais activées - Supprimer les balises
preconnectredondantes pour ne garder qu’une seule occurrence par domaine externe - Télécharger les deux familles restantes et les servir localement via un dossier
fontsdu thème enfant
Pour l’auto-hébergement, une règle @font-face déclarée dans la feuille de style du thème enfant, avec un chemin relatif vers le fichier .woff2, suffit. Cela supprime la dépendance à un domaine tiers et permet d’appliquer font-display: swap précisément, sans dépendre du comportement par défaut de Google Fonts.
Vérifier la charte graphique après coup
- Comparer les captures d’écran avant et après sur les pages les plus visitées
- Vérifier les graisses utilisées dans les boutons et les citations, souvent oubliées lors du premier passage
- Contrôler le rendu sur Safari, plus sensible aux polices variables mal déclarées
Un thème générique charge pour plaire à tout le monde. Un site en production ne devrait jamais payer le prix des options que personne n’a activées.
En résumé
Ce genre de gaspillage ne se voit pas à l’œil nu tant que la connexion est bonne, ce qui explique qu’il reste souvent en place des années. Un simple passage par l’onglet réseau du navigateur, comparé aux styles réellement calculés sur la page, suffit à repérer l’écart entre ce qui est chargé et ce qui est affiché. Sur ce projet, retirer dix des douze variantes chargées a réduit le poids des polices de plus de 80 % sans que la charte graphique du client n’en souffre le moins du monde.
