Si votre site WordPress utilise un thème WordPress payant ou un thème populaire du référentiel officiel des thèmes WordPress, il est probable que le thème soit développé pour une variété de cas d'utilisation. Et vous n'utilisez peut-être qu'un petit ensemble de toutes les fonctionnalités disponibles dans le thème.
Dans ce cas, votre site charge beaucoup de CSS inutilisés qui ne sont pas nécessaires pour styliser les pages de votre site. Par exemple, le thème WordPress que vous utilisez peut également avoir des styles pour les pages WooCommerce, mais si vous n'exécutez qu'un blog sur votre site WordPress, vous n'utilisez pas le CSS inclus pour les pages WooCommerce sur votre site et ne sert donc pas CSS aux utilisateurs.
Si vous avez testé votre site Web sur l'outil Google Pagespeed, vous savez probablement déjà que votre site présente des problèmes CSS inutilisés. Dans ce guide, nous allons vous montrer comment vérifier d'abord les CSS inutilisés, puis utiliser un outil gratuit pour supprimer les CSS inutilisés de votre site WordPress.
Comment vérifier les CSS inutilisés
Google Chrome DevTools (celui que vous voyez lorsque vous cliquez sur l'option "Inspecter" dans le menu contextuel) dispose d'une fonctionnalité de couverture dans l'onglet Sources. Vous pouvez utiliser l'option Couverture pour rechercher les CSS et JS inutilisés que votre site Web charge.
- Ouvrez votre site Web dans Chrome sur le bureau.
- Faites un clic droit sur un espace vide de votre site et sélectionnez Inspecter depuis le menu contextuel.
- Clique sur le Sources onglet, appuyez sur Ctrl + Maj + P pour ouvrir une fenêtre de commande, puis tapez couverture et sélectionnez Commencez à instrumenter la couverture et rechargez la page à partir des commandes disponibles.
- Sous l'onglet Couverture, cliquez sur le Filtre d'URL et entrez le domaine racine de votre site ici pour afficher uniquement les fichiers CSS/JS internes.
Vérifiez le Octets inutilisés colonne pour voir le pourcentage de données chargées dans un fichier CSS/JS à partir de votre thème.
- Cliquez sur un fichier CSS pour afficher le CSS inutilisé (marqué de barres rouges) chargé par votre site. Le CSS utilisé sur la page actuelle sera affiché avec des barres vertes.
Une fois que vous avez analysé tous les CSS inutilisés en cours de chargement sur votre site Web, il est temps de les supprimer. Il existe plusieurs outils gratuits disponibles pour supprimer les CSS inutilisés des pages Web. Vous trouverez ci-dessous l'un des outils les plus populaires que j'ai testés et utilisés sur mes propres projets.
Utilisez PurifyCSS en ligne pour supprimer les CSS inutilisés
Habituellement, vous pouvez trouver un plugin pour presque tout dans WordPress. Mais pour supprimer les CSS inutilisés, malheureusement, il n'y a pas un seul plugin disponible. Nous utiliserons donc des outils manuels non spécifiques à WordPress pour supprimer les CSS inutilisés de votre site.
PurifyCSS est le plus outil convivial pour les non-développeurs vous pouvez trouver pour traiter les CSS inutilisés. L'outil dispose d'une interface utilisateur simple pour permettre aux utilisateurs de fournir soit l'URL du site Web, soit le code HTML et CSS. Pour WordPress, nous utiliserons l'option URL et fournirons des liens vers toutes sortes de pages de votre site pour permettre à l'outil de récupérer les CSS de tous et d'optimiser les CSS inutilisés.
Voici une liste rapide des pages que vous devriez mettre dans l'outil :
- Page d'accueil URL
- URL de page de publication multiples de chaque catégorie sur votre site
Cela permet de s'assurer que CSS est inclus pour tous les éléments de publication.
- Contact, À propos, Confidentialité et toutes sortes de pages différentes que vous pouvez avoir sur votre site.
- Page d'archive, Page de recherche, Pages d'auteur
- Pages de type de publication personnalisées
Astuce chaude : Créez un article/une page « fonctionnalités » avec tous les éléments de thème que vous utilisez ou pourriez utiliser à l'avenir, tels qu'un tableau, une galerie d'images, un code, des listes pré-ordonnées, des listes non ordonnées, des formulaires, des onglets, des accordéons, des blocs Gutenberg que vous utilisez généralement , etc.
Utilisez cette URL de publication « caractéristiques » dans l'outil PurifyCSS en ligne pour vous assurer que le CSS pour les éléments couramment utilisés est inclus.
Frappez le Nettoyer CSS une fois que vous avez ajouté tous les types d'URL pertinents de votre site dans l'outil PurifyCSS Online.
Copiez le nouveau CSS généré par l'outil et utilisez-le sur votre site. Assurez-vous sauvegardez le style.css d'origine et d'autres fichiers CSS dans votre thème avant de remplacer le nouveau CSS généré par PurifyCSS.
Pointe: Vous pouvez soit utiliser l'éditeur de thème WordPress intégré pour modifier les fichiers CSS de votre thème, soit utiliser un programme FTP/SFTP pour vous connecter au serveur et modifier confortablement les fichiers à l'aide d'un éditeur de bloc-notes.