Nettoyer, balayer, optimiser votre fichier CSS pour le SEO

Article rédigé le 10 janvier 2013 à 9:14 RaphSEORéférencement

Bonjour à tous, aujourd’hui un petit billet qui va faire un mix entre bonnes pratiques et outils.

Vous le savez probablement, les performances d’un site n’ont jamais été aussi importantes tant dans le processus de référencement que dans celui de l’expérience utilisateur et ce qui en découle.

C’est pourquoi je vais vous parler de comment optimiser au mieux votre fichier CSS. Certes ce n’est peut être pas là dessus que vous gagnerez le plus, mais des petites choses mises bout à bout finissent par faire la différence.

Celles et ceux qui ont déjà bossé avec moi savent que je suis un chiant de l’optimisation de code pour du plus light et efficace possible.

Je passe sur le fait d’externaliser le CSS afin qu’il ne soit pas dans le html et de fusionner vos fichiers si vous en avez plusieurs.

Parlons d’abord nettoyage.

Dust-me selector et l’inutile s’en va

Peut être que comme moi vous avez récupérer des templates, ou des sites d’autres personnes avec tout ce qui va avec.

Probablement que vous avez vous aussi bidouillez, modifiez ces thèmes afin de les adapter à vos besoins.

Et du coup comme moi, vous vous retrouvez avec un fichier css encombré de choses parfois inutiles.

Et bien un petit addon firefox Dust-Me selector va vous aider à nettoyer tout ça très rapidement.

dust-me selector

Nettoyez votre CSS avec dust-me selector

Une fois installé, rendez-vous sur le site que vous souhaitez alléger. Cliquez sur le petit plumeau rose de l’addon dans la fenêtre qui va s’ouvrir cliquez sur spiderlog -> puis spider sitemap

Dans la nouvelle fenêtre le champ devrait comporter l’url de votre site. Si ce n’est pas le cas vous pouvez la mettre ou mettre l’url de votre sitemap. Cliquez ensuite sur Start et patientez quelques secondes.

Vous obtiendrez ensuite comme sur l’image ci-dessous tous les sélecteurs qui ne sont pas utilisés sur votre site.

css optimise

Les sélecteurs à optimiser et supprimer

Il ne vous reste donc qu’à les supprimer dans votre fichier .css afin de l’optimiser.

Attention à ne pas lancer l’outil juste sur une URL car sinon il vous donne que les sélecteur utilisés sur cette url et non sur l’intégralité du site.

Optimisation du fichier .css


Ok on l’a débarrassé du superflue mais on ne vas pas s’arrêter en si bon chemin.

A présent on va compresser et minifier votre fichier à l’aide de http://www.minifycss.com/css-compressor/.

Attention, je vous conseille de créer une sauvegarde de votre fichier au cas où vous auriez un petit soucis et surtout pour le retravailler dans le futur. Car si vous optez pour la forme la plus compact, cela devient très vite illisible.

Donc il vous suffit ensuite de vous rendre à l’adresse ci-dessus, de rentrer l’url de votre fichier CSS de définir vos options selon vos besoins ou envies.

Personnellement, il m’est arrivé de réduire le poids de certains fichier de presque 80%.

Donc il serait dommage de s’en priver surtout vue le temps que cela prend.

Vidéo illustrant cet article

Pour rendre hommage à Gasy le magnifik.

voici la vidéo qui va illustrer ce billet et vous faire danser sur vos fauteuils. Oui c’est très capillotracté et fallait aller la chercher celle la. je suis vieux, j’ai connu le Top 50 et j’assume.

