Comment supprimer le CSS inutilisé dans WordPress (la bonne méthode)

Un site web lent est frustrant pour les visiteurs et mauvais pour votre entreprise. Lorsque les pages mettent trop de temps à se charger, les utilisateurs partent et votre classement dans les moteurs de recherche chute.

Souvent, le problème caché est du code CSS inutilisé qui encombre votre thème et vos plugins. Ce code supplémentaire alourdit vos pages sans rien faire d'utile.

Nous avons optimisé des centaines de sites WordPress pour la vitesse et constaté que le nettoyage de ce code fait une énorme différence. Cela aide votre site à réussir les tests Core Web Vitals et améliore l'expérience utilisateur.

Dans ce guide, nous vous montrerons comment supprimer le CSS inutilisé dans WordPress pour rendre votre site plus rapide.

Qu'est-ce que le CSS inutilisé dans WordPress ?

Le CSS inutilisé dans WordPress fait référence au code CSS qui est chargé sur vos pages web mais qui n'est pas réellement utilisé pour styliser quoi que ce soit de visible sur ces pages spécifiques.

Ce code supplémentaire oblige les navigateurs des visiteurs à télécharger et à traiter des fichiers inutiles, ce qui ralentit le temps de chargement de vos pages. Même quelques secondes supplémentaires peuvent nuire à votre expérience utilisateur et à votre classement dans les moteurs de recherche, vous coûtant potentiellement des visiteurs et des conversions.

Vous pouvez facilement vérifier si le CSS inutilisé affecte votre site en le passant dans Google Pagespeed Insights. Recherchez l'avertissement « Supprimer le CSS inutilisé » dans vos résultats. Il vous indiquera exactement quels fichiers ralentissent les choses.

Pourquoi WordPress charge-t-il du CSS inutilisé ?

Voici le truc : WordPress n'a pas été conçu pour être sélectif quant au CSS qu'il charge. Votre thème WordPress est livré avec une feuille de style principale (généralement appelée style.css) qui contient des règles de style pour chaque élément possible, même ceux que vous n'utiliserez peut-être jamais.

Mais votre thème n'est que le début. Chaque plugin que vous installez ajoute ses propres fichiers CSS au mélange. WooCommerce charge le style de la boutique sur chaque page (même vos articles de blog), les constructeurs de pages chargent leur CSS globalement, et les plugins de formulaire de contact chargent les styles de formulaire sur les pages sans formulaires.

Ajoutez à cela les polices personnalisées, les bibliothèques d'icônes et d'autres éléments de conception, et vous vous retrouvez avec beaucoup de superflu en CSS. Bien que chaque fichier individuel puisse être petit, ils s'accumulent rapidement et affectent la vitesse de votre site.

Comment supprimer le CSS inutilisé dans WordPress

Passons aux bonnes nouvelles : il existe plusieurs façons efficaces de nettoyer le CSS inutilisé sur votre site WordPress. Nous avons testé plusieurs approches et trouvé des méthodes qui fonctionnent de manière fiable sans casser votre site.

Voici ce que vous devez savoir dès le départ : éliminer complètement 100 % du CSS inutilisé est presque impossible en raison de la façon dont WordPress charge dynamiquement le contenu. Une partie du CSS doit rester prête pour les éléments interactifs, le contenu conditionnel et les différents types de pages.

Mais ne vous inquiétez pas, vous n'avez pas besoin de la perfection pour constater des améliorations majeures. Même supprimer 50 à 70 % du CSS inutilisé peut considérablement accélérer votre site.

Nous allons vous montrer deux méthodes éprouvées qui trouvent le bon équilibre entre les gains de performance et la stabilité du site, afin que vous puissiez choisir l'approche qui convient à votre niveau de confort.

1. Supprimer le CSS inutilisé dans WordPress avec WP Rocket
2. Supprimer le CSS inutilisé dans WordPress avec Asset CleanUp
3. Questions fréquemment posées sur le CSS inutilisé
4. Ressources supplémentaires pour améliorer les performances de WordPress

Méthode 1 : Supprimer le CSS inutilisé dans WordPress avec WP Rocket

Cette méthode est plus facile et est recommandée pour les débutants. Elle améliore considérablement la livraison globale des fichiers CSS sur votre site WordPress, y compris la suppression de la plupart du CSS inutilisé.

Nous pensons que c'est la meilleure solution pour les débutants car elle est plus facile et atteint l'objectif principal de fournir une meilleure expérience à vos utilisateurs. Cela signifie que votre site Web se charge rapidement sur les outils de test de vitesse et semble également rapide pour vos utilisateurs.

Tout d'abord, vous devez installer et activer le plugin WP Rocket. C'est un plugin premium, mais c'est le moyen le plus simple d'accomplir la tâche sans connaissances techniques. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page Paramètres » WP Rocket et passer à l'onglet « Optimisation des fichiers ».

