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

En tant que propriétaires de sites WordPress, nous nous efforçons tous d'offrir une expérience utilisateur rapide et optimale. Cela permet non seulement de fidéliser les visiteurs, mais aussi d'améliorer le classement de nos sites dans les résultats de recherche.

Vous ne vous rendez peut-être pas compte que vos thèmes et plugins chargent souvent beaucoup plus de code CSS que vos pages n'en ont besoin. Ce CSS inutilisé peut secrètement ralentir votre site web.

Chaque ligne de code supplémentaire que vos visiteurs doivent télécharger ajoute de précieuses secondes au temps de chargement. Et dans le monde d'aujourd'hui, même un délai d'une seconde peut vous coûter des visiteurs et des ventes.

C'est pourquoi nous avons rassemblé ce guide complet sur la suppression du CSS inutilisé de WordPress de la bonne manière. Nous vous montrerons les méthodes exactes que nous utilisons pour nettoyer les feuilles de style gonflées et accélérer les sites sans rien casser.

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. Remove Unused CSS in WordPress Using Asset CleanUp

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. 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é (Bêta) ».

Comme cette fonctionnalité de WP Rocket est en version bêta, elle vous demandera à nouveau si vous souhaitez activer le paramètre. Vous pouvez continuer et cliquer sur le bouton « Activer la suppression du CSS inutilisé ».

Une fois l'option « Supprimer le CSS inutilisé » activée, vous pouvez spécifier les noms de fichiers CSS, les ID ou les classes qui ne doivent pas être supprimés sous la zone « Liste blanche CSS ».

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.

Supprimer le CSS qui bloque le rendu pour WordPress

WP Rocket vous permet d'optimiser vos fichiers CSS et de supprimer le CSS qui bloque le rendu de votre site Web.

Pour commencer, vous pouvez naviguer vers l'onglet « Optimisation des fichiers » dans WP Rocket. À partir de là, faites défiler jusqu'à la section Fichiers CSS, puis cochez la case à côté de l'option « Optimiser la livraison du 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 est un peu avancée mais incroyablement puissante et vous permettra de supprimer facilement tout CSS inutilisé de n'importe quelle page de votre site WordPress.

Cependant, c'est un peu compliqué, et vous devrez tester minutieusement la fonctionnalité et l'apparence de votre site Web 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.

Il récupérera d'abord votre page d'accueil et vous montrera 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.

Guides d'experts sur l'amélioration des 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.