49 réflexions au sujet de « Nettoyer, balayer, optimiser votre fichier CSS pour le SEO »

  1. Yann from Optimisation

    Ah j’avais entendu parler de Dust Selector mais sans l’avoir utilisé. On en arrive de plsu en plus à ces mini-apps en ligne; j’utilise pour ma part des logiciels complets qui optimisent le code CSS (entre autres) comme HTML Validator ou TopStyle Pro.

    Les forcenés de l’optimisation web comme toi savent aussi qu’il est préférable de ne pas appeler 36 fichiers CSS (idem pour JS d’ailleurs) mais de concentrer le tout en 2 ou 3 ce qui évite les requêtes serveur. On peut aussi avec de la config. Apache ou du htaccess indiquer de garder ces fichiers en cache au lieu de les charger à chaque visite. Bref… Plein de possibilités ouvertes par ton billet !

  2. Benjamin from parler allemand

    J’ai toujours voulu optimiser mon CSS, mais je ne l’avais jamais fait pensant que ça demandait des compétences techniques. Pour le coup ça a l’air assez simple avec cet addon firefox, je vais m’y mettre :). Reste à voir si ça changera beaucoup la vitesse. J’ai toujours l’impression que c’est impossible d’avoir un site qui se charge en moins d’une seconde si on est pas sur un serveur dédié.

  3. Régis from Bio

    Là encore j’apprends des trucs… je ne vais peut être pas mettre en œuvre de suite, mais je garde cela sous le coude.

    Mis à part merci, un seul mot à dire : Tu as le rythme SEO dans la peau !
    J’ai reconnu la chanson dès que j’ai vu l’aperçu… je suis vieux :-(

  4. Olivier from Media Camp

    On va tester ce petit addon. J’ai déjà essayé sans succès des scripts similaires, il y a souci des dégâts collatéraux…

    Mais c’est vrai que ça serait bien pratique, je repars souvent d’un CSS existant pour gagner du temps et parfois il reste des règles inutilisées.

  5. Daniel Roch from Spiruline

    Je suis entièrement d’accord avec toi sur le fait que le temps de chargement est primordial pour un site, et que cela passe entre autre par un fichier CSS unique et optimisé pour son site Internet.

    Par contre, je prendrais avec beaucoup plus de précautions l’aspect « optimisation CSS pour le référencement ». Même si Google indique prendre en compte la vitesse pour positionner un site, les tests que j’ai fait montrent que ce n’est pas vraiment le cas…

    1. Bombo

      Auriez-vous plus de précisions à ce sujet ?
      PS : Au fait, une amie qui habite près du Pont de la Blordière vous aurait trouvé par hasard sur Google ! Vous êtes de ce quartier ? #local

    2. jb from rompre cdd

      @Daniel
      « Reférencement » ne veut pas forcément dire positionnement.

      Effectivement aujourd’hui le temps de chargement n’a aucun impact direct sur le positionnement dans les Serp. Il a cependant un impact absolument non-négligeable sur la fréquence de crawl.

      Donc oui, un css léger et performant et intéressant « pour » le référencement.

    3. Snipeo

      Pour ce qui est du positionnement cela ne m’étonne pas par contre niveau hausse du crawl et donc un référencement « plus vif » pour les gros sites, la vitesse de chargement influe énormément.

  6. Bombo

    Très bonne trouvaille ce dust-me selector, merci beaucoup.
    Par contre, sur l’onglet « Spider Log », je ne vois aucun bouton « Spider Sitemap », auriez-vous une idée du pourquoi ? (il le fetch par défaut ?)
    Bonne journée :)

  7. Shelko@Bedford

    Jolie vidéo 😉
    J’ai également connu le top 50 et je crois même déjà avoir dansé sur du zouk machine 😉
    Je ne connaissez pas ce soft et je vais vite le mettre dans pack car je suis aussi un dingue de l’optim (enfin, c’est ce que disent les dév. avec qui je bosse ;))

  8. vivane@Ecran LCD LG

    Personnellement, je pense que la mise en page peut jouer un certain rôle dans une stratégie de référencement. Ce qu’il faut retenir selon moi, c’est qu’il faut avoir une page web la plus légère possible et donc mettre le maximum du style et la mise en page dans un css. Après, si on fait ça, cela devrait suffire pour l’optimisation on-page.

  9. Guillaume from Diffusion immobilière

    He bien je vais tester le Dust-me selector de ce pas.
    Et oui, quand on reprend un site existant, on laisse trainer des classes CSS, même des fichiers.
    Tant qu’on touche pas, on casse pas…

  10. Guillaume@Dora attrape les étoiles

    J’ai récemment utilisé l’outil de Google pour tester la rapidité d’un site et voulu faire quelques modifications pour améliorer le temps de chargement. Du coup j’ai mis en place un cache et j’ai aussi activé le cache des fichiers cotés client du moins le forcer. Je n’ai pas noté une amélioration flagrante. Mais comme tu dis c’est en grappillant des petites micro secondes par ci par là qu’au final on se retrouve avec un site rapide.
    Je n’avais jamais pensé à optimiser un CSS de cette façon, autant le compresser oui mais enlever les choses inutiles ça ne m’était pas venu à l’esprit.

  11. Jérôme from Création site strasbourg

    J’ai toujours été très dubitatif de la fonction « unused selectors ». Comment les logiciels font-ils pour déterminer les sélecteurs non utilisés. Ils ne crawlent pas tout le site pour le déterminer oO si ?

    Il y a certains projets qui ont été repris de personnes qui l’ont repris et ainsi de suite. Par conséquent, le fichier css est juste fou mais j’ai peur de passer un coup de balayette comme ça.

    Quelqu’un dans la salle a déjà testé ?

  12. Marian from Site Internet

    Je me penche beaucoup de l’optimisation de site en ce moment et c’est vrai qu’avec tout ce qui existe sur le web c’est généralement difficile de faire un choix.

    Sinon je suis du même avis que @vivane de toute manière le CSS doit être mis dans un fichier .css (si ce format existe c’est bien pour une raison puis après c’est beaucoup plus simple d’une part pour lire le code mais ensuite pour le modifier).

    Toujours séparer les couches (Interface Web, Couche Métier, Style, …)

  13. Sandrine

    Ca tombe bien c’est le prochain chantier auquel je m’attaque !
    J’avais déjà utilisé dust me et il est effectivement très efficace par contre sur des gros sites ca prend plus de quelques secondes :)

  14. Gasy4ever

    Je suis Gasy et j’approuve ce message.

    Tout ce qui aide à l’optimisation sur site aide au crawl,
    Tout ce qui aide au crawl aide l’indexation,
    Tout ce qui aide l’indexation aide le référencement.

  15. Jerome from referencement dijon

    Merci pour la découverte de ce plugin pour Firefox. Il va faire partie de ma sélection. Existe-t-il une version pour Chrome ?

    En ce qui concerne la compression des css, on peut également évoquer des outils en ligne comme Clean CSS ou Css Compressor par exemple.

  16. Eric from Cloud Video Encoding

    Hello Raph, merci pour l’astuce :)

    Je ne connaissais pas Dust Selector donc je vais me renseigner sur le plugin, ça me semble intéressant.E t je suis tout a fait d’accord avec toi, toutes ces optimisations mises bout à bout sont finalement très importantes pour le temps de chargement d’un site. Ca fait clairement parti de l’optimisation on-site !

  17. miu from référenceur

    Excellent cet outil! Bonne découverte, ça va être plus pratique pour tracker les unused. C’est toujours ça de gagner en plus, ça ne fait pas gagner 10pts chez GG Page Speed, mais ça y contribue. A tester de ce pas …

  18. Ludovic from vente chambres à air

    Bonjour et merci de ces ressources, je sens que je vais tester très bientôt 😉
    Outre l’aspect SEO, une chose est certaine : les temps de chargement ont une influence énorme sur la transformation, à ne pas négliger.
    Une question me vient : Concernant les pages qui ne sont accessibles qu’une fois loggé (ex: les pages panier d’un site e-commerce), Dust-Me Selector ne risque-t-il pas de virer les ancres utilisées uniquement sur ces pages ?

  19. Olivier Tassel

    Ces softs vont dans le bon sens mais ne sont pas utilisable dans un workflow « classique » de déploiement (si à chaque modification je dois utiliser manuellement Dust-me et minifycss.com cela devient vite ingérable). Je vous invite donc à jeter un oeil à Ant Build script (https://github.com/h5bp/ant-build-script) développé par l’équipe de html5boilerplate qui va permettre d’automatiser cette action ainsi que bien d’autres (compression des jpeg, combines des CSS et javascript,…

  20. Youri

    Bonne nouvelle. Je pensais que dust-me fonctionnait juste avec une seule url et pas un site entier. ca change tout ! :)

    Concernant la compression du css, j’utilise minify (disponible sur google code). Il compresse et cache le css ainsi vous gardez la source des css sans rien changer.

  21. Edo@Formateur Ennéagramme

    Merci pour l’outil – réduire jusqu’à 80% le poids des fichiers, c’est juste énorme.
    @jérome, non le plugin n’est pas dispo sous chrome semble-t-il.

  22. GeekPress@tuto wordpress

    Oula, ATTENTION avant de supprimer vos CSS car le plugin parse uniquement l’URL ajoutée en option, on risque de supprimer des éléments qui ne sont pas utilisés sur la page elle-même, mais sur d’autres pages du site.

    Donc faîte bien gaffe avant de supprimer quoi que ce soit et vérifier bien l’impact sur toutes les pages du site…

    A savoir que GT Metrix permet de savoir les sélecteurs CSS non utilisés 😉

    1. Olivier@Let's Go Zik & You @ Villa K5 12/01/2013

      GT Metrix affiche les sélecteurs CSS non utilisés sur la page testée. J’ai vu qu’on pouvait créer un compte sur leur site : est-ce possible de crawler un site complet pour être sûr de ne pas supprimer des sélecteurs utilisés sur d’autres pages ?

      Minimiser les CSS, c’est bien… mais faut pas oublier de faire la même chose avec les javascripts !

  23. Visibilité référencement Auteur de l’article

    @jb merci pour le complément 😉
    @Yann oui ici j’ai pas détaillé toutes les bonnes pratiques pour le CSS, on va pas tout donner quand même :)
    @Benjamin il faut bien commencer quelque part
    @Olivier pour les soucis c’est pourquoi je recommande tjrs une sauvegarde avant de faire quoi que ce soit. Perso pour mes MFT ça m’aide
    @Daniel oui et non. Un exemple moins de temps de chargement = plus de pages crawlées = + d’indexation et qui dit meilleure indexation …
    @Shelko c’est très bien il faut les persécuter les dev
    @viviane c’est opti est loin d’être suffisante pour de l’opti on page.
    @Guillaume il est certain que ce n’est pas sur ce point que les gains seront les plus spectaculaires
    @Jérôme si il crawl toutes les pages qu’il trouve (en principe)
    @Sandrine ah ces femmes toujours pressées !!!
    @Gasy pas mieux 😉
    @Ludovic si le crawl de ces pages ne peut se faire oui il risque de détecter certains sélecteurs spécifiques comme non utilisés
    @Olivier on est d’accord, c’est loin d’être la panacée mais pour de petit site que l’on récupère lance ça peut faire le job. L’avantage c’est que l’on a pas besoin de grandes connaissances non plus
    @GeekPress il est noté en plusieurs endroit qu’avec cette méthodo le spider va crawler le site et non juste l’url !!!

  24. Julien from Vancouver Office Furniture

    Comme dirait Sandrine ca tombe bien parce que j’etais moi aussi a la recherche d’un tool utile pour cleaner un peu le bordel des CSS modifiées sur nos site Wpress et qui font pas joli quand on présente un raport GtMetrix a un client (meme si dans le meme temps on lui a optimisé ses images de 20M sur la page et qu’on est passé de F a B) – Comme tu le dis c’est pas le plus important l’opti des CSS mais bon, le SEO c’est un peu come les petits filous – « petit a petit ca devient moins petit »

    Bonne trouvaille le Dust-Me selector je vais faire apsser cela a mes dev’s voir ce qu’ils en pensent

  25. Julien de Kiwano

    Il est vrai qu’avant de minifier, combiner et compresser le code CSS il faut d’abord enlever les éléments inutiles. Je rajouterai les points suivants à surveiller/optimiser/corriger :
    – ne pas répéter du code CSS ou des styles
    – ne pas avoir des propriétés inutiles, combien de clear: both, float: left, width: 100%; position: relative inutiles dans votre code ?
    – utiliser des propriétés raccourcis : à la place d’un border-top-width: 1px; border-right-width: 3px; border-bottom-width: 1px; border-left-width: 3px; utiliser le code border-width: 1px 3px; (plus léger non ?)
    – ne pas utiliser de « CSS Expressions »
    – ne pas utiliser * à la fin d’un sélecteur
    – ne pas préfixer la classe ou l’id avec le type d’élement, par exemple ne pas utiliser ul.menu mais .menu

  26. viviane@poussettes Bébé

    Très intéressant cet article.Je viens justement d’écrire un article sur mon blog sur un mod permettant de fusionner le plugin Super-Cache et le plugin Minify de façon à accélerer de façon drastique les blogs WordPress.

  27. Jessy Grossi

    Deuxième technique : sous Google Chrome, faites Ctrl+Shift+I et ensuite allez dans Audits. Penser à tout cocher ainsi que « Reload Page and Audit on Load ».

  28. from Victor Lerat

    Bonjour,

    je ne connaissais pas ce genre d’addons pour optimiser un fichier css. Existe t-il le même genre d’addon pour les fichiers JS ? Et est ce qu’il existe une technique pour regrouper les fichiers JS sans tout péter ?

    Car personnellement j’ai un site qui semble faire beaucoup d’appels JS et CSS donc avant d’optimiser il faudrait que je regroupe tout (je pense).

  29. sophie@oprocurement

    Merci pour cet article, ça doit être pas mal, je vais y penser Je pense que c’est aussi bien de mettre en lien les meilleurs articles à valoriser, qui permet d’avoir toujours un lien en home ou sur chaque page et ainsi bâtir un bon linking interne vers ces pages.

  30. Pit from apprendre a dessiner

    En parlant du temps de téléchargement d’un site, rien ne vaut un bon varnish cache.
    Je verrais bien un article comparatif des différents hébergeurs.
    Prenez Ovh et Gandi par exemple. La différence entre leur simple hosting de base est tellement grande, que pour quelques euros de plus, ce serait dommage de se priver d’un temps de chargement 2 à 3 fois plus rapide, et en particulier pour les css.

  31. Chirurgien Tunisie

    votre billet est très importante pour bien optimiser un site web et surtout pour l’outil Dust-Me selector ,

  32. Typook@Blog voyage

    Je viens de tester la procédure. C’est plutôt utile quand on est parti d’un CSS existant que l’on a modifié. Je l’ai fait tourner sur plusieurs pages significatives pour éviter les dégâts collatéraux. Merci pour l’astuce!

  33. flexman@morphsuits

    Merci bien pour l’addon que je ne connais pas , sinon pour wordpress j’utilise fréquemment le plugin wp minify, ça permets de gagner en rapidité et c’est très simple d’utilisation 😉

  34. Gilles

    Super découverte ce plugin Dust-me selector.
    J’avais trouvé des logiciels qui permettaient de le faire, mais ils étaient tous payants ou ultra limités.
    Belle surprise, car en effet le fichier css à la fin est souvent très crade, même si on fait attention et le mieux qu’on peut.
    Vraiment merci pour le coup :)

Les commentaires sont fermés. Si vous avez vraiment quelque chose d'intéressant pensez au mail. Merci.