Vous connaissez cette sensation: votre site WordPress est prêt, le design est en place, tous les plugins sont installés. Vous lancez PageSpeed Insights, et voilà le résultat, orange. Ou rouge. Le coupable est presque toujours le même: le CSS. Des dizaines de fichiers de styles provenant des plugins et du thème s’alignent dans une file d’attente et bloquent le rendu. La page n’est pas lente parce qu’elle est lourde, mais parce que le navigateur attend.

Le problème est plus profond qu’il n’y paraît. Un plugin charge son style.css sur chaque page du site, même là où sa fonctionnalité n’est pas utilisée. Un formulaire de contact n’apparaît que sur la page de contact, et pourtant ses styles se chargent partout. Un slider est présent sur la page d’accueil, mais ses quatre fichiers CSS pèsent sur chaque URL sans exception. Cela représente des dizaines de kilo-octets et de requêtes superflues à chaque affichage de page.

Vous pouvez désactiver les styles inutiles sans installer de plugins supplémentaires, via functions.php. Ce n’est pas une bidouille, c’est un mécanisme natif de WordPress qui fonctionne depuis la version 2.6. Voici le guide complet: de la recherche de l’identifiant jusqu’au chargement asynchrone d’un fichier combiné.

💡 Aperçu rapide:

• Comment trouver l’identifiant (handle) de tout fichier CSS de plugin via l’attribut id dans le code source de la page
• Comment désactiver les styles en utilisant la combinaison wp_dequeue_style + wp_deregister_style avec la priorité correcte
• Comment regrouper les styles désactivés dans un seul fichier et le charger de manière asynchrone via media print, sans perte de mise en forme et sans bloquer le rendu

Comment trouver l’identifiant du fichier CSS d’un plugin

WordPress attribue un identifiant unique, un handle, à chaque fichier de style mis en file d’attente. C’est ce handle qu’attendent les fonctions wp_dequeue_style (documentation) et wp_deregister_style (codex). Sans le bon handle, rien n’est désactivé.

La méthode la plus fiable consiste à examiner le code source HTML de la page. Deviner à partir du nom du plugin ne fonctionne pas: le développeur du plugin nomme le handle comme il le souhaite, et la logique peut être contre-intuitive.

Ouvrez le code source de la page (Ctrl+U ou view-source: avant l’URL) et cherchez la balise <link> qui charge le CSS du plugin qui vous intéresse. Par exemple, pour Elementor, cela ressemble à ceci:

1
<link href="/wp-content/plugins/elementor/assets/lib/animations/animations.min.css"
2
      id="elementor-animations-css" media="all" rel="stylesheet" type="text/css">

Regardez l’attribut id. WordPress le construit selon le modèle: **handle du plugin + le suffixe **-css. Dans l’exemple ci-dessus, id="elementor-animations-css", ce qui signifie que le handle est elementor-animations. Retirez -css de la fin de la valeur de l’id, et vous obtenez le handle exact pour la désactivation. Cela fonctionne pour n’importe quel plugin ou thème.

Il arrive que le développeur n’inclue pas du tout d’id sur la balise <link>. Dans ce cas, cherchez les éléments voisins qui possèdent un id ou vérifiez les balises <script> du même plugin: les scripts utilisent le suffixe -js, et le handle correspond souvent à celui du style. Si vous ne le trouvez toujours pas, ouvrez le code source du plugin dans /wp-content/plugins/... et cherchez l’appel à wp_enqueue_style(): le premier argument est le handle.

Désactiver les styles: wp_dequeue_style et wp_deregister_style

WordPress fournit deux fonctions pour gérer les styles. La différence est fondamentale:

En pratique, les deux fonctions sont utilisées ensemble: wp_dequeue_style le retire de la file d’attente, puis wp_deregister_style dans le codex garantit qu’aucun autre code ne remette ce handle en file d’attente via la chaîne de dépendances.

Code de base pour functions.php