Ensuite, vous devez faire défiler jusqu'à la section Fichiers CSS, puis cocher la case à côté de l'option « Supprimer le CSS inutilisé ».

Une fois que vous avez coché la case, vous pourriez voir un message de confirmation. Vous pouvez cliquer sur le bouton « Activer la suppression du CSS inutilisé ».

Une fois l'option activée, vous verrez une boîte « Liste blanche CSS ». Cela vous permet de spécifier les noms de fichiers CSS, les ID ou les classes qui ne doivent pas être supprimés. Vous n'avez besoin de l'utiliser que si vous remarquez que certaines parties de votre site semblent cassées après avoir activé le paramètre.

Entrez-les simplement dans la zone.

Ensuite, vous devrez enregistrer vos modifications en faisant défiler vers le bas et en cliquant sur le bouton « Enregistrer les modifications ».

Lorsque vous le faites, WP Rocket commencera à traiter vos fichiers CSS et vous affichera une barre de progression.

Il faudra quelques minutes au plugin pour traiter et supprimer les fichiers CSS inutilisés de votre site Web.

Vous verrez un message « La suppression du CSS inutilisé est terminée ! » lorsque le plugin aura terminé le processus.

Maintenant, visitez l'outil Google Pagespeed Insights et testez les performances de votre site.

Alternative : Optimiser la livraison du CSS (méthode de secours)

Si la méthode « Supprimer le CSS inutilisé » ci-dessus fonctionne pour votre site, vous n'avez pas besoin de suivre cette étape. Elle gère déjà le CSS bloquant le rendu pour vous.

Cependant, si la méthode précédente a cassé la mise en page de votre site et que vous avez dû la désactiver, vous pouvez utiliser l'option « Optimiser la livraison du CSS » comme alternative.

Pour ce faire, cochez simplement la case à côté de l'option « Optimiser la livraison du CSS » dans la section Fichiers CSS.

Cette option génère un fichier CSS qui ne contient que le code CSS nécessaire pour afficher la partie visible de votre site web. Il charge ce fichier en premier, affiche la page à vos visiteurs, puis charge d'autres fichiers CSS à l'aide d'une technologie appelée chargement différé.

En supprimant ce CSS bloquant le rendu, votre site web devient consultable par les utilisateurs beaucoup plus rapidement que si vous deviez charger tous les fichiers CSS avant l'affichage de la page.

Après avoir activé l'option « Optimiser la livraison du CSS », cliquez sur le bouton « Enregistrer les modifications » et attendez que WP Rocket génère le fichier CSS nécessaire pour tous vos articles et pages. Il videra également automatiquement le cache de votre site web.

Une fois terminé, vous pouvez tester à nouveau les performances de votre site web à l'aide de Google Pagespeed Insights.

Ajustements supplémentaires de la livraison des fichiers pour améliorer les performances

WP Rocket vous permet également de supprimer les chaînes de requête des fichiers statiques, de combiner les fichiers Google Fonts et de minifier le HTML.

Tous ces ajustements apportent de petites améliorations à votre vitesse globale, ce qui se traduit par une expérience de chargement plus rapide pour vos visiteurs.

Vous verrez également des options pour minifier et combiner les fichiers CSS. Ces options réduiront les requêtes HTTP et vous donneront un coup de pouce supplémentaire en matière de vitesse.

Cependant, vous devrez vérifier attentivement votre site web pour vous assurer que rien n'est cassé après avoir activé ces paramètres.

De plus, vous pouvez appliquer la même optimisation pour les fichiers JavaScript de votre site web.

Vous pouvez les réduire et les combiner pour les servir en un seul fichier et différer le chargement des fichiers JavaScript pour améliorer les performances.

Pour plus de détails, consultez notre tutoriel étape par étape sur comment configurer correctement WP Rocket dans WordPress.

Méthode 2 : Supprimer le CSS inutilisé dans WordPress avec Asset CleanUp

Cette méthode utilise le plugin gratuit Asset CleanUp. Elle est un peu plus manuelle mais vous donne un contrôle total pour supprimer le CSS inutilisé spécifique de n'importe quelle page de votre site WordPress.

Nous recommandons cette méthode si vous êtes à l'aise avec le dépannage de votre site, car vous devrez tester votre site en profondeur pour vous assurer que rien n'est cassé.

Tout d'abord, vous devez installer et activer le plugin Asset Cleanup. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez visiter la page Asset CleanUp » Paramètres et passer à l'onglet Mode Test. À partir de là, vous devez activer l'option « Activer le mode test ».

Cela vous permet d'essayer différents paramètres et de les tester en tant qu'administrateur sans affecter les visiteurs du site Web.

Après cela, vous devez visiter la page Asset CleanUp » Gestionnaire CSS/JS. À partir de là, vous pouvez décharger les fichiers CSS et JavaScript indésirables page par page.

Selon vos paramètres, il peut automatiquement récupérer et analyser votre page d'accueil. Vous verrez une liste de tous les fichiers CSS et JavaScript chargés sur cette page.

