Lors d'un test de vitesse, PageSpeed Insights la nécessité de supprimer du CSS inutilisé. Souhaitez-vous supprimer ce CSS inutilisé de votre site WordPress pour accélérer son chargement et améliorer ses performances ?
De nombreux thèmes et extensions WordPress ajoutent du code CSS inutile. Supprimer ce code CSS inutilisé améliore les performances et l'expérience utilisateur de votre site. Cet article vous explique comment le supprimer facilement sans perturber son fonctionnement.
Supprimer le CSS inutilisé dans WordPress de différentes manières
Si vous souhaitez réduire la quantité de CSS inutilisée sur votre site WordPress, vous pouvez essayer différentes méthodes.
Bien qu'il soit possible de supprimer tout le CSS inutile dans WordPress, ce serait une tâche complexe. De plus, en raison du fonctionnement interne de WordPress, certains utilisateurs pourraient avoir des difficultés à trouver et à supprimer ce CSS superflu.
Dans ce cas, nous vous montrerons différentes façons de supprimer le CSS inutilisé, et vous pourrez choisir la méthode qui correspond le mieux à vos besoins.
Trouvez vos fichiers CSS les plus volumineux
Pour visualiser vos fichiers CSS les plus volumineux, triez votre rapport de couverture par « Visualisation de l'utilisation » dans les outils de développement Chrome. Les URL contiennent généralement le nom du plugin, du thème ou du code tiers qui a généré le fichier. Vous pourrez ainsi identifier plus facilement les éléments à optimiser.
Supprimer le CSS inutilisé et placer le CSS utilisé dans un fichier séparé
Il est plus rapide de créer un fichier séparé car la taille du code HTML n'augmente pas et ce fichier peut être mis en cache, contrairement à l'intégration directe. De plus, il est chargé dans un fichier séparé par le CSS de LiteSpeed Cache et FlyingPress. Enfin, WP Rocket optimise le score plutôt que le nombre de visiteurs, contrairement à la plupart des autres extensions qui utilisent des fichiers séparés pour des raisons de performance.
Évitez les plugins qui ajoutent du CSS
Des outils comme Query Monitor et WP Hive sont utiles, mais ils n'indiquent pas toujours si une extension ajoute du CSS/JS supplémentaire à l'interface publique. Par conséquent, l'impact réel d'une extension ne peut être observé qu'après avoir testé à nouveau votre site web suite à l'ajout de contenu. Les extensions les plus souvent responsables sont les galeries, les diaporamas, les formulaires de contact, les commentaires, le chat, les calendriers et les extensions de création de pages liées au design.
Utilisez un thème léger + un constructeur de pages.
L'interface utilisateur est surchargée de CSS, de JavaScript et de polices. Par conséquent, un site web lent est inévitable lorsqu'on y ajoute des extensions de création de pages comme Elementor Pro et Ultimate Addons.
Activer les optimisations CSS dans les constructeurs de pages
Parmi ces paramètres figurent les options expérimentales d'Elementor et les paramètres de performance de Divi, qui proposent plusieurs solutions pour réduire la taille du CSS (par exemple, un chargement optimisé des ressources et du CSS dans Elementor et du CSS dynamique dans Divi). En règle générale, des performances accrues vous permettront d'obtenir de meilleurs résultats.
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 et Font Awesome, consultez la documentation de Perfmatters ou d'Elementor.
Supprimer le CSS dans les plugins de déchargement des ressources
Avec Perfmatters, vous pouvez désactiver les fichiers CSS/JS (ou des plugins entiers) lorsqu'ils ne sont pas nécessaires, supprimer les fichiers CSS inutilisés et remplacer les iframes YouTube par des images de prévisualisation. Les fichiers CSS inutilisés restants peuvent être rendus plus accessibles grâce à ces différentes méthodes. Le plugin Asset CleanUp permet également de désactiver les fichiers CSS/JS.
Images de fond à chargement différé trouvées dans CSS
La plupart des plugins de cache ne chargent pas les images d'arrière-plan en différé si elles sont placées dans un fichier CSS séparé.
Par conséquent, si vous souhaitez charger les images d'arrière-plan de manière différée, veuillez consulter la documentation de votre extension de cache. FlyingPress intègre une classe d'assistance `lazy-bg` que vous pouvez ajouter à la classe CSS correspondante, contrairement à WP Rocket qui requiert du code HTML en ligne. Vous pouvez ajouter manuellement cette classe d'assistance, ou Optimole propose une solution utilisant les sélecteurs CSS.
Supprimer le CSS de Gutenberg
Vous pouvez désactiver la bibliothèque de blocs Gutenberg si vous n'utilisez pas les blocs Gutenberg. Utilisez les extraits de code ou le fichier functions.php pour ajouter cette fonctionnalité.
Combiner le CSS (ou non)
La taille des fichiers CSS/JS combinés ne doit pas dépasser 10 Ko. Dans la plupart des cas, il est déconseillé de combiner CSS et JavaScript, car cela s'avère quasiment impossible.
Désactiver les styles WooCommerce
Par défaut, WooCommerce applique des styles à l'ensemble de votre site web. Si vous n'utilisez ces styles que sur vos pages e-commerce, vous pouvez les désactiver partout. WooCommerce propose une documentation, mais nous vous recommandons l'extension « Disable WooCommerce Bloat », qui offre davantage d'options pour optimiser votre site.
Retrouvez d'autres articles de ce type sur Seahawk Media.