Le code ci-dessous désactive les styles de deux plugins: full-screen-search et prettyPhoto. La priorité élevée 9999 garantit que la désactivation s’exécute APRÈS que le plugin a enregistré et mis en file d’attente ses styles. Sans cette priorité élevée, la fonction peut s’exécuter avant le plugin, et il n’y aura alors rien à désactiver.

1
/**
2
 * Disable CSS files of specific plugins.
3
 * Priority 9999 — runs last in the wp_enqueue_scripts chain.
4
 */
5
function sdstudio_dequeue_plugin_styles() {
6
    // Dequeue
7
    wp_dequeue_style( 'full-screen-search' );
8
    wp_dequeue_style( 'prettyPhoto' );
9
 
10
    // Deregister — so no one can re-enqueue
11
    wp_deregister_style( 'full-screen-search' );
12
    wp_deregister_style( 'prettyPhoto' );
13
}
14
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_plugin_styles', 9999 );

Ce qui importe ici: le hook wp_enqueue_scripts est le bon endroit pour cette opération. Ni wp_head, ni init, ni wp_loaded. C'est sur wp_enqueue_scripts que WordPress assemble la file d'attente des styles, et c'est là que vous devez les désactiver, simplement un peu plus tard que les plugins.

Pourquoi une priorité de 9999, et non 11 ou 99

Les plugins enregistrent les styles avec la priorité par défaut de 10. Mais certains utilisent 20, 50, voire 100 lorsqu'ils ont des chaînes de dépendances complexes. Une priorité de 9999 couvre pratiquement tous les scénarios réels. Le seul inconvénient: si deux de vos propres snippets partagent la même priorité de 9999, leur ordre d'exécution est indéfini. En pratique, cela reste rare, tandis qu'utiliser 11 échoue régulièrement avec les plugins «tenaces».

De plus, vous pouvez enregistrer la désactivation sur le hook wp_head avec la même priorité, comme filet de sécurité pour les styles qu'un plugin met en file d'attente en contournant wp_enqueue_scripts et en les injectant directement dans le <head>:

1
add_action( 'wp_head', 'sdstudio_dequeue_plugin_styles', 9999 );

Mais il s'agit d'une solution de repli. Normalement, un seul wp_enqueue_scripts suffit.

Comment désactiver TOUS les styles d'un plugin spécifique

De nombreux plugins n'ont pas un seul fichier CSS, mais plusieurs. Contact Form 7, WooCommerce, Elementor, chacun embarque 3 à 5 fichiers de styles. Les désactiver un par un est fastidieux. Inspectez le code source de la page et collectez tous les identifiants ayant le même préfixe: ils sont généralement regroupés.

Exemple pour Elementor, un ensemble typique d'identifiants: elementor-frontend, elementor-animations, elementor-icons et elementor-pro. Les quatre en un seul appel:

1
function sdstudio_dequeue_elementor_styles() {
2
    $handles = [
3
        'elementor-frontend',
4
        'elementor-animations',
5
        'elementor-icons',
6
        'elementor-pro',
7
    ];
8
    foreach ( $handles as $handle ) {
9
        wp_dequeue_style( $handle );
10
        wp_deregister_style( $handle );
11
    }
12
}
13
add_action( 'wp_enqueue_scripts', 'sdstudio_dequeue_elementor_styles', 9999 );

Que faire des styles désactivés

La désactivation n'est que la moitié du travail. Si vous supprimez simplement le CSS d'un plugin, tout se casse sur la page: les formulaires se décalent, les sliders se désagrègent, les icônes disparaissent. Les styles sont nécessaires, mais pas au prix de bloquer le rendu.

La bonne approche: regrouper les styles désactivés dans UN seul fichier compact et le charger sans blocage. L'algorithme:

