Voulez-vous supprimer les CSS inutilisés dans WordPress afin que votre site se charge plus rapidement ?

Le CSS inutilisé est tout code CSS ajouté par votre thème WordPress ou des plugins dont vous n’avez pas vraiment besoin. La suppression de ce code CSS améliore les performances de WordPress et l’expérience utilisateur.

Dans cet article, nous allons vous montrer comment supprimer facilement les CSS inutilisés dans WordPress sans casser votre site Web.

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

Le CSS inutilisé dans WordPress est un code CSS qui se charge sur votre site Web mais qui n’est pas réellement nécessaire pour afficher la page.

Le code supplémentaire peut rendre le navigateur d’un visiteur plus long à afficher une page, ce qui crée une mauvaise expérience utilisateur. Les temps de chargement plus lents peuvent même affecter votre classement de recherche, entraînant moins de trafic sur votre site.

Vous pouvez voir comment le code CSS inutilisé affecte votre site Web en utilisant Google Pagespeed Insights. Il vous montrera une section intitulée « Supprimer les CSS inutilisés » avec des détails sur les fichiers CSS qui affectent vos temps de chargement.

Problème de code CSS inutilisé dans Google Pagespeed Insights

Pourquoi le CSS inutilisé est-il ajouté dans WordPress ?

CSS est utilisé pour styliser l’apparence de votre site Web WordPress. Votre thème WordPress inclut CSS, dont la plupart sont inclus dans un seul fichier style.css.

En plus du CSS de votre thème, vos plugins WordPress chargeront également leur propre CSS. Par exemple, WooCommerce chargera du CSS pour afficher les produits, un plugin de création de page ajoutera son propre CSS pour afficher vos pages personnalisées, et un plugin de création de formulaire inclura du CSS pour styliser vos formulaires.

Ensuite, vous avez vos polices Web, vos polices d’icônes et d’autres éléments qui devront également ajouter leurs propres fichiers CSS.

Habituellement, ces fichiers sont très petits et se chargent rapidement. Cependant, si votre site WordPress en contient beaucoup, les effets peuvent s’additionner et avoir un impact notable sur la vitesse de votre site.

Comment supprimer le CSS inutilisé dans WordPress ?

Il existe plusieurs façons de réduire les CSS inutilisés sur votre site Web WordPress.

Cependant, il serait assez difficile de supprimer complètement tous les CSS inutilisés dans WordPress. En raison de la façon dont WordPress fonctionne dans les coulisses, certains CSS inutilisés peuvent être difficiles à trouver et à supprimer.

Cela dit, nous vous montrerons deux méthodes pour supprimer les CSS inutilisés, et vous pourrez choisir celle qui vous convient le mieux.

Méthode 1. Supprimer les CSS inutilisés dans WordPress à l’aide de WP Rocket

Cette méthode est plus facile et est recommandée pour les débutants. Il améliore considérablement la livraison globale des fichiers CSS sur votre site Web WordPress, notamment en supprimant la plupart des CSS inutilisés.

Nous pensons que c’est la meilleure solution pour les débutants car elle est plus simple et atteint l’objectif principal d’offrir une meilleure expérience à vos utilisateurs. Cela signifie que votre site Web se charge rapidement sur les outils de test de vitesse et se sent é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 la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter le Paramètres » WP Rocket page et passez à l’onglet « Optimisation des fichiers ».

Optimisation des fichiers dans WP Rocket

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) ».

Étant donné que 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 des CSS inutilisés ».

Cliquez sur l'option Supprimer le CSS inutilisé

Une fois que l’option « Supprimer les CSS inutilisés » est active, vous pouvez alors spécifier les noms de fichiers, les ID ou les classes CSS qui ne doivent pas être supprimés sous la case « CSS safelist ».

Ajouter des fichiers à la liste sûre CSS

Ensuite, vous devrez enregistrer vos modifications en faisant défiler vers le bas et en cliquant sur le bouton Enregistrer les modifications. Lorsque vous faites cela, WP Rocket commencera à traiter vos fichiers CSS et vous montrera une barre de progression.

Voir supprimer la barre de progression CSS inutilisée

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 ! » message lorsque le plugin a terminé le processus.

Supprimer la notification complète CSS inutilisée

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

Supprimer le CSS bloquant le rendu pour WordPress

WP Rocket vous permet d’optimiser votre fichier CSS et de supprimer le CSS bloquant le rendu de votre site Web.

Pour commencer, vous pouvez accéder à 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 CSS ».

Optimiser la livraison 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 d’abord ce fichier, 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 visible pour les utilisateurs beaucoup plus rapidement qu’il ne le serait si vous deviez charger tous les fichiers CSS avant l’affichage de la page.

Après avoir activé l’option « Optimiser la livraison 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 effacera également automatiquement le cache de votre site Web.

Une fois terminé, vous pouvez continuer et tester à nouveau les performances de votre site Web à l’aide de Google Pagespeed Insights.

Ajustements supplémentaires de livraison de 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 réduire le code HTML. Tous ces ajustements ajoutent de petites améliorations à votre vitesse globale, ce qui contribue à une expérience de chargement plus rapide pour vos visiteurs.

Optimisation de base des fichiers

Vous verrez également des options pour réduire et combiner les fichiers CSS. Ces options réduiront les requêtes HTTP et vous donneront un gain de vitesse supplémentaire.

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

Minifier et combiner des fichiers CSS

De plus, vous pouvez appliquer la même optimisation pour les fichiers JavaScript sur votre site Web. Vous pouvez les réduire et les combiner pour servir de fichier unique et différer le chargement des fichiers JavaScript pour améliorer les performances.

Optimiser la livraison JavaScript

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

Méthode 2. Supprimer le CSS inutilisé dans WordPress à l’aide de 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 soigneusement 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 la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter le Nettoyage des actifs » Paramètres page et passez à l’onglet Mode test. À partir de là, vous devez activer l’option « Activer le mode test ».

Activer l'option du 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 le Nettoyage des actifs » Gestionnaire CSS/JS page. À partir de là, vous pouvez décharger les fichiers CSS et JavaScript indésirables page par page.

Responsable CSS/JS

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 revoir les fichiers chargés. Si vous voyez un fichier dont vous n’avez pas besoin, vous pouvez le décharger pour cette page, ce type de publication ou tout le site.

Déchargement de fichiers

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 publication, vous trouverez la boîte Asset CleanUp juste en dessous de l’éditeur de publication.

Nettoyage des actifs dans l'éditeur de publication

Le plug-in récupère et répertorie 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.

Décharger des fichiers pour une page particulière

Important: N’oubliez pas de tester votre site Web après avoir supprimé tout code CSS ou JavaScript inutilisé 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 revenir à la page des paramètres du plug-in 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 voir le changement dans l’avis CSS inutilisé.

CSS réduit dans WordPress

Nous espérons que cet article vous a aidé à apprendre comment supprimer facilement les CSS inutilisés dans WordPress. Vous pouvez également suivre notre guide complet sur le coût de la création d’un site Web et consulter notre liste des hébergements WordPress les mieux gérés.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici