La page est lente, et PageSpeed Insights pointe silencieusement dashicons.min.css, 30 Ko d’icônes qui ne sont rendues dans aucun élément visible. Vous n’avez ni installé ce fichier ni ne l’avez mis en file d’attente dans votre thème, et pourtant il se charge fidèlement pour chaque visiteur. D’où vient-il et comment s’en débarrasser?

WordPress livre dashicons en front office par défaut pour un seul usage précis: la barre d’administration destinée aux utilisateurs connectés. Un simple visiteur ne voit jamais cette barre, mais le navigateur télécharge consciencieusement le CSS, l’analyse, construit le CSSOM et se rend compte seulement à ce moment-là qu’aucune classe n’était nécessaire. Sur une connexion mobile lente, ces 30 Ko se traduisent par 300 à 400 ms de temps de chargement bloquant le rendu, de quoi pénaliser vos Core Web Vitals.

Voici trois façons de désactiver dashicons: d’un extrait de code manuel à une simple case à cocher dans un plugin d’optimisation. Toutes les méthodes sont sûres, réversibles et testées sur des installations WordPress réelles.

💡 Aperçu rapide:

• Ouvrez les DevTools ou PageSpeed Insights et confirmez que dashicons.min.css se charge effectivement sur votre site
• Choisissez l’approche adaptée à votre flux de travail: du code dans functions.php ou un plugin d’optimisation prêt à l’emploi
• Retestez les performances et vérifiez que le fichier a disparu du rapport
• Assurez-vous que la barre d’administration fonctionne toujours sans erreur pour les administrateurs

Que sont les dashicons et pourquoi se chargent-elles en front office

Les dashicons sont la police d’icônes intégrée de WordPress, introduite avec la version 3.8. Dans le panneau d’administration, elles sont partout: icônes des sections du menu, icônes des types de publication, boutons de la barre d’outils. Sans les dashicons, la zone d’administration se réduit à du texte brut, et WordPress ne peut pas les supprimer.

Le problème vient du mécanisme d’enregistrement. Le cœur enregistre les styles dashicons de manière globale et les ajoute à la file non seulement pour l’administration, mais aussi pour le front office, le tout pour un seul scénario: un utilisateur connecté visite le site et voit la barre d’administration noire avec ses icônes. Les visiteurs non connectés n’ont pas la barre d’administration, mais ils reçoivent tout de même le fichier CSS. Le navigateur l’analyse, découvre qu’aucun sélecteur n’a correspondu et jette le résultat, mais le temps a déjà été perdu.

PageSpeed Insights et GTmetrix signalent dashicons.min.css dans la recommandation «Supprimer le CSS inutilisé» et retirent des points. Un seul fichier de ce type peut sembler anodin. Mais quand les styles d’emoji de WordPress, le CSS de plugins inutilisés et des blocs de thème morts s’accumulent par-dessus, les économies combinées atteignent 150 à 300 Ko. Pour la performance mobile, cela compte.

Comment vérifier si les dashicons se chargent sur votre site

Avant de désactiver quoi que ce soit, confirmez que le problème existe. Trois méthodes, chacune en moins d’une minute.

Chrome DevTools. Ouvrez le site en navigation privée (pour que la barre d’administration n’influence pas le test), appuyez sur F12, allez dans l’onglet Network et tapez dashicons dans le champ de filtre. Si vous voyez un fichier avec le statut 200 et une taille d’environ 30 Ko, il se charge pour chaque visiteur.

PageSpeed Insights. Collez l’URL dans pagespeed.web.dev et lancez le test. Développez la recommandation «Supprimer le CSS inutilisé»; dashicons.min.css y sera listé avec sa taille et les économies potentielles en kilo-octets.

GTmetrix. Allez dans l’onglet Waterfall et filtrez par dashicons. Même si le fichier dans la chaîne de chargement est marqué «Low» ou «Lowest», il bloque quand même le rendu et plombe votre score.

Aucune de ces méthodes n’a montré le fichier? Votre thème ou un plugin d’optimisation a déjà désactivé les dashicons, et vous pouvez fermer cet article. Vous l’avez trouvé? Passons à la suite.

Méthode 1: désactiver via du code dans functions.php

L’approche la plus légère et la plus transparente: un simple extrait dans le functions.php de votre thème actif. Le code désenregistre dashicons pour tous les visiteurs sans privilèges d’administrateur. Pour ceux qui administrent le site, on les laisse tranquilles, et la barre d’administration dans le tableau de bord reste intacte.