Vous devez faire défiler vers le bas et examiner les fichiers chargés. Si vous voyez un fichier dont vous n'avez pas besoin, vous pouvez le décharger pour cette page particulière, ce type de publication ou sur l'ensemble du site.

Le plugin vous permet également de choisir des publications ou des pages spécifiques à partir d'ici, ou vous pouvez accéder aux mêmes options en modifiant la publication ou la page comme vous le feriez normalement.

Sur l'écran de modification de la publication, vous trouverez la boîte Asset CleanUp juste en dessous de l'éditeur de publication.

Le plugin récupérera et listera automatiquement tous les fichiers et ressources chargés lorsqu'un visiteur consulte cette page sur votre site Web.

Vous pouvez ensuite simplement décharger les fichiers CSS ou JavaScript inutilisés dont vous n'avez pas besoin sur cette page.

Important : N'oubliez pas de tester votre site Web après avoir supprimé les fichiers CSS ou JavaScript inutilisés pour vous assurer que tout fonctionne correctement.

Une fois que vous avez terminé de décharger et de supprimer les fichiers CSS et JavaScript inutilisés, vous pouvez retourner à la page des paramètres du plugin et désactiver le « Mode Test ».

N'oubliez pas de cliquer sur le bouton « Mettre à jour tous les paramètres » pour enregistrer vos modifications.

Vous pouvez maintenant tester votre site web à l'aide de Google Pagespeed Insights pour observer le changement dans la notification CSS inutilisée.

Questions fréquemment posées sur le CSS inutilisé

De nombreux lecteurs nous interrogent sur la sécurité et l'impact du nettoyage de leurs feuilles de style. Voici les réponses à certaines des questions les plus fréquentes sur la suppression du CSS inutilisé dans WordPress.

1. Est-il sûr de supprimer le CSS inutilisé dans WordPress ?

La suppression du CSS inutilisé est généralement sûre si vous utilisez un plugin réputé comme WP Rocket ou Asset CleanUp. Ces outils tentent de conserver le code essentiel dont votre site a besoin pour s'afficher correctement. Cependant, comme le style peut être complexe, il existe toujours un petit risque de casser une mise en page.

Nous vous recommandons vivement d'utiliser un plugin de sauvegarde comme Duplicator pour sauvegarder votre site avant d'appliquer ces modifications.

2. Pourquoi ne puis-je pas supprimer 100 % du CSS inutilisé ?

Il est presque impossible de supprimer chaque ligne de CSS inutilisé car WordPress crée des pages dynamiquement.

Certains styles sont masqués jusqu'à ce qu'une action spécifique se produise, comme le déploiement d'un menu mobile ou l'apparition d'une fenêtre contextuelle. Si vous supprimez ce code « inutilisé », ces fonctionnalités interactives cesseront de fonctionner.

Si un plugin supprimait tout le CSS qui n'était pas immédiatement visible, les fonctionnalités interactives de votre site WordPress pourraient cesser de fonctionner correctement.

3. La suppression du CSS inutilisé aide-t-elle au classement SEO ?

Oui, la suppression du CSS inutilisé peut aider à améliorer le classement SEO de votre WordPress. Les moteurs de recherche comme Google considèrent la vitesse de chargement des pages comme un facteur de classement. Lorsque vous réduisez la taille de vos fichiers CSS, vos pages Web se chargent plus rapidement, ce qui indique à Google que votre site offre une bonne expérience utilisateur.

4. Puis-je supprimer manuellement le CSS inutilisé sans plugin ?

Nous ne recommandons pas d'essayer de supprimer manuellement le CSS inutilisé, sauf si vous êtes un développeur expérimenté. Vous devrez identifier et supprimer des lignes de code spécifiques des fichiers de votre thème et de vos plugins.

Si vous faites une erreur en modifiant ces fichiers manuellement, vous pourriez casser la conception de l'ensemble de votre site Web WordPress.

Ressources supplémentaires pour améliorer les performances de WordPress

Nous espérons que cet article vous a aidé à apprendre comment supprimer facilement le CSS inutilisé dans WordPress. Vous pourriez également vouloir consulter d'autres guides liés à l'amélioration des performances de WordPress :

• Le guide ultime pour améliorer la vitesse et les performances de WordPress
• Comment accélérer les performances de WooCommerce
• Comment effectuer correctement un test de vitesse de site Web (meilleurs outils)
• Métriques importantes à mesurer sur votre site WordPress
• Comment optimiser les Core Web Vitals pour WordPress (Guide ultime)
• Comment utiliser le plugin GTmetrix pour améliorer les performances de votre site WordPress
• Comment optimiser facilement la livraison CSS de WordPress
• Hébergement WordPress le plus rapide (Tests de performance)
• Comment optimiser les images pour les performances web sans perdre en qualité
• Meilleurs plugins de mise en cache WordPress pour accélérer votre site Web

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.