Comment supprimer les CSS et JS inutilisés dans WordPress (très facile)

Avoir beaucoup de CSS et de JS inutilisés sur votre site Web peut nuire au temps de chargement de votre site Web. Si vous gérez votre site Web via un outils de test de vitesse tel que Google PageSpeed Insight, vous pouvez recevoir un avertissement pour supprimer le CSS inutilisé.

Heureusement, il existe un moyen très simple de le faire. Vous n'avez pas besoin de connaissances techniques particulières pour pouvoir supprimer les CSS et JS inutilisés de votre site WordPress.

C'est à cause d'un incroyable plug-in connue sous le nom Asset CleanUp : accélérateur de vitesse de page. Avec ce plugin, supprimer les CSS inutilisés est aussi simple que de cliquer sur quelques boutons. Alternativement, si cela ne vous dérange pas de dépenser quelques dollars par an, avec WP Rocket, il y a un bouton CSS inutilisé supprimé, il suffit de l'activer et le plugin supprimera automatiquement tous les CSS inutilisés.

Départ : Top 7 des hébergements WordPress Google Cloud gérés

Qu'est-ce qu'un CSS inutilisé ?

Le CSS inutilisé est un fichier CSS qui est présent dans une page mais qui n'est généralement pas nécessaire au chargement de la page. Lorsqu'un visiteur ouvre un site Web, le navigateur doit généralement télécharger, analyser et traiter toutes les feuilles de style externes sur la page visitée avant de pouvoir afficher le contenu de la page au visiteur. Si un CSS existe sur une telle page qui n'est pas utilisé sur la page, le navigateur y perdra son temps.

Un exemple classique de ceci est la plupart des plugins de formulaire de contact qui sont utilisés. Bien que ces plugins ne soient principalement utilisés que sur la page Contactez-nous, chargez son CSS sur tout le site Web. Peu importe si c'est la page d'accueil où il n'est pas utilisé, le CSS se chargera.

S'il y a trop de CSS qui ne sont pas nécessaires mais qui se chargent et ralentissent le temps du navigateur pour lire et afficher une page, cela peut devenir un problème.

Outre les plugins, les développeurs de thèmes écrivent beaucoup de choses dans le style.css qui ne sont généralement pas nécessaires. Mais que cela soit nécessaire ou non, ils se chargent chaque fois que votre site est chargé !

Un CSS inutilisé peut ne pas être un problème, mais beaucoup de CSS inutilisés peuvent affecter le temps de chargement de votre site Web.

Départ : Top 10 des thèmes WordPress les plus rapides et les meilleurs

Comment identifier les CSS inutilisés

Trouver des CSS et JS inutilisés est une chose très facile à faire. Il y a deux approches que je recommanderai.

L'une consiste à analyser votre site Web via Google PageSpeed Insight. Vérifiez si votre site Web présente un problème de suppression de CSS inutilisé. Cliquez dessus et vous pourrez identifier le composant de votre site qui en est responsable.

Vous pouvez voir ci-dessus qu'il y a un cas de CSS inutilisé enregistré. Je peux voir le plugin et l'emplacement du CSS inutilisé en regardant ceci.

La deuxième option consiste à obtenir une analyse plus détaillée. Vous pouvez y parvenir en utilisant les outils de développement Chrome.

Sur votre navigateur Chrome, ouvrez les outils de développement Chrome, puis accédez à la couverture. Cliquez ensuite sur le bouton de rechargement à l'intérieur de la zone de couverture. Vous pouvez trouver un guide complet sur la façon de procéder dans l'outil Google Developers.

L'autre option est d'utiliser jitbit pour rechercher les sélecteurs CSS inutilisés. Vous pouvez aussi utiliser PurifierCSS pour trouver les CSS inutilisés

Comment supprimer le CSS inutilisé

Suivez ces étapes pour supprimer les CSS inutilisés de WordPress :

1. Installez Asset CleanUp

Allez dans plugin puis Ajouter nouveau. Ensuite, vous tapez "Asset CleanUp" dans la zone de recherche de la page Ajouter un nouveau plugin. Installez et activez le plugin.

2. Accédez aux paramètres du plug-in

Pour accéder aux paramètres du plugin, à partir du tableau de bord WordPress, cliquez sur paramètres puis cliquez sur Asset CleanUp.

