Supprimer les CSS inutilisés est souvent recommandé dans les résultats d’outils de tests de performances comme GTmetrix et autres Pagespeed Insights. Pour la simple et bonne raisons qu’en supprimant ces ressources d’une page, on peut en accélérer le temps d’affichage et de chargement. Bref, ça permet à des pages d’être plus rapides et véloces. Or quand on sait que les performances d’un site web sont prises en compte par Google a priori, autant mettre des chances de son côté de ce point de vue. Sachant que des pages qui se chargent vite, c’est idéal pour les internautes.
Aussi, WordPress ne fait pas exception comme tout autre CMS. Si on peut trouver un outil pour Supprimer les CSS inutilisés, autant le faire. Et WP Rocket le permet. Découvrons comment !
Sommaire
WP Rocket pour Supprimer les CSS inutilisés
Recommandation de suppression ou réduction par Pagespeed Insights
C’est souvent quand on teste plusieurs pages avec un outil comme Pagespeed Insights qu’on peut obtenir des recommandations invitant à réduire ou supprimer les CSS inutilisés. Tout simplement afin de rendre une page web plus rapide au chargement. Et ainsi dans la foulée de rendre son site plus rapide.
Voici d’ailleurs ce qu’indique Pagespeed Insights va afficher après une analyse s’il détecte qu’il y a des ressources css inutilisées pour l’url testée :
En gros il faut comprendre que réduire ou supprimer toute ressource CSS que la page ne va pas utiliser pour afficher le contenu va être très positif. En effet, ce seront moins de données à charger quand on clique pour voir une page de site web 🙂 Et ça va donc + vite !
En bref, agir en réduisant ou en supprimant les ressources de types CSS inutilisés, c’est rendre votre site internet plus rapide et plus vertueux !
Optimiser la vitesse de chargement de votre site
Pour optimiser la vitesse de chargement de votre site WordPress, il est essentiel de supprimer les CSS inutilisés. Les CSS sont des feuilles de style qui définissent la mise en page et la présentation des éléments d’une page Web.
Lorsque vous utilisez un thème ou des plugins sur votre site, ceux-ci peuvent charger des fichiers CSS qui ne sont pas utilisés sur toutes les pages. Ces fichiers inutiles peuvent ralentir le temps de chargement de votre site weben augmentant le nombre de requêtes serveur et en surchargeant les navigateurs des visiteurs. 🙁
Avec le plugin WP Rocket, vous avez la possibilité de supprimer ces CSS inutilisés de manière efficace. WP Rocket est un plugin de mise en cache WordPress qui vous permet d’optimiser la vitesse de chargement de votre site :
- en gérant les ressources statiques
- en mettant en cache les pages Web
- en compressant les fichiers pour réduire leur taille de chargement.
Cette fonctionnalité analyse les pages de votre site et identifie les fichiers CSS qui ne sont pas utilisés. 🙂
Ensuite, le plugin va automatiquement supprimer ces fichiers inutiles pour améliorer la vitesse de chargement de vos pages. En plus de supprimer les CSS inutilisés, vous pouvez également activer d’autres fonctionnalités de WP Rocket pour optimiser davantage la vitesse de chargement de votre site.
Supprimer le css inutilisé avec WP Rocket
En préambule, je précise que WP Rocket est un plugin de cache WordPress qui est premium. Vous ne pourrez donc l’utiliser que si vous acheter une licence.
En l’occurrence, pour pouvoir activer l’option de WP Rocket qui va supprimer ces fameux CSS inutilisés, il faudra aller dans l’onglet « Optimisation des fichiers » :
Ensuite, il convient de cocher l’option nommée « Optimiser le chargement du CSS » et de bien valider le choix « Supprimer les ressources CSS inutilisées » comme suit sur le bouton :
Vous devrez alors valider une seconde fois votre choix avec le bouton orange : « Activer supprimer les ressources CSS inutilisées« . Enfin, n’oublions pas d’enregistrer nos modifications avec le bouton en pied de page.
Vous l’aurez compris, là pas besoin de code html. Vous agissez simplement sur la configuration de WP Rocket qui ensuite fait le job de supprimer ce CSS inutilisé.
Impacts sur un site internet quand les ressources CSS inutilisées sont supprimées
Utiliser un cache WordPress peut avoir des impacts sur votre site web en frontal. Et bien entendu, si cela provoque des bugs, vos visiteurs le verront. C’est pour cette raison qu’on peut souvent lire des recommandations dans les pages de configuration des plugins de cache web.
Les bugs relatifs à l’agressivité d’un cache peuvent être divers :
- images qui ne s’affichent pas ou pas bien
- couleurs ou fonds qui ne s’affichent pas complètement
- icônes dont la taille affichée n’est pas celle paramétrée…
- Texte sans la police de caractère configurée…
Aussi, quand vous activez une option un peu agressive comme celle qui va supprimer les « unused css » à savoir les CSS inutilisées en anglais, vérifiez l’affichage de votre site web en frontal sur Bureau/desktop et mobile avant de la laisser définitivement ainsi. Cela vous évitera de découvrir des bugs au hasard plus tard 🙂
Traiter les css inutilisés page par page
Grace à WP Rocket, vous pouvez affiner vos réglages pour le CSS inutilisé ou non en le supprimant ou pas sur les pages par unité. C’est à dire page par page. Via l’éditeur de blocs vous verrez à droite l’encart qui suit via lequel :
En bref, si vous activez dans les réglages de WP Rocket globaux que vous souhaitez supprimer les CSS inutilisés, vous pouvez tout à fait désactiver cette option sur une page ou d’autres en passant par cet encart du plugin de cache.
Utiliser WP Rocket avec Blocksy pour les unused css
Le thème WordPress Blocksy est relativement léger. Toutefois, quand un site web bouge beaucoup et utilise beaucoup d’images comme par exemple pour un blog, appliquer un bon cache devient préférable.
En l’occurrence, Blocksy (gratuit ou pro) fonctionne très bien avec WP Rocket. Pas de bugs d’affichage à remonter à ce jour. Si vous cherchez des pistes en termes de thème WordPress alors que vous avez déjà une licence WP Rocket ou que vous cherchez un bon cache (moyennant budget) si vous avez déjà Blocksy, sachez que le couple fonctionne plutôt très bien 🙂
Les pages web d’un Blocksy fraîchement installé sont rapides ! Mais rien de tel que de maintenir cette rapidité d’affichage quand le site web se remplit avec un bon cache comme WP Rocket 😉 Pour grader un bon temps de chargement très speed.
Conclusion
-> Par exemple, vous pouvez mettre en cache les pages Web pour charger les contenus plus rapidement, compresser les fichiers pour réduire leur taille de chargement, activer la compression Gzip pour accélérer le transfert des données, et charger les images en lazy load pour retarder le chargement des images hors de la vue des visiteurs.
En optimisant votre site avec WP Rocket, vous allez améliorer la vitesse de chargement, réduire le temps de réponse du serveur, et offrir une meilleure expérience utilisateur à vos visiteurs. De plus, une meilleure performance web peut également avoir un impact positif sur votre référencement naturel, en augmentant la visibilité de votre site sur les moteurs de recherche et en améliorant le taux de conversion de votre e-commerce. En résumé, supprimer les CSS inutilisés avec WP Rocket est une étape essentielle pour optimiser la vitesse de chargement de votre site WordPress et offrir une expérience utilisateur optimale à vos visiteurs. N’hésitez pas à explorer toutes les fonctionnalités de ce plugin pour améliorer la performance et la rapidité d’affichage de vos pages Web.
