Problème posé lors d’un audit : un thème vitrine pour un cabinet d’architectes chargeait une police d’icônes complète de 200 glyphes, pesant environ 40 Ko une fois compressée, pour n’en afficher que trois différents sur l’ensemble du site : une flèche, une enveloppe et un téléphone. Le reste de la police ne servait strictement à rien, mais était tout de même téléchargé par chaque visiteur.
Ce schéma, hérité d’un thème premium générique adapté grossièrement, se retrouve sur une quantité impressionnante de sites WordPress. La correction proposée ici ne nécessite aucune extension : un sprite SVG inline suffit, avec un gain mesurable et une meilleure robustesse d’affichage.
Pourquoi une police d’icônes coûte plus cher qu’il n’y paraît
Une police d’icônes fonctionne comme n’importe quelle police web : le navigateur doit la télécharger entièrement avant de pouvoir afficher le moindre glyphe, sauf configuration avancée de sous-ensemble de caractères, rarement mise en place correctement sur un thème générique. Tant que la police n’est pas chargée, les icônes s’affichent soit vides, soit sous forme de rectangle, un phénomène proche du FOUT bien connu pour le texte.
À cela s’ajoute une requête réseau supplémentaire, avec son propre temps d’établissement de connexion si la police est hébergée sur un domaine tiers, ce qui était le cas ici via un CDN de police d’icônes externe.
Étape 1 : identifier les glyphes réellement utilisés
Une recherche dans les fichiers du thème sur le motif icon-, préfixe des classes CSS de la police utilisée, a permis de lister précisément les trois icônes réellement appelées dans les templates. Aucune extension tierce ni contenu généré par les utilisateurs n’appelait d’autres glyphes de cette police, ce qui simplifiait la suite.
Étape 2 : générer le sprite SVG
Les trois icônes ont été récupérées au format SVG individuel depuis une bibliothèque libre, puis assemblées en un unique fichier de sprite, chaque icône étant définie une fois dans un élément <symbol> avec un identifiant propre :
<svg style="display:none">
<symbol id="icon-fleche" viewBox="0 0 24 24">...</symbol>
<symbol id="icon-enveloppe" viewBox="0 0 24 24">...</symbol>
<symbol id="icon-telephone" viewBox="0 0 24 24">...</symbol>
</svg>Ce sprite est injecté une seule fois, directement dans le HTML juste après l’ouverture du body, via le hook wp_body_open introduit en WordPress 5.2 :
add_action( 'wp_body_open', function () {
echo file_get_contents( get_template_directory() . '/sprite-icones.svg' );
} );
Étape 3 : remplacer les appels dans les templates
Chaque occurrence de la police d’icônes dans les templates, du type <i class="icon-fleche"></i>, a été remplacée par une référence au sprite via l’élément <use>, sans dépendance à un fichier externe ni à une requête réseau supplémentaire :
<svg width="20" height="20"><use href="#icon-fleche"></use></svg>Un script de recherche-remplacement, limité aux trois classes concernées, a permis de traiter l’ensemble des fichiers du thème en quelques minutes, suivi d’une vérification visuelle complète du site sur les principaux gabarits de page.
Les gains mesurés
- Poids total transféré pour les icônes : passé de 40 Ko de police à un sprite SVG inline de moins de 3 Ko, inclus directement dans le HTML.
- Une requête réseau externe en moins, avec sa connexion TLS vers le CDN de police tierce supprimée.
- Disparition complète du flash d’icônes invisibles au chargement, les
<symbol>étant disponibles dès le premier rendu du HTML.
Ce que cette approche ne remplace pas
Cette méthode s’adresse à un petit nombre d’icônes fixes, connues à l’avance. Elle ne convient pas telle quelle à un site qui affiche un très grand nombre d’icônes différentes selon un contenu dynamique, où une bibliothèque de composants plus structurée peut rester pertinente. Elle ne traite pas non plus les icônes natives des blocs Gutenberg, gérées séparément par le cœur de WordPress.
Notre verdict
Trois icônes ne justifient jamais le chargement d’une police complète de 200 glyphes. Le sprite SVG inline est une solution simple, sans dépendance externe, qui élimine à la fois le poids superflu et le flash visuel au chargement, pour un temps de mise en œuvre de quelques heures sur un thème existant.
