Optimiser vos CSS en supprimant les propriétés inutiles

7 juillet 2013 | 5 Commentaires Plus

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.

Les requêtes qui ont permis d'accéder à cet article:

  • analyse css code mort

Tags: , ,

Catégorie: Référencement, Scripts gratuits / Frameworks

Commentaires (5)

Trackback URL | Flux RSS des commentaires

  1. @JNG_WEB dit :

    Optimiser vos CSS en supprimant les propriétés inutiles http://t.co/sV3QLgnr21

  2. Jerome dit :

    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

    • Jerome dit :

      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

  3. 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é !

  4. piece mobile dit :

    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

Laisser un commentaire

CommentLuv badge