Lors de l'exécution d'un test de vitesse, vous avez peut-être remarqué de PageSpeed Insights concernant la suppression des CSS inutilisés. Souhaitez-vous supprimer les CSS inutilisés de votre site WordPress pour le charger plus rapidement et obtenir de meilleures performances ?
De nombreux codes CSS sont ajoutés par les thèmes et plugins WordPress dont vous n'avez pas besoin. Les performances de WordPress et l'expérience utilisateur peuvent être améliorées en supprimant le code CSS inutilisé. Nous allons démontrer dans cet article comment vous pouvez facilement supprimer les CSS inutilisés de votre site Web WordPress sans provoquer la panne de votre site Web.
Supprimez les CSS inutilisés dans WordPress de différentes manières
Si vous souhaitez réduire la quantité de CSS inutilisée sur votre site Web WordPress, vous pouvez essayer différentes méthodes.
Bien qu’il soit possible de supprimer tous les CSS inutiles dans WordPress, ce serait une tâche assez difficile. De plus, en raison de la manière dont WordPress fonctionne en coulisses, il peut être difficile pour certains utilisateurs de trouver et de supprimer les CSS inutiles.
Dans ce cas, nous vous montrerons différentes manières de supprimer les CSS inutilisés et vous pourrez choisir la méthode la mieux adaptée à vos besoins.
Trouvez vos plus gros fichiers CSS
Pour voir vos fichiers CSS les plus complets, triez votre rapport de couverture par « visualisation de l'utilisation » dans Chrome Dev Tools . Les URL incluent généralement le nom du plugin, du thème ou du code tiers qui a généré le fichier. En conséquence, il vous sera désormais plus facile de déterminer ce qui doit être optimisé.
Supprimer les CSS inutilisés avec les CSS utilisés dans un fichier séparé
Il est plus rapide de créer un fichier séparé puisque la taille HTML n'augmente pas et que le fichier peut être mis en cache, contrairement à l'inline. Il est également chargé dans un fichier séparé par CSS et FlyingPress de LiteSpeed Cache. De plus, WP Rocket optimise les scores plutôt que les visiteurs, contrairement à la plupart des autres plugins, qui utilisent des fichiers différents car ils sont plus rapides.
Évitez les plugins qui ajoutent du CSS
Des outils comme Query Monitor et WP Hive sont bons, mais ils ne montrent pas toujours si un plugin ajoute du CSS/JS supplémentaire au front-end. Par conséquent, le plein impact du plugin ne peut être observé qu’après avoir retesté votre site Web après avoir ajouté du contenu au front-end. Les coupables les plus courants sont les galeries, les curseurs, les formulaires de contact, les commentaires, le chat, les calendriers et les plugins de création de pages liés au design.
Utilisez un thème léger + un générateur de pages.
Le front-end est surchargé de CSS, JavaScript et de polices. En conséquence, un site Web lent est garanti lorsqu'il est combiné avec des plugins de création de pages supplémentaires tels que Elementor Pro et Ultimate Addons.
Activer les optimisations CSS dans les générateurs de pages
Parmi ces paramètres figurent les expériences d'Elementor et les paramètres de performances de Divi, qui incluent plusieurs options pour réduire la taille du CSS (par exemple, amélioration des actifs et du chargement du CSS dans Elementor et CSS dynamique dans Divi). En général, vous obtiendrez de meilleurs résultats si vous activez plus de performances.
Désactivez les icônes si vous ne les utilisez pas
Si vous n'utilisez pas les icônes Elementor, désactivez-les. Pour Google Fonts + Font Awesome, vous pouvez le faire dans la documentation de Perfmatters ou d'Elementor.
Supprimer CSS dans les plugins de déchargement d'actifs
En utilisant Perfmatters , vous pouvez désactiver CSS/JS (ou des plugins entiers) là où ils ne sont pas nécessaires, supprimer les CSS inutilisés et remplacer les iframes YouTube par des images d'aperçu. Le CSS inutilisé restant peut être rendu plus accessible par toutes ces méthodes. Les fichiers CSS/JS peuvent également être désactivés avec le plugin Asset CleanUp.
Images d'arrière-plan à chargement paresseux trouvées dans CSS
La plupart des plugins de cache ne chargeront pas les images d'arrière-plan si elles sont emballées dans un fichier CSS séparé.
Par conséquent, si vous souhaitez charger paresseusement les images d’arrière-plan, veuillez vous référer à la documentation de votre plugin de cache. FlyingPress est livré avec une classe d'assistance lazy-bg que vous pouvez ajouter à la classe CSS supplémentaire, contrairement à WP Rocket qui nécessite du HTML en ligne. Une classe d'assistance lazy-bg peut être ajoutée manuellement, ou Optimole propose une solution utilisant des sélecteurs CSS.
Supprimer le CSS de Gutenberg
Supposons que vous puissiez retirer la bibliothèque de blocs Gutenberg si vous n'utilisez pas de blocs Gutenberg. Utilisez des extraits de code ou des fonctions.php pour ajouter ceci.
Combiner CSS (ou pas)
La taille CSS/JS ne doit pas dépasser 10 Ko si vous les combinez. Dans la plupart des cas, CSS et JavaScript ne doivent pas être combinés car cela est presque impossible.
Désactiver les styles WooCommerce
Par défaut, WooCommerce charge les styles sur votre site Web. Si vous utilisez ces styles uniquement sur les pages de commerce électronique, vous pouvez les désactiver partout. WooCommerce dispose d'une documentation, mais nous recommandons Désactiver WooCommerce Bloat, qui propose de nombreux autres paramètres pour la suppression des ballonnements.
Trouvez d’autres articles de ce type sur Seahawk Media .
