Supprimez les ressources CSS inutilisées

Comme toujours, vous êtes passé par l’outils de Google PageSpeed Insights pour mesurer le temps de chargement de votre site Internet. Parmi ses recommandations l’outil vous demande de supprimer les ressources CSS inutilisées. Cet article est là pour vous y aider.

Petit rappel tout de même, vous êtes sur le site de l’agence web 36 Pixels, spécialisées dans la réalisation de site sous WordPress, en utilisant Vue.js et avec pour objectif de maximiser la performance, le temps de chargement de ces sites Internet. Pourquoi ? Parce que la vitesse de chargement d’un site Internet est prise en compte pour le référencement et fait bien souvent la différence entre un site qui se retrouvera en première page de Google, et un autre qui sera relayé dans les pages profondes. Bref, si vous avez besoin d’améliorer le temps de chargement de votre site Internet, parcourez nos articles ou contactez-nous.

Sachez que cet article fait partie de toute une série sur l’amélioration de sa note Google PageSpeed Insights. Vous y retrouverez tous les conseils pour améliorer le chargement de votre site et optimiser votre référencement.

Dans cet article nous ferons le point sur.

• Qu’est qu’une ressource CSS ?
• Comment supprimer une ressource CSS inutilisée ?
• Comment Supprimer une ressource CSS inutilisée sous WordPress ?

Qu’est-ce qu’une ressource CSS ?

Dans le monde des sites Internet, CSS signifie Cascading Style Sheet, feuille de style en cascade en Français. Je dois vous avouer que cette définition n’est guère explicite et que, pour vous comme pour moi, il va en falloir un peu plus pour savoir de quoi il s’agit vraiment. Le CSS est un langage de programmation inventé dans les années 1990 et dont les standards sont définis par la W3C, le World Wide Web Consortium. C’est un langage de programmation qui est utilisé sur tous les sites Internet depuis les années 2000. Il permet de définir la mise en forme sur votre site. C’est grace à ce langage par exemple que l’on détermine la couleur, la taille ou la graisse des titres d’une page, la répartition des éléments à l’intérieur de la page, les couleurs de fond sur les boutons ou autre. Bref, tout le design de votre site est défini grace à un ou plusieurs fichiers CSS appelés sur votre page. Cette définition un peu plus précise nous permet de comprendre le concept de feuille de style mais pas encore celui de cascade. Le principe de la cascade en CSS, pour l’expliquer simplement, est l’idée qu’une balise à l’intérieur d’une autre balise va hériter des propriétés CSS de cette dernière. Les propriétés CSS des balises découlent des propriétés CSS de leur balises parentes.

Dans cet article, nous parlerons donc de feuille de style, de fichier CSS, ou de ressource CSS comme le suggère Google.

Comment supprimer une ressource CSS non utilisée ?

Première information importante, les feuille de style CSS sur votre site Internet sont souvent utilisées sur toutes vos pages. Aussi, si une ligne de CSS n’est pas utilisée sur une page, cela ne veut pas dire qu’elle ne l’est pas sur une autre. La supprimer pourrait alors potentiellement endommager votre site. Cela commence déjà à compliquer les choses. Identifier les lignes CSS une à une non utilisées n’est donc pas simple, voir même impossible. Il n’existe pas non plus de sites Internet proposant ce genre de service.

Il y a un point sur lequel vous pouvez travailler pour améliorer le chargement de votre site, c’est d’identifier les services associées à vos ressources CSS. Il est par exemple possible que votre site possède un fichier CSS pour la gestion de vos formulaires ou pour un carrousel. Ainsi, si sur une page, aucun carrousel n’est présent, il est possible de créer un algorithme qui ira exclure le fichier CSS associé sur cette page spécifiquement.

Cette méthode a une limitation et un défaut présentés ci-dessous.

Ne pas fusionner ses fichiers CSS en HTTPS

Cette méthode de suppression de ressource CSS inutilisée présentée ci-dessus ne peut marcher que si votre page présente des fichiers CSS séparés. Ce n’est pas toujours le cas sur votre site, surtout si vous avez fusionné l’ensemble de vos fichiers CSS.

