Dans cet article, nous allons voir en détail comment améliorer les performances (vitesse de chargement) de votre site WordPress en réduisant les ressources CSS inutilisées.
Si vous parcourez régulièrement nos articles, vous savez combien les performances de votre site influence fortement votre classement sur les moteurs de recherches et notamment celui de Google. Ce dernier y attache tellement d’importance qui l’a créé, les Core Web Vitals ou signaux web essentiels en français, qui mesure à la fois la vitesse, la stabilité et la réactivité des pages qui composent un site.
L’outil le plus approprié pour connaître les scores de performance d’une de vos pages est d’utiliser PageSpeed Insights de Google. Cet outil vous fournira une large gamme de données, comprenant bien sûr les scores de performance, mais également une multitude de recommandations . Parmi ces recommandations, l’une des plus couramment évoquées est l’importance de réduire les ressources CSS inutilisées.
Qu'est-ce que les ressources CSS inutilisées ?
Avant d’aller plus loin, il est crucial de définir précisément ce que nous entendons par « ressources CSS inutilisées ».
Les ressources CSS inutilisées se réfèrent aux fichiers CSS qui sont chargés sur une page Web, mais dont une portion ou l’ensemble du code n’est pas impliqué dans la mise en page visuelle de ladite page. Cette situation est généralement le résultat de thèmes, plugins ou widgets WordPress qui chargent leurs propres feuilles de style, sans tenir compte de leur nécessité réelle pour la page à afficher.
Ces ressources excessives contribuent à une augmentation du temps de chargement des pages de votre site, car elles requièrent une bande passante supplémentaire et du temps de traitement pour être chargées et interprétées par le navigateur, même lorsqu’elles ne sont pas véritablement utilisées.
Par conséquent, pour optimiser la vitesse et la performance de votre site WordPress, il est fortement recommandé d’éliminer ou de minimiser les ressources CSS superflues.
L'impact des ressources CSS inutilisées sur la performance d'un site
Lorsque nous parlons d’optimisation des performances d’un site web, chaque détail compte, y compris les ressources CSS inutilisées. Au premier abord, ces ressources peuvent sembler sans importance, mais elles ont un impact significatif sur la vitesse et l’efficacité de votre site. Voici pourquoi.
- Augmentation du temps de chargement : Chaque morceau de code ajouté à votre site web, même s’il n’est pas utilisé, augmente le temps qu’il faut pour charger la page. Les navigateurs doivent télécharger et analyser ces codes, ce qui entraîne un retard dans le rendu de la page pour l’utilisateur.
- Ralentissement de la vitesse de rendu : En plus du temps de téléchargement, le navigateur doit aussi passer du temps à analyser et à appliquer le CSS. Si votre feuille de style contient de nombreuses règles inutilisées, cela ralentit le processus de rendu.
- Effet sur l’expérience utilisateur : Une page lente peut entraîner une mauvaise expérience utilisateur. Les visiteurs peuvent quitter le site s’ils estiment que les pages mettent trop de temps à charger, ce qui peut entraîner une augmentation du taux de rebond.
- Impact sur le SEO : Google accorde beaucoup d’importance à la vitesse de chargement des pages dans son algorithme de classement. Un site qui se charge lentement peut se retrouver plus bas dans les résultats de recherche, ce qui peut réduire sa visibilité et son trafic.
- Augmentation de la bande passante : Enfin, même si cela peut ne pas être un problème pour tous les sites, les ressources CSS inutilisées augmentent le volume de données que les visiteurs doivent télécharger. Cela peut être un problème pour ceux qui ont des connexions internet limitées ou lentes.
La réduction des ressources CSS inutilisés peut avoir un impact très significatif sur les mesures des Core Web Vitals suivantes :
- First Contentful Paint (FCP) : C’est le moment où le premier bit de contenu de votre site Web (texte, image ou autre) est visible pour l’utilisateur après que la navigation a commencé. En d’autres termes, c’est la durée entre le moment où l’utilisateur demande la page et le moment où le contenu commence réellement à apparaître. Un FCP rapide indique que la page se charge rapidement et est prête à être utilisée par l’utilisateur.
- Largest Contentful Paint (LCP) : Cette mesure représente le moment où le plus grand élément visible de la page (par exemple, une grande image ou un bloc de texte) est affiché à l’écran. C’est un indicateur important de la vitesse de chargement perçue par l’utilisateur.
- Time to Interactive (TTI) : Cette mesure indique le temps nécessaire pour qu’une page soit complètement interactive, c’est-à-dire que tous les éléments de l’interface utilisateur sont affichés et que l’utilisateur peut interagir avec eux (par exemple, cliquer sur un lien ou remplir un formulaire). Une valeur TTI faible signifie que la page est prête à être utilisée plus rapidement, améliorant ainsi l’expérience utilisateur.
En somme, l’élimination des ressources CSS inutilisées est une étape cruciale pour améliorer la performance de votre site WordPress. Dans les sections suivantes, nous verrons comment vous pouvez identifier et éliminer ces ressources inutiles.
Comment identifier les ressources CSS inutilisées sur votre site WordPress
Il existe différents moyens pour identifier les ressources CSS inutilisées d’une page. Comme on l’a vu en introduction, PageSpeed Insights de Google est le moyen le plus populaire.
Voici la procédure à suivre :
- Allez sur PageSpeed Insights.
- Entrée l’Url de la page que vous voulez vérifier dans la barre d’adresse.
- Attendez la fin de l’analyse.
- Descendez jusqu’à la section intitulé Réduisez les ressources CSS inutilisées.
- Cliquez sur la petit flèche a droite pour afficher toutes les ressources CSS inutilisées de la page.
Vous pouvez aussi utiliser PurifyCSS Online qui va analyser votre page pour trouver les règles CSS qui ne sont pas utilisées. C’est un outil plus technique qui nécessite une certaine familiarité avec le développement web, mais il offre une analyse précise et détaillée.
Comment réduire les ressources CSS inutilisées
Passons maintenant aux choses sérieuses en examinant les divers moyens de réduire les ressources CSS non utilisées d’un site WordPress. Pour ce faire, nous allons utiliser un des nombreux plugins conçus pour accomplir cette tâche. Il est à noter que s’il en existe une multitude, leur qualité varie grandement. Cela est d’autant plus regrettable que les bugs potentiels peuvent perturber considérablement le design et l’affichage de votre site. Toutefois, dans le pire des cas, il vous suffira de désactiver le plugin pour restaurer votre site à son état antérieur.
Réduire les ressources CSS inutilisées avec WP Rocket
WP Rocket est le meilleur plugin de cache pour WordPress. Il offre une gamme de fonctionnalités conçues pour améliorer les performances de votre site web, y compris la possibilité de réduire les ressources CSS inutilisées.
Si vous ne le connaissez pas déjà, je vous invite à consulter notre guide détaillé sur cet excellent plugin.
WP Rocket offre deux méthodes très différentes pour minimiser l’utilisation des ressources CSS superflues : l’approche traditionnelle qui supprime les ressources CSS inutilisées et la méthode asynchrone. Arrêtons-nous sur ce point un moment pour bien comprendre la différence entre les deux méthodes.
Méthode 1 : Supprimer les ressources CSS inutilisées.
Comme on l’a vu en début d’article, un site web typique possède de nombreux fichiers CSS qui sont chargés même s’ils ne sont pas tous utilisés sur chaque page. Cela entraîne des chargements inutiles et ralentis le temps de chargement de la page.
WP Rocket analyse les pages de votre site, identifie le code CSS qui n’est pas utilisé et le supprime pour réduire la taille des fichiers CSS et améliorer les performances de votre site.
Méthode 2 : Chargement Asynchrone du CSS
Le chargement asynchrone du CSS n’est pas une technique de suppression des ressources CSS inutilisées a proprement parlé mais une technique qui permet à votre site web de charger et d’afficher du contenu de base a vos lecteurs, tandis que le reste des fichiers CSS se charge en arrière-plan.
Cela signifie que le navigateur n’a pas besoin d’attendre que tous les fichiers CSS soient chargés pour commencer à afficher le contenu, ce qui va contribuer à améliorer les temps de chargement de la page.
Quelle méthode privilégier ?
Dans tous les cas je vous recommande de tester les deux approches afin de déterminer laquelle produit les meilleurs résultats, étant donné que ces derniers peuvent varier d’un site à l’autre. Cependant, sur la base de mon expérience, si une recommandation devait être formulée, je suggérerais l’adoption de la méthode visant à supprimer les ressources CSS inutilisées, car en règle générale, cette approche est plus efficace.
Néanmoins, le chargement asynchrone du CSS est une méthode de remplacement très utile lorsque la suppression des ressources CSS pose des problèmes d’affichage que vous n’arrivez pas à résoudre.
La procédure à suivre :
- Télécharger, installer et activer WP Rocket : Si vous ne l’avez pas déjà fait, vous pouvez le télécharger le plugin sur le site WP Rocket puis l’installer et l’activer depuis votre tableau de bord WordPress.
- Accéder aux paramètres d’optimisation CSS : Une fois WP Rocket activé, allez dans « Réglages » > «WP Rocket» > « Optimisation des fichiers» > cochez « Optimiser le chargement du CSS ».
Vous devez choisir ensuite l’une des deux méthodes.
Pour la méthode supprimer les ressources CSS inutilisées :
- Activer la suppression du CSS inutilisé : Dans la section « Optimiser le chargement du CSS» cochez la case « Supprimer les ressources CSS inutilisées ». Cela activera la fonctionnalité de WP Rocket qui analyse vos pages pour trouver et éliminer le CSS inutilisé.
- Exclure les CSS nécessaires : En dessous de l’option « Supprimer les ressources CSS inutilisées », vous verrez une zone de texte où vous pouvez exclure certaines classes CSS de la suppression. C’est important, car il y a peut-être des CSS qui ne sont pas utilisés sur une page, mais qui le sont sur un autre.
- Enregistrer les modifications : Une fois que vous avez fait ces ajustements, n’oubliez pas d’enregistrer vos modifications.
<style id="wpr-usedcss">.css-class{example: 0;}</style>
Pour la méthode Chargement asynchrone du CSS :
Dans le même section que celle ci-dessus, choisissez simplement « Chargement asynchrone du CSS » en lieu et place de « Supprimer les ressources CSS inutilisées » et cliquez sur « Enregistrer les modifications ».
Critical CSS de secours
Pour charger de manière asynchrone le CSS de vos pages et articles de votre site, WP Rocket va générer automatiquement en arrière-plan un Critical Path CSS sera qui sera ajouté au prochain chargement de vos pages.
Dans l’éventualité où WP Rocket ne parvient pas à produire correctement le Critical Path CSS, vous disposez d’un champ de secours pour y incorporer votre propre code. Pour élaborer le code CSS nécessaire, vous pouvez utiliser le site : Critical Path CSS Generator.
La procédure est la suivante :
- Désactivez temporairement WP Rocket.
- Entrez l’URL de votre site dans le champ d’adresse du site Critical Path CSS Generator (voir lien ci-dessus).
- Cliquez sur « Generate critical path CSS ».
- Copiez-coller le CSS généré dans le champ « Critical CSS de secours »
- Enregistrer les modifications.
PS : Si vous souhaitez modifier le fichier par la suite, vous pourrez le trouver dans : /wp-content/cache/critical-css/.
Réduire les ressources CSS inutilisées avec Permatters
Dans le secteur des plugins de mise en cache, Perfmatters représente le principal conçurent de WP Rocket. Bien que WP Rocket conserve une avance sur le plan de l’efficacité globale, Perfmatters excelle pour ce qui concerne la réduction des ressources CSS inutilisées.
D’ailleurs, pour prévenir tout conflit potentiel, WP Rocket a mis en place une fonction de désactivation automatique pour l’optimisation du chargement CSS lorsqu’il détecte que vous avez activé cette fonctionnalité sur Perfmatters.
- Télécharger, installez et activez Perfmatters : Vous pouvez le télécharger sur le site officiel de Permatters. Une fois téléchargé et installé, il ne vous reste plus qu’à l’activer comme n’importe quel autre plugin.
- Activer la suppression : Pour supprimer les ressources CSS inutlisée aller sur le tableau de bord de Wordpress puis sur Réglages » > « Permatters » > « Assets » > « CSS » > cochez « Remove Unused CSS ».
Maintenant il est temp de choisir la méthode que vous allez utiliser pour réduire ou supprimer les ressources CSS inutilisées. Mais, avant de commencer, vous devez impérativement supprimer les optimisations déjà existantes en cliquant sur « Clear Used CSS ».
Dans le champ Used CSS Method deux paramètres différents sont disponibles :
Inline : Identique à la méthode utilisée par WP Rocket, le CSS utilisé est intégré au-dessus de la ligne de flottaison dans le code source de votre site.
File : Votre CSS utilisé est mis dans une feuille de style CSS séparée (fichier). Cette méthode offre de meilleurs résultats, car le fichier peut être mis en cache par le navigateur, ce qui signifie que lorsque l’un de vos lecteurs visite une autre page de votre site, le fichier CSS n’a pas besoin d’être téléchargé à nouveau.
En général, la méthode Inline apporte de meilleurs scores aux Core Web Vitals. Tandis la méthode File est plus rapide pour vos lecteurs et c’est bien là tout le paradoxe.
Vous devez ensuite choisir comment vont se comporter vos feuilles de style originales (CSS inutilisé). Cela est généralement utilisé comme une solution de secours pour éviter que le design de votre site ne soit impacté.
Il existe trois options différentes :
Delay (différée) : Cette option constitue le choix par défaut proposé par Perfmatters. Elle permet de reporter le chargement de toutes les feuilles de style CSS non utilisées jusqu’à l’interaction de l’utilisateur.
Async (Asynchrone) : Chaque feuille de style CSS originale (incluant le CSS inutilisé) est chargée de façon asynchrone. Cette procédure permet de se prémunir des apparitions soudaines d’éléments, également désignées par l’expression « apparitions abruptes » ou « pop in » puisque les feuilles de style sont traitées de manière asynchrone durant le chargement de la page. En contrepartie, cette méthode peut générer un LCP/FCP légèrement plus élevé comparé à l’option différée.
Remove (retirer / suppression) : Avec cette stratégie, toutes les feuilles de style CSS d’origine (y compris le CSS non utilisé) sont supprimées. Si cette méthode est la plus efficace, elle va également nécessiter que vous définissiez des exceptions spécifiques pour certains éléments. Cette approche est donc réservée à ceux ayant une expertise avancée en matière de gestion de CSS.
Autres plugins intéressants
Autoptimize
Autoptimize est un plugin polyvalent qui peut agir sur de nombreux aspects de l’optimisation de votre site, y compris la gestion des CSS inutilisés. Il combine, minimise et compresse les scripts, ce qui réduit le nombre de requêtes HTTP et la taille de la page.
Ce plugin est interessant dans sa version gratuite, sa version payante est par contre hors de prix.
Asset CleanUp: Page Speed Booster
Asset CleanUp: Page Speed Booster est un autre plugin intéressant dans sa version gratuite, il offre plusieurs fonctionnalités pour accélérer votre site et notamment la possibilité de réduire les ressource CSS inutilisées.
Précautions à prendre lors de la reduction des ressources CSS inutilisées
Bien que les plugins vu ci-dessus vont faire tout le travail à votre place, la réduction ou la suppression des ressources CSS inutilisées doit être effectué en procédant étapes par étapes. En effet, si elle n’est pas effectuée dans les règles de l’art, elle peut causer des problèmes de fonctionnalité et d’affichage.
Bien que les plugins mentionnés précédemment soient conçus pour effectuer l’essentiel du travail à votre place, il faut tout de même souligner que la réduction ou la suppression des ressources CSS inutilisées requiert une approche séquentielle et méthodique.
En effet, si cette tâche n’est pas exécutée correctement, elle peut causer des problèmes d’affichage et casser totalement le design de votre site, même si en règle générale tout cela peut se régler en désactivant simplement le plugin.
Voici les précautions de base à prendre avant de lancer le processus :
- Faites toujours une sauvegarde
- Avant de commencer, faite une sauvegarde complète de votre site WordPress avec un plugin spécialisé comme UpdraftPlus. Cela vous permettra de le restaurer à son état précédent si quelque chose se passe mal.
- Testez les modifications sur un site de développement
- Plutôt que de tester directement les modifications sur votre site, vous pouvez le faire sur un clone. Certains hébergeurs web comme O2switch offre la possibilité de créer des préproductions ou des clones de votre site. Cela vous permettra de voir les impacts de vos modifications sans affecter votre site principal. Si votre hébergeur ne propose pas cette option, vous pouvez la réaliser là encore avec UpdraftPlus (Voir notre tutoriel).
- Ne sacrifiez pas l’expérience utilisateur pour des performances optimales
- L’objectif de réduction des ressources CSS inutilisées est d’améliorer les performances de votre site. Cependant, il ne faut pas sacrifier l’expérience utilisateur dans ce processus. Assurez-vous que votre site reste facilement navigable et visuellement attrayant pour votre public.
Résumé - FAQ
Les ressources CSS inutilisées font référence au code CSS chargé par votre site web qui n’est pas utilisé pour afficher la page actuelle. Ces règles superflues peuvent ralentir le temps de chargement de votre site, ce qui peut affecter votre classement SEO et l’expérience utilisateur.
Les ressources CSS inutilisées peuvent ralentir le temps de chargement de votre site car votre serveur doit traiter et transmettre ce code inutile à chaque chargement de page.
Il existe plusieurs outils pour identifier les ressources CSS inutilisées, tels que PageSpeed Insights ou PurifyCSS,. Ces outils analysent votre site et générer un rapport détaillé des ressources CSS inutilisées.
Si elle n’est pas effectuée correctement, l’élimination des ressources CSS inutilisées peut parfois causer des problèmes d’affichage sur votre site. Il est donc recommandé de faire une sauvegarde de votre site avant d’effectuer des modifications et de tester soigneusement votre site après avoir réalisé l’opération
Google ne pénalise pas directement les sites pour avoir des ressources CSS inutilisées. Cependant, avoir trop de CSS inutilisé peut affecter négativement la vitesse de chargement de votre site, ce qui est un facteur de classement important pour Google. De plus, Google valorise l’expérience utilisateur, et un site qui se charge rapidement offre généralement une meilleure expérience utilisateur. Par conséquent, bien que ce ne soit pas une « pénalisation » directe, avoir un excès de CSS inutilisé peut indirectement affecter votre classement dans les résultats de recherche de Google.
Conclusion
La réduction ou la suppression des ressources CSS inutilisées au sein de WordPress offre des avantages non négligeables. Cette démarche permet non seulement d’améliorer le temps de chargement de votre site, mais elle contribue également à offrir une meilleure expérience utilisateur et à optimiser votre positionnement sur les moteurs de recherche.
En utilisant des plugins spécifiques vous serez en mesure d’optimiser votre CSS facilement en un rien de temps et ferez en sorte que votre site fonctionne à son plein potentiel.
Si vous avez des interrogations ou si vous rencontrez des complications, n’hésitez surtout pas à les poster dans la section commentaires ci-dessous.
