Lors d'un test de vitesse, vous avez peut-être remarqué que PageSpeed Insights vous avertissait de la suppression des feuilles de style CSS inutilisées. Souhaitez-vous supprimer les feuilles de style CSS inutilisées de votre site WordPress afin d'accélérer son chargement et d'obtenir de meilleures notes de performance ?
Il y a beaucoup de code CSS qui est ajouté par les thèmes et les plugins WordPress et 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 vous montrer dans cet article comment vous pouvez facilement supprimer le code CSS inutilisé de votre site Web WordPress sans que celui-ci ne soit endommagé.
Suppression des CSS inutilisés dans WordPress par différents moyens
Si vous souhaitez réduire la quantité de CSS inutilisée sur votre site Web WordPress, vous pouvez essayer plusieurs méthodes différentes.
Bien qu'il soit possible de supprimer toutes les CSS inutiles dans WordPress, ce serait une tâche assez difficile. De plus, en raison de la façon dont WordPress fonctionne en coulisses, il peut être difficile pour certains utilisateurs de trouver et de supprimer les CSS inutiles.
Dans ce cas, nous allons vous montrer différentes façons de supprimer les CSS inutilisés, et vous pourrez choisir la méthode la plus adaptée à vos besoins.
Trouvez vos fichiers CSS les plus volumineux
Pour voir vos fichiers CSS les plus volumineux, triez votre rapport de couverture par "visualisation de l'utilisation" dans Chrome Dev Tools. Les URL comprennent généralement le nom du plugin, du thème ou du code tiers qui a généré le fichier. Par conséquent, il vous sera désormais plus facile de déterminer ce qui doit être optimisé.
Supprimez 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 du HTML n'augmente pas, et le fichier peut être mis en cache, contrairement à l'inlining. Il est également chargé dans un fichier séparé par les CSS et FlyingPress de LiteSpeed Cache. En outre, WP Rocket optimise pour les scores plutôt que pour les visiteurs, contrairement à la plupart des autres plugins, qui utilisent des fichiers différents parce qu'ils sont plus rapides.
Évitez les plugins qui ajoutent des 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, l'impact total du plugin ne peut être observé qu'après avoir re-testé votre site Web après avoir ajouté du contenu au front-end. Les coupables les plus courants sont les galeries, les sliders, les formulaires de contact, les commentaires, le chat, les calendriers et les plugins de construction de pages liés au design.
Utilisez un thème léger et un constructeur de pages.
L'interface est surchargée de CSS, de JavaScript et de polices de caractères. Par conséquent, un site Web lent est garanti lorsqu'il est combiné avec des plugins de construction de pages supplémentaires tels que Elementor Pro et Ultimate Addons.
Activer les optimisations CSS dans les Page Builders
Parmi ces paramètres figurent les expériences d'Elementor et les paramètres de performance de Divi, qui comprennent plusieurs options permettant de réduire la taille des CSS (par exemple, amélioration du chargement des actifs et des CSS dans Elementor et des CSS dynamiques dans Divi). En général, vous obtiendrez de meilleurs résultats si vous activez davantage de performances.
Désactiver les icônes si vous ne les utilisez pas
Si vous n'utilisez pas les icônes d'Elementor, désactivez-les. Pour Google Fonts + Font Awesome, vous pouvez le faire dans Perfmatters ou dans la documentation d'Elementor.
Suppression des CSS dans les plugins de déchargement d'actifs
Grâce à Perfmatters, vous pouvez désactiver les CSS/JS (ou des plugins entiers) lorsqu'ils ne sont pas nécessaires, supprimer les CSS inutilisés et remplacer les iframes YouTube par des images de prévisualisation. Toutes ces méthodes permettent de rendre plus accessibles les CSS inutilisés restants. Les fichiers CSS/JS peuvent également être désactivés avec le plugin Asset CleanUp.
Chargement paresseux des images d'arrière-plan trouvées dans les CSS
La plupart des plugins de mise en cache ne chargeront pas paresseusement les images d'arrière-plan si elles se trouvent dans un fichier CSS distinct.
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'aide lazy-bg que vous pouvez ajouter à la classe CSS supplémentaire, contrairement à WP Rocket qui nécessite du HTML en ligne. Une classe d'aide lazy-bg peut être ajoutée manuellement, ou Optimole a une solution utilisant des sélecteurs CSS.
Supprimer les CSS de Gutenberg
Supposons que vous pouvez déquêter la bibliothèque de blocs Gutenberg si vous n'utilisez pas les blocs Gutenberg. Utilisez Code Snippets ou functions.php pour ajouter ceci.
Combiner les CSS (ou non)
La taille des CSS/JS ne doit pas dépasser 10 Ko si vous les combinez. Dans la plupart des cas, il ne faut pas combiner CSS et JavaScript, car cela est presque impossible.
Désactiver les styles de WooCommerce
Par défaut, WooCommerce charge les styles sur l'ensemble de votre site web. Si vous n'utilisez ces styles que sur les pages d'eCommerce, vous pouvez les désactiver partout. WooCommerce dispose d'une documentation, mais nous vous recommandons de désactiver WooCommerce Bloat, qui propose beaucoup plus de paramètres pour la suppression des ballonnements.
Retrouvez d'autres articles de ce type sur Seahawk Media.
