Table des matières
Explication du problème « Réduisez les ressources CSS inutilisées »
Rappelons d’abord ce qu’est CSS. C’est un langage qui permet de contrôler l’apparence graphique des éléments sur une page web. Couleurs, tailles, marges, etc. C’est donc essentiel à tout site web.
Quand vous analysez les performances techniques d’un site avec PageSpeed Insights, il vous répond souvent :
Réduisez les ressources CSS inutilisées.
Réduisez les règles inutilisées des feuilles de style et différez les ressources CSS non utilisées pour le contenu au-dessus de la ligne de flottaison afin de réduire la quantité d’octets consommés par l’activité réseau.
Il a parfaitement raison. Beaucoup de site font charger au navigateur du code CSS qu’ils n’utiliseront pas sur cette page, ou même pas à l’échelle de tout le site.
Par exemple, sur une page d’accueil, PageSpeed trouve 140ko de CSS inutilisé :
En l’occurrence, il y a là 2 feuilles de style CSS.
La première n’utilise que 7,8 ko sur les 127,8 ko qu’elle charge.
La deuxième n’utilise que 0,3 ko sur 13.
Soit 99,22 % de CSS inutilisé. Cette situation n’a rien d’exceptionnel. Elle est même très banale.
Le grand gaspillage de CSS
Sur WordPress, les meilleurs constructeurs de pages, comme Elementor, ont le même défaut. Ils chargent du CSS en bloc, sans se poser la question de savoir si ce CSS sera utilisé sur le site.
Quand, en plus de ça, vous utilisez des addons, comme Ultimate Addons for Elementor, ou Happy Addons for Elementor, la situation empire. Ces bijoux d’ergonomie sont des enfers de l’opti.
Idem avec Elementor Pro.
Un site qui utiliserait Elementor, Elementor Pro, et un Add-on, se retrouverait avec entre 300 et 500 ko de CSS à charger sur chaque page. Du CSS dont 90% ne sera JAMAIS utilisé sur aucune page.
Idem avec les thèmes. Les plus complexes, les plus riches en fonctionnalités, sont aussi les plus lourds.
Par exemple, j’utilise surtout Astra, et Astra Pro. Eh bien les deux vont encore ajouter des centaines de ko de CSS, pour n’en utiliser qu’une partie.
Même remarque avec WooCommerce, qui va charger globalement du CSS et du JS… qui ne sera utilisé que sur les pages produit.
Ou, WP Forms et d’autres plugins de formulaire, vont charger le code CSS et JS des formulaires sur… toutes les pages, y compris les 99% qui ne contiennent aucun formulaire.
Ce gaspillage généralisé est totalement stupide.
Les développeurs pourraient corriger cela assez facilement. En faisant en sorte que le CSS ne se compose QUE du code nécessaire pour afficher les widgets utilisés. Mais, ils ne font pas le job. Donc c’est à vous de le faire.
Si vous n’avez pas envie de gérer vous-même le problème du CSS inutilisé, je peux le faire pour vous :
Service d’optimisation des performances
Solutions pour réduire le CSS
Mettre en place le critical CSS
La meilleure solution pour régler le problème du CSS inutilisé consiste à mettre en place un système de critical CSS.
Ces systèmes se basent sur une idée simple : il faut séparer le CSS directement utile pour afficher le premier écran de chaque page, du reste du CSS, utilisé ailleurs et plus tard.
On va donc charger d’abord le CSS « critique », urgent pour effectuer le rendu graphique.
Et reporter le chargement du reste du CSS à la fin du chargement de la page.
En général, cette opération n’est pas facile à faire à la main. Car un site peut utiliser plusieurs types de maquette, donc de CSS, pour chaque type de page :
- page (au sens de WordPress)
- article
- catégorie d’articles
- page
- produit
- catégorie de produits
- Custom Post Type avec ACF
- etc
Pire : un même type de page peut très bien nécessiter du CSS critique différent de page en page.
Bref, cette diversité rend impossible la création d’un CSS critique global, fait à la main.
Les plugins de génération de critical CSS
Heureusement, il existe des plugins qui font très bien le job.
Mon préféré est LiteSpeed, une solution d’optimisation globale, très riche en fonctionnalités.
LiteSpeed permet non seulement de générer du critical CSS, mais aussi du « unique CSS« , le CSS unique à chaque page ou type de page. La combinaison des deux a un impact encore plus fort sur la réduction du CSS inutilisé.
D’autres plugins feront la même chose :
- Autoptimize en version premium, combiné avec CriticalCSS.com
- WP Rocket
- PerfMatters
Pour des développeurs plus experts, il existe aussi ces solutions que je n’ai pas testées :
Eliminer certaines ressources CSS très inutilisées
Elementor etc
En optimisant plusieurs de mes sites faits avec Elementor, Elementor Pro et Ultimate Addons, je me suis rendu compte que je n’utilisais parfois que 3 ou 5 widgets sur une centaine de widgets disponibles. Dans ce cas, à quoi bon charger tout ce CSS pour rien ?
J’ai donc tout simplement supprimé, ici Elementor Pro, là tel Addon. Mes widgets, j’en ai refait à la main des équivalents. Cela m’a permis d’économiser des centaines de ko de CSS inutile.
Si vous utilisez Elementor, sachez qu’il y a une page peu connue, dans le menu de l’admin : Elementor > Gestionnaire d’élément.
Ce gestionnaire d’élément vous liste les widgets, et montre s’ils sont utilisés ou pas.
Font Awesome
Une autre plaie de l’optimisation du CSS, c’est le célèbre Font Awesome.
Vous utilisez une seule de ses icônes ? Il va quand même vous charger le code de centaines d’autres. Au total, Font Awesome 5 peut ajouter 200-300 ko de CSS inutilisé sur votre site. Du délire ! Une version payante vous permet d’optimiser, mais pour quelques icônes, cela vaut-il le coup ?
Bref, si vous n’utilisez que quelques icônes à l’échelle du site, supprimez Font Awesome, et remplacez les icônes par des images, au format SVG ou PNG ou GIF.
Autres ressources
Appliquez le même raisonnement à toutes les autres ressources.
Tel widget apporte-t-il quelque chose de vital à votre site ? Pourriez-vous le remplacer par quelque chose de plus simple ?
L’impact de la réduction du CSS sur les Core Web Vitals
La réduction du CSS améliorera considérablement vos Core Web Vitals, en général.
Cette réduction aura un impact sur :
- Le First Contenful Paint. En chargeant peu de CSS, le premier élément s’affichera plus vite.
- Le Largest Contentful Paint. Idem.
- Le Speed Index.
Autres conséquences non-négligeables :
- Votre serveur travaillera moins.
- De la bande passante sera économisée.
- La planète sera sauvée.
Pour le dernier, je suis pas 100% sûr.
Besoin d’aide pour optimiser votre CSS ? Je m’en occupe :
Service d’optimisation des performances