• Styles des plugins désactivés via wp_dequeue_style + wp_deregister_style.
• Copie du contenu de CHAQUE fichier CSS désactivé. Prenez-les dans le dossier du plugin, pas depuis l'inspecteur du navigateur, qui montre une version minifiée peu pratique à manipuler.
• Regroupement dans un fichier unique, par exemple /wp-content/themes/your-theme/css/dequeued-plugins.css.
• Chargement avec l'attribut media="print" et onload="this.media='all'". Le navigateur télécharge le fichier de manière asynchrone sans bloquer le rendu et applique les styles une fois le chargement terminé.

Code de chargement du fichier combiné

1
/**
2
 * Load the combined CSS file of disabled styles asynchronously.
3
 */
4
function sdstudio_enqueue_dequeued_styles() {
5
    wp_enqueue_style(
6
        'sdstudio-dequeued',
7
        get_stylesheet_directory_uri() . '/css/dequeued-plugins.css',
8
        [],
9
        filemtime( get_stylesheet_directory() . '/css/dequeued-plugins.css' )
10
    );
11
}
12
add_action( 'wp_enqueue_scripts', 'sdstudio_enqueue_dequeued_styles', 1 );

La priorité de 1 est ici intentionnelle: le fichier combiné doit être mis en file d'attente AVANT que les fonctions de désactivation avec la priorité 9999 ne s'exécutent. Sinon, WordPress risque de ne pas reconnaître la dépendance et de retirer complètement les styles de la file d'attente.

Chargement asynchrone sans plugin

Pour empêcher le navigateur d'attendre le fichier CSS avant d'afficher la page, ajoutez les attributs media="print" et onload via le filtre style_loader_tag:

1
/**
2
 * Change media="print" to onload-switch for asynchronous CSS loading.
3
 */
4
function sdstudio_async_css( $html, $handle ) {
5
    if ( 'sdstudio-dequeued' !== $handle ) {
6
        return $html;
7
    }
8
    return str_replace(
9
        "media='all'",
10
        "media='print' onload=\"this.media='all'; this.onload=null;\"",
11
        $html
12
    );
13
}
14
add_filter( 'style_loader_tag', 'sdstudio_async_css', 10, 2 );

Le mécanisme est simple: le navigateur voit media="print" et ne bloque pas le rendu, car le type de média print n'affecte pas l'écran. Une fois le fichier chargé, onload se déclenche, bascule media sur all, et les styles sont appliqués instantanément. L'utilisateur voit une page entièrement stylée sans aucun délai lors du chargement initial.

Quand vous ne devez pas désactiver les styles via functions.php

La méthode wp_dequeue_style est puissante, mais pas universelle. Voici trois cas où elle est soit inutile, soit nuisible:

• Les styles sont intégrés en ligne via wp_add_inline_style. Ces styles se trouvent dans une balise <style> et n'ont pas de handle distinct. Vous devrez les désactiver via wp_deregister_script du script parent ou trouver le hook que le plugin utilise pour ajouter des styles en ligne.

• Le plugin insère du CSS directement dans <head> via echo. C'est une astuce utilisée par certains plugins plus anciens. Seule la recherche du hook spécifique ou, en dernier recours, la mise en mémoire tampon de la sortie vous aidera ici.

• Vous travaillez avec un thème tiers qui gère ses dépendances de manière autonome. Certains thèmes, notamment premium, utilisent leur propre chargeur d'assets qui contourne WP_Styles. Avant d'écrire du code, vérifiez le header.php du thème: si vous voyez un echo '<link...' direct, le système de désenregistrement ne fonctionnera pas.

Dans ces cas, il est préférable d'utiliser des plugins spécialisés comme Asset CleanUp ou Perfmatters, qui fonctionnent au niveau de l'URL et désactivent les assets page par page sans avoir à fouiller dans les hooks.

Regardez le guide vidéo sur la désactivation des styles: tout le processus, de la recherche du handle à la vérification du résultat, en 8 minutes.

⁉️🤔 Foire aux questions

Dois-je désactiver les styles CSS dans le panneau d'administration (*/wp-admin/*)?