3. Déchargez les CSS et JS indésirables

Sur les paramètres du plugin, vous devrez peut-être accepter que vous sachiez comment le plugin fonctionne sous le gros robinet de décapage avant de commencer.

Pour décharger CSS et JS, cliquez sur Gestionnaire CSS et JSS. De là, vous pouvez supprimer tous les CSS et JS dont vous n'avez pas besoin. Vous pouvez le supprimer uniquement pour la page d'accueil, pour l'ensemble du site ou pour une URL spécifique. Vous pouvez également supprimer des publications, des pages ou des catégories.

Un exemple consiste à décharger tout formulaire de contact du chargement pour l'ensemble du site, à l'exception de la page Contactez-nous

Prenez votre temps et déchargez tous les CSS et JS dont vous savez qu'ils ne sont pas nécessaires. Assurez-vous de tester votre site une fois que vous avez terminé pour vous assurer que tout va bien.

Supprimer les plugins WordPress CSS inutilisés

Voici quelques plugins que vous pouvez utiliser pour supprimer les CSS inutilisés dans WordpPress :

1. Asset CleanUp : accélérateur de vitesse de page

Asset CleanUp : accélérateur de vitesse de page facilite la suppression des CSS et JS inutilisés dans WordPress, même pour les débutants. Tout ce que vous avez à faire est de désactiver un CSS particulier qui n'est pas nécessaire pour une page particulière.

Vous pouvez également désactiver pour des publications individuelles uniquement. Avec la version premium, vous pouvez désactiver les CSS/JS inutilisés par les plugins.

Ce plugin est un plugin de performance complet avec de nombreuses autres options pour accélérer WordPress. La suppression des CSS/JS inutilisés n'en est qu'une partie.

Dans ce post, j'ai utilisé ce plugin a un guide.

2. WP Rocket

WP Rocket est le plugin de performance premium WordPress numéro un. Si vous êtes un noob, je veux dire si vous n'êtes pas expérimenté ou à l'aise avec WordPress, alors WP Rocket est le moyen le plus simple de supprimer les CSS inutilisés.

Vous devez acheter le plugin, une fois que vous avez fait cela, vous pouvez le télécharger depuis votre compte ou vérifier votre email pour un lien de téléchargement.

Installez le plugin via Tableau de bord>plugins>Ajouter un nouveau>Télécharger.

Accédez simplement aux paramètres de WP Rocket, puis cliquez sur l'onglet "Optimisation des fichiers". Ensuite, faites défiler vers le bas et vous verrez "Supprimer le CSS inutilisé", cochez la case, enregistrez et effacez le cache.

3. Questions de performance

Perfmatters est un plugin premium développé par Brian Jackson et son frère, Brett Jackson. Ce plugin peut aider à supprimer très facilement les CSS inutilisés.

Tout d'abord, vous devez acheter le plugin. Ensuite, installez-le. Activez la licence. Lorsque vous accédez aux paramètres, activez le gestionnaire de scripts.

Accédez simplement à n'importe quelle page ou publication sur votre site Web, vous verrez l'icône du gestionnaire de scripts dans le menu du tableau de bord, cliquez dessus. Vous pourrez supprimer les CSS et JS inutilisés de la page ou globalement.

Ce plugin est un plugin de performance, livré avec de nombreuses autres options pour accélérer WordPress. La suppression des CSS/JS inutilisés en fait partie.

4. Gestionnaire CSS JS

Gestionnaire CSS JS peut spécifiquement supprimer CSS ou JS de Mobile ou Desktop. Selon ce que vous voulez atteindre.

Ce plugin peut également différer le chargement des fichiers CSS ou JS.

Conclusion

Si vous avez beaucoup de CSS et JS inutilisés, vous remarquerez une grande amélioration des scores de vitesse et de performance.

Il peut être impossible de supprimer tous les CSS inutilisés, mais vous pouvez les réduire au minimum. J'utilise Asset CleanUp pour supprimer les CSS inutilisés pour TendanceCible.

Rappelez-vous, optimisez mais ne soyez pas trop obsédé par cela, à moins que vous ne vouliez que votre site ressemble à le site web le plus rapide au monde.

A lire également:

Comment éliminer les ressources bloquant le rendu dans WordPress

Comment rendre WordPress très rapide

Comment générer du trafic vers votre blog