Fusionner ses fichiers CSS est en effet une méthode pour réduire le temps de chargement de son site qui a été préconisée pendant des années, avant l’arrivée du HTTPS et du HTTP2. Sans entrer dans les détails, sachez que cette méthode d’optimisation peut maintenant être contre productive et que si l’accès à votre site est sécurisé, mieux vaut ne pas la mettre en place.

Une optimisation gabarit de page par gabarit de page

Le défaut de la méthode présentée ci-dessus, c’est que la résolution des ressources CSS inutilisées ne s’appliquera que sur le gabarit de page sur lequel vous avez travaillé. Votre site est forcément composé de plusieurs gabarits (page d’accueil, hub articles, page article etc.), il faudra donc étudier chaque gabarit pour résoudre les problèmes individuellement. Par ailleurs, sur certains gabarits, vous ne trouverez pas forcément de feuille de style CSS à supprimer.

Comment supprimer une ressource CSS non utilisée sur WordPress ?

WordPress est souvent particulièrement concerné par le problème de ressources CSS non utilisées. Par exemple si vous avez installé un plugin pour mettre en place un carrousel sur votre site Internet, un fichier CSS spécifique sera sans doute appelé sur chacune des pages de votre site WordPress, qu’un carrousel soit présent ou non sur votre page. Et comme ce fichier est récupéré dès le début du chargement de votre site Internet, cela a un impact direct sur la vitesse de votre site WordPress.

Le tableau parait donc bien noir sur WordPress, mais il y a tout de même un bonne nouvelle, supprimer les ressources CSS non utilisées s’avère moins compliqué qu’il n’y parait.

Premier point positif, les gabarits sont aisément identifiables sous WordPress. Pour le trouver, Il suffit de regarder le code source, dans la balise <body> pour savoir à quel fichier et quel type de page il correspond. Si vous modifiez ce gabarit de page, ce seront toutes les pages utilisant ce modèle qui seront optimisées.

Deuxième point positif, avec le système de plugin rajoutant des fonctionnalités à WordPress, un fichier CSS correspond souvent à une fonctionnalité. Si vous n’avez pas installé un plugin pour fusionner vos fichiers CSS, vous devriez pouvoir aisément savoir à quel fichier CSS correspond telle ou telle fonctionnalité. Il ne reste plus alors qu’à déterminer si cette fonctionnalité est nécessaire sur le gabarit de page et de le supprimer si ce n’est pas le cas.

Au niveau du code, il vous faudra utiliser la fonction wp_deregister_style() qui vous permettra comme son nom l’indique de supprimer une feuille de style CSS sur WordPress.

Ensuite, il vous faudra appeler cette fonction en fonction du type de gabarit de page à modifier, sous WordPress, c’est ce que l’on appelle les conditionnal Tags. Vous pourrez alors programmer que si c’est tel ou tel gabarit qui est appelé, l’appel de tel ou tel fichier CSS sera bloqué.

Que faire dans le cas d’un thème WordPress premium

Vous utilisez un thème premium WordPress sur votre site ? Vous êtes alors particulièrement sujet aux problèmes des ressources CSS inutilisées. La raison est simple, un thème premium est conçu pour répondre à tous les besoins, et contient donc de nombreuses fonctionnalités. Ces fonctionnalités requièrent des lignes de code de CSS, pas forcément facilement identifiables et qui sont souvent appelées sur toutes les pages. Ainsi, votre site contient donc du CSS qui ne sert à rien et qui ralentit le temps de chargement de votre site WordPress. Il n’existe malheureusement pas de solution dans ce cas de figure et le mieux sera alors de vous faire faire développer un thème sur mesure.

Bloquer les ressources CSS inutilisées, une solution par toujours simple à mettre en oeuvre

Vous l’avez compris, répondre à la demande de Google PageSpeed en supprimant les ressources CSS inutilisées n’est pas forcément simple. Le gain peut être significatif et cela pourrait être intéressant d’investir du temps sur cette recommandation.

Comme toujours, si à la suite des conseils prodigués ici, vous n’arrivez toujours pas à mettre en place les solutions présentées, ou simplement pour vous assurer que le travail est bien fait, n’hésitez pas à nous contacter.