Vous souhaitez supprimer les CSS inutilisés dans WordPress pour que votre site se charge plus rapidement ? Le CSS non utilisé est la partie de code CSS ajoutée par votre thème WordPress ou vos plugins dont vous n'avez pas vraiment besoin.
La suppression de ce code CSS améliore les performances et l'expérience utilisateur de WordPress mais également votre SEO. Dans cet article, on vous montre comment supprimer facilement les CSS inutilisés dans WordPress sans casser votre site Web.
Sommaire
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 la page.
Le code supplémentaire peut faire en sorte que le navigateur d'un visiteur prenne un peu plus de temps pour afficher une page, ce qui crée une mauvaise expérience utilisateur. Les temps de chargement plus lents peuvent même affecter vos classements de recherche, entraînant moins de trafic vers 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.
Le CSS est utilisé pour styliser l'apparence de votre site Web WordPress. Votre thème WordPress comprend du 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 pages 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 CSS pour styliser vos formulaires.
Ensuite, vous avez vos polices Web, polices d'icônes et autres éléments qui devront également ajouter leurs propres fichiers CSS. Généralement, 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.
Il existe différentes manières 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.
Cette méthode est plus simple 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 facile 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 est également rapide pour vos utilisateurs.
Tout d'abord, vous devez installer et activer le plugin WP Rocket. Lors de l'activation, vous devez visiter le Paramètres » WP Rocket et passez à l'onglet « Optimisation des fichiers ». Ensuite, vous devez faire défiler jusqu'à la section des fichiers CSS. À partir de là, vous devez cocher la case à côté de l'option « 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 par les utilisateurs beaucoup plus rapidement qu'il ne le ferait si vous deviez charger tous les fichiers CSS avant que la page ne s'affiche. Après avoir activé l'option "Optimiser la livraison CSS", cliquez sur le bouton Enregistrer les modifications.
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 tester à nouveau les performances de votre site Web à l'aide de Google Pagespeed Insights.
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 s'ajoute à une expérience de chargement plus rapide pour vos visiteurs.
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.
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 afin d'améliorer les performances.
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 les fonctionnalités et l'apparence de votre site Web pour vous assurer que rien n'est cassé.
Tout d'abord, vous devez installer et activer le plug-in Asset Cleanup. Lors de l'activation, vous devez visiter le Nettoyage des actifs » Paramètres et passez à l'onglet Mode test. À partir de là, vous devez activer l'option « Activer le mode de 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 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 tout le 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 d'édition de publication, vous trouverez la case Asset CleanUp juste en dessous de l'éditeur de publication.
Le plugin récupère et répertorie automatiquement tous les fichiers et actifs 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.
N'oubliez pas de tester votre site Web après avoir supprimé tout 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 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 voir le changement dans l'avis CSS inutilisé.
Nous espérons que cet article vous a aidé à apprendre comment supprimer facilement les CSS inutilisés dans WordPress. Optimiser le CSS de son site permet de gagner en vitesse et en UX.On évoque la question de l'optimisation de son site WordPress à travers de nombreux articles. On vous explique par exemple, comment retravailler votre pied-de-page !