Ajoutez ce code au functions.php d’un thème enfant ou via le plugin Code Snippets (plus sûr, car il survit aux changements de thème):

1
/**
2
 * Disable dashicons.min.css on the frontend for everyone,
3
 * except users with administrator rights.
4
 */
5
function sdstudio_disable_dashicons_frontend() {
6
    if ( current_user_can( 'update_core' ) ) {
7
        return;
8
    }
9
    wp_deregister_style( 'dashicons' );
10
}
11
add_action( 'wp_enqueue_scripts', 'sdstudio_disable_dashicons_frontend' );

Le hook wp_enqueue_scripts se déclenche quand la file de styles est assemblée en front office. current_user_can('update_core') vérifie la capacité à mettre à jour le cœur, qui par défaut n’appartient qu’aux administrateurs. Pour les visiteurs classiques, la vérification échoue et wp_deregister_style('dashicons') retire complètement le fichier de la file.

Pourquoi deregister plutôt que dequeue? wp_dequeue_style retire le style de la file mais le laisse enregistré; un autre plugin pourrait réintroduire les dashicons dans la sortie. wp_deregister_style supprime complètement l’enregistrement, et la seule façon de faire revenir le fichier est un appel explicite à wp_register_style. Pour les dashicons, c’est le bon choix: vous ne voulez pas qu’un plugin de partage social ou de galerie les restaure accidentellement en front office.

Précautions. Une erreur dans functions.php peut provoquer un écran blanc. Avant de modifier, copiez le fichier en functions.php.bak pour un retour arrière rapide. Utilisez un thème enfant ou Code Snippets. Vérifiez la syntaxe: chaque accolade et point-virgule à sa place.

Méthode 2: plugins d’optimisation (une case à cocher au lieu de code)

Si vous préférez ne pas toucher au PHP, les plugins de performance résolvent le même problème.

Perfmatters. Sous General → Options, vous trouverez une bascule «Disable Dashicons». Un clic et le fichier disparaît du front office. Perfmatters exclut également les dashicons du CSS utilisé lorsque l’option Remove Unused CSS est active, le problème est donc couvert deux fois. Le plugin est payant, mais il traite des dizaines d’autres goulets d’étranglement de performance, de la désactivation des styles d’emoji au contrôle de l’API heartbeat.

WP Rocket. Sous File Optimization → Optimize CSS Delivery, activez «Remove Unused CSS». WP Rocket analysera vos pages et supprimera les styles inutilisés, y compris dashicons.min.css. Cela fonctionne automatiquement sur l’ensemble du site. Si Remove Unused CSS entre en conflit avec une autre optimisation, ajoutez dashicons.min.css à la liste d’exclusion; WP Rocket différera son chargement au lieu de le supprimer entièrement.

Asset CleanUp (gratuit). Le plugin Asset CleanUp vous permet de désactiver sélectivement le CSS et le JS au niveau de pages individuelles et de types de contenu. Allez dans CSS/JS Manager, trouvez dashicons.min.css et déchargez-le sur l’ensemble du site. La version gratuite gère le nettoyage de base.

Quelle méthode choisir? Si vous utilisez déjà Perfmatters ou WP Rocket, utilisez la fonction intégrée; n’ajoutez pas de code supplémentaire dans functions.php. Si votre site fonctionne avec un ensemble minimal de plugins et que vous êtes à l’aise avec PHP, l’extrait de la méthode 1 est plus léger et n’ajoute aucune dépendance.

Vérifier le résultat

Après avoir désactivé les dashicons, ouvrez le site en navigation privée et répétez la vérification de la section deux. Le fichier dashicons.min.css doit avoir disparu de la liste des ressources chargées dans les DevTools. Lancez un nouveau test PageSpeed Insights; la métrique «Supprimer le CSS inutilisé» baissera et les économies potentielles de trafic augmenteront de ces 30 Ko.

Le gain réel en points dépend de votre stack. Sur des sites légers avec seulement un ou deux problèmes de CSS, désactiver les dashicons ajoute 1 à 3 points au score PageSpeed mobile. Sur des sites gonflés avec des dizaines de styles inutilisés, c’est une goutte d’eau dans l’océan, mais une goutte utile: chaque kilo-octet compte, et ces «gouttes» finissent par produire un résultat visible.

Pensez à vérifier la barre d’administration: connectez-vous en tant qu’administrateur et confirmez que la barre noire en haut s’affiche normalement et que ses icônes sont en place. Le code de la méthode 1 et la bascule dans Perfmatters laissent les dashicons intactes pour les administrateurs, vous ne remarquerez donc aucune différence.

⁉️🤔 Foire aux questions

La désactivation des dashicons affectera-t-elle l’apparence du site?

Si votre thème utilise les dashicons pour les icônes du front office (flèches de slider, boutons de fermeture, menu hamburger), les désactiver cassera ces éléments. Le test est simple: désactivez le fichier et parcourez les pages. Si les icônes disparaissent, le thème dépend des dashicons. Dans ce cas, utilisez une mise en cache agressive via Cloudflare ou un plugin de cache: 30 Ko servis depuis le cache du navigateur ne sont pas critiques.

Cette méthode fonctionne-t-elle avec les thèmes bloc (FSE)?

Dans les thèmes bloc comme Twenty Twenty-Four, Ollie et similaires, les dashicons ne se chargent généralement pas en front office. L’éditeur de blocs utilise ses propres icônes SVG et le cœur ne met pas la police d’icônes en file pour les visiteurs. Vérifiez via les DevTools: il y a de fortes chances que le fichier ne soit pas là. Si vous le trouvez, le code de la méthode 1 fonctionne de la même manière pour les thèmes classiques et les thèmes bloc.

Puis-je désactiver les dashicons seulement sur certaines pages?

Oui, en utilisant les balises conditionnelles de WordPress. Par exemple, pour conserver les dashicons uniquement sur la page d’accueil:

1
function sdstudio_conditional_dashicons() {
2
    if ( is_front_page() ) {
3
        return;
4
    }
5
    if ( current_user_can( 'update_core' ) ) {
6
        return;
7
    }
8
    wp_deregister_style( 'dashicons' );
9
}
10
add_action( 'wp_enqueue_scripts', 'sdstudio_conditional_dashicons' );

Toutes les balises conditionnelles disponibles sont décrites dans la documentation WordPress. Elles incluent is_single pour les articles individuels, is_page pour les pages, is_archive pour les archives et is_home pour l’index du blog.

J’ai déjà un plugin de cache qui accélère le site. Dois-je quand même désactiver les dashicons?

Un plugin de cache accélère les visites répétées, mais la première visite à froid tire toujours dashicons.min.css. PageSpeed Insights émule un cache vide à chaque test, le fichier apparaîtra donc dans le rapport indépendamment de la mise en cache côté serveur. Désactiver les dashicons réduit les données transférées à la source; les métriques comme les visiteurs réels lors de leur première visite en bénéficient.

Désactiver les dashicons suffit-il pour un bon score PageSpeed?

Non, ce n’est qu’une étape parmi des dizaines. Les gains les plus importants viennent généralement de l’optimisation des images (compression, formats modernes, lazy loading), du chargement différé du JavaScript et de la mise en cache côté serveur. Considérez la désactivation des dashicons comme une hygiène de base: rapide, sûre, avec un effet mesurable. C’est un point de départ pratique pour nettoyer le front office.

Quelle méthode choisir selon votre situation

Un résumé rapide des trois méthodes et des scénarios spécifiques.

Si vous travaillez avec le code et que votre site fonctionne sur une stack légère, prenez l’extrait de la méthode 1. Deux minutes pour le coller dans functions.php ou Code Snippets, et le problème est réglé pour de bon. Pas de plugin supplémentaire, pas de charge additionnelle sur l’administration.

Si vous payez déjà pour Perfmatters ou WP Rocket, activez l’option intégrée et ne créez pas d’entités superflues. Ces plugins résolvent une dizaine d’autres problèmes de performance à la fois, et du code supplémentaire dans le thème ne fait que compliquer la maintenance.

Si vous avez besoin d’un outil gratuit sans toucher au PHP, Asset CleanUp gère la tâche en deux clics. Il convient aux débutants et à ceux qui préfèrent ne pas risquer de casser functions.php.

Le principe général: les dashicons ne rendent pas un site lent à elles seules. Mais elles font partie du bruit de fond qui, combiné aux styles de plugins inutilisés, aux polices lourdes et aux images non optimisées, encombre le canal et ralentit le rendu. Supprimer les dashicons est une victoire rapide et un point de départ pratique pour une optimisation systématique.

Vous les avez désactivées? Laissez un commentaire et partagez combien de points PageSpeed vous avez gagnés. Si vous connaissez une autre méthode non couverte dans cet article, partagez-la également.