Non. Les styles chargés via le hook admin_enqueue_scripts n'affectent pas le frontend et n'ont pas besoin d'être désactivés. De plus, essayer de désenregistrer les styles d'administration via wp_enqueue_scripts ne fera rien, car ils sont enregistrés séparément. Si le panneau d'administration est lent, le problème vient généralement d'ailleurs: des scripts d'analyse lourds dans le tableau de bord, des Google Fonts externes ou l'API Heartbeat.

Est-il sûr* de supprimer -css de l'attribut id pour obtenir le handle? Cette règle fonctionne-t-elle toujours?*

Oui, le suffixe -css est ajouté par le cœur de WordPress dans la méthode WP_Dependencies::enqueue() depuis la version 2.6; c'est un mécanisme immuable. Mais il y a une nuance: si le développeur du plugin a attribué manuellement un id personnalisé à la balise <link>, le suffixe peut ne pas être présent. Dans ce cas, le handle est le deuxième argument de l'appel wp_enqueue_style() dans le code source du plugin. La règle du -css couvre la grande majorité des cas.

Puis-je désactiver les styles uniquement sur des pages spécifiques?

Oui, et c'est la bonne approche en production. Enveloppez l'appel wp_dequeue_style dans une balise conditionnelle WordPress: is_front_page() pour la page d'accueil, is_single() pour les articles, is_page() pour les pages, is_archive() pour les archives. Pour exclure par ID d'article, utilisez ! is_single(123). La désactivation conditionnelle sur des URL spécifiques réduit la charge sur l'ensemble du site, pas seulement là où le plugin n'est pas nécessaire.

Que se passe-t-il si j'appelle wp_dequeue_style pour un handle qui n'est pas enregistré?

Rien. La fonction se termine silencieusement sans erreurs, ni notices PHP, ni avertissements. C'est sans risque. Mais ne comptez pas là-dessus comme stratégie: collectez les handles uniquement à partir de pages réelles, sinon votre code accumule des lignes «mortes» qui ne font rien et ne font qu'encombrer functions.php.

Comment vérifier qu'un style a bien été désactivé, et pas seulement qu'il a cessé de s'appliquer à cause du cache?

Ouvrez le code source de la page (Ctrl+U), pas le panneau développeur. Cherchez une balise <link> avec le handle du plugin ou son id. Si la balise a disparu, le style est désactivé. Le cache du navigateur n'affecte pas le code source, contrairement à l'onglet Réseau des DevTools. De plus, vous pouvez vider le cache WordPress: n'importe quel plugin de cache, puis Purge All.

Points clés sur la désactivation du CSS dans WordPress

Trois conclusions principales de ce guide complet:

• Le handle est la clé de tout. Sans l'identifiant correct, aucune fonction ne fonctionnera. Trouvez toujours le handle via l'attribut id dans le code source de la page. La règle de suppression du -css fonctionne presque à chaque fois; pour les exceptions, vérifiez le code source du plugin.

• Dequeue + Deregister est la combinaison standard. La première fonction retire le style de la file d'attente, la seconde garantit qu'il ne réapparaît pas via la chaîne de dépendances. La priorité 9999 couvre tous les plugins «tenaces», et le hook wp_enqueue_scripts est le seul endroit correct pour cette opération.

• Les styles désactivés ne doivent pas disparaître. Combinez-les en un seul fichier et chargez-le de manière asynchrone via media="print" + onload. L'utilisateur obtient une page entièrement stylisée, et le navigateur n'attend pas le CSS avant de procéder au rendu.

Essayez dès aujourd'hui sur un ou deux plugins. Quelques minutes dans functions.php, et le résultat est immédiatement visible dans PageSpeed Insights. Commencez par le plugin le plus «lourd», celui qui a le plus de fichiers CSS: désactivez, combinez, mesurez la vitesse. Très probablement, cela suffira à lui seul pour passer de la zone orange à la zone verte.