Supprimer les ressources CSS inutilisées

Le rapport PageSpeed analyse toutes les feuilles de style de vitre site web, et s'il trouve un fichier CSS de plus de 2ko de code inutilisé, il affichera cette recommandation :

Cette optimisation nécessite un développement personnalisé pour être pleinement satisfaite. WP Rocket ne peut pas résoudre ce problème pour vous.

Le fait d'avoir du code CSS non utilisé va :

  • Augmenter inutilement le transfert de données 
  • Ralentir le rendu de la page, car le navigateur devra lire tous les CSS avant de les appliquer

Pour en savoir plus sur cette recommandation, rendez-vous ici : https://web.dev/unused-css-rules/

Pourquoi cela se produit-il ?

Lorsque vous utilisez des thèmes et extensions WordPress, ils contiennent en général beaucoup plus de code CSS que nécessaire pour chaque page, car l'auteur du thème ne peut pas deviner comment l'utilisateur construira son site. Ces thèmes ont de nombreux blocs, styles et habillages différents. 

Très souvent, les thèmes utilisant des constructeurs visuels contiennent des bibliothèques d'éléments tels que des grilles, des accordéons, des sliders, etc. et tout ce CSS peut finir par être chargé, qu'il soit utilisé ou non. 

Ainsi, par exemple, une page d'accueil peut comporter un bloc affichant les derniers articles publiés, sans que pages intérieures ne l'utilisent. Néanmoins, la page d'accueil et les pages intérieures ont souvent la même feuille de style. 

Cela signifie que le CSS d'une page donnée devra être chargé sur la page d'accueil et vice versa, ce qui ajoute du code inutile.  

Comment y remédier ?

C'est pratiquement impossible d'automatiser cela avec précision, et même difficile à faire manuellement. 

Cet article explique pourquoi :
https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/

En activant l'option Optimiser le chargement du CSS, WP Rocket va ajouter les styles indispensables à l'affichage de première visualisation (first paint) de votre page en inline - le Critical Path CSS - et va différer le chargement des fichiers CSS. 

Cela va partiellement répondre à la recommandation de Google. Mais nous ne pouvons pas supprimer les parties non utilisées. 

Donc, pour l'instant, pour vraiment répondre à cette recommandation, il faudrait coder spécifiquement le CSS de votre site

Si des fichiers entiers sont chargés sur certaines pages alors qu'ils ne sont pas nécessaires, vous pouvez les supprimer en utilisant l'extension Asset CleanUp.

Cela a-t-il répondu à votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez réessayer plus tard.