Quand on développe un site web on utilise parfois des frameworks HTML et CSS, c’est notamment le cas de l’excellent Bootstrap de Twitter ou du dernier Zurb, ces deux frameworks permettent via des kit de composants HTML / CSS / Javascript de créer le design de votre site rapidement et sans trop avoir besoin de coder. Evidemment c’est bien pratique, puisqu’ils intègrent de quoi faire des designs 100% responsive, mais aussi des icônes facile a utiliser, des menus, de la pagination, des carrousels pour vos images ou votre contenu et pleins autres éléments très réussis qu’il vous suffit de positionner là ou vous voulez sans avoir a coder ni le CSS ni le javascript ! Et cerise sur le gâteau, c’est compatible avec beaucoup d’autre navigateurs !

Mais le problème c’est que justement ces bootstraps proposent beaucoup plus de fonctionnalités que ce dont vous avez réellement besoin, par exemple pour Zurb, le CSS principal fait déjà plus de 3400 lignes, et je ne parle même pas du JS.

Or les utilisateurs veulent pouvoir voir le contenu mis en forme toujours plus vite, et ce n’est pas l’arrivé de la 4G ou de la fibre qui va changer quelque chose au problème du développeur web. En effet, comme je vous le disais lors d’un tutoriel sur la modification de thème WordPress, il faut  minimiser le plus possible son code ! C’est bon pour l’utilisateur mais aussi pour les robots des moteurs de recherche qui de fait utiliseront moins de bande passante et seront donc plus content… C’est ça aussi le SEO.

Une petite image pour aérer le texte.

A noter que le problème est le même si vous n’utilisez pas ces bootstraps, en codant, sauf si vous êtes un dieu et que vous codez sans jamais revenir sur votre code, il vous arrive forcement à un moment où à un autre où vous allez ajouter un sélecteur dans votre fichier CSS… et que quelques mois plus tard, vous allez supprimer le code de ce sélecteur coté HTML, le sélecteur toujours présent dans le fichier style sera donc devenu inutile.

Comment compresser son code CSS ?

Bien évidement il y a une solution simple qui consiste a « compresser » ce code CSS, on appel cela minifier, on peut le faire à la main, mais c’est un peu long, c’est pour cela que je vous conseil plutôt d’utiliser un outil tel que celui-ci.

Comment supprimer le code CSS inutile ?

Mais même après un minify, même si le fichier est moins gros le problème reste entier ! Il reste du code inutile dans le CSS… Et le problème c’est qu’il faut l’identifier en étant certain qu’il n’est pas utilisé ailleurs sur d’autres pages.
Et c’est là qu’entre en jeu mincss de Peter Bengtsson !

Ce script permet de retirer directement dans le fichier d’origine les sélecteurs CSS inutilisés, ceux qui n’ont pas été trouvés dans votre code HTML.