Après quelques mises à jour de votre site web, il se pourrait que votre fichier CSS contienne quelques anciennes propriétés CSS devenues inutiles. En réalisant le tri des propriétés utilisées et non utilisées, vous pourrrez supprimer ces dernières et ainsi optimiser votre feuille de style. En effectuant ce genre d’optimisation, vous améliorerez le temps de chargement de vos pages, et par la même occasion vous améliorerez le référencement de votre site internet.
Comment trouver les propriétés CSS inutilisées ?
Au premier abord, la recherche des propriétés CSS inutilisées peut s’avérer être une tâche compliquée. Cependant, en utilisant un outil adéquat, cette tâche va devenir un jeu d’enfant. Pour celà, je vous invite à découvrir Hélium CSS.
Qu’est-ce qu’Hélium CSS ?
Hélium CSS est un script javascript qui va rechercher les propriétés CSS inutiles. Après avoir installé le script et lancer l’analyse des pages désirées, Hélium CSS va vous délivrer un rapport contenant les propriétés inutiles grâce à un code couleur.
Obtenir Hélium CSS
Vous pouvez découvrir, tester et télécharger Hélium CSS en vous rendant sur cette page : https://github.com/geuis/helium-css
Quelques alternatives à Hélium CSS…
Voici quelques alternatives à Hélium CSS :
- Dust-Me Selectors : extension pour Firefox qui permet de détecter les propriétés CSS inutilisées
- Google Chrome : outil développement -> onglet audit
Si vous le souhaitez, vous pouvez suggérer d’autres alternatives grâce aux commentaires.
* * Cette case à cocher est obligatoire
*J'accepte
Bonsoir,
Ce genre de script, tu peux le tester en prod ou pas?
Ça prend beaucoup de ressources dans le navigateur?
Le rapport est sous quel forme?
Merci d’avance
Bonjour Jerome,
Ce genre de script peut être testé en prod.
Ce genre de script est à désinstaller une fois l’analyse effectuée. En effet, pour faire tourner le script il faut ajouter quelques lignes de codes dans vos pages web. A priori le script n’est pas trop gourmand en ressources dans le navigateur.
Le rapport est sous forme d’une liste avec un code couleur en fonction de l’utilité et du type de CSS. Vous pouvez en savoir d’avantage en vous rendant sur la page d’Hélium CSS citée dans le billet. Des copies d’écran du rapport généré sous visible ici.
Cordialement
Ca a l’air intéressant, c’est vrai que c’est toujours un gros problème de retrouver les propriété qui ne sont plus utilisé !
Bonjour Jerome merci pour cet article, je vais l’applique sur tout mes sites web pour optimiser le code, par contre pour les sites sous wordpress s j’utilise le plugin wp minify, qui me permets de gagner en rapidité . Amicalement