Optimisation des fichiers .CSS

A l'heure où de nombreuses personnes essaient d'optimiser leurs blogs / site  que ce soit au niveau du temps de chargement ( primordial ), à travers des images de qualité raisonable , et un code source de page fluide, un détail est souvent oublié, à tord :

Optimiser ses fichiers .css. Pour rappel ( sinon vous ne seriez pas en train de lire cet article ) voici une petite définition de ce que réprésente les fichiers .css

Citation: 'Le terme CSS est l'abréviation de Cascading Styles Sheet (feuilles de styles en cascade). Les styles CSS permettent d'enrichir (ou même de définir entièrement) la mise en forme de pages internet en apportant de nombreux avantages par rapport à une mise en forme directement écrite en HTML'



Définition css

Il convient donc d'avoir en mémoire, que ces fichiers sont automatiquement chargés sur les différents navigateurs web ( que ce soit Firefox ou Internet explorer, qu'importe ), en plus de la page en elle même.
Un fichier .css peut facilement faire 50 ko, ce qui, pour chaque utilisateur peut être colossal, entraînant un temps de chargement légèrement plus long ( même s'il a l'adsl ), mais surtout une plus grosse capacité de bande passante nécessaire, et elle est plutôt chère chez les hébergeurs de sites web. Faire diminuer la taille de son fichier .css est "indispensable".

Facilement calculable, prenez un site ayant  1000 visiteurs par mois ( chiffre rond ), en partant du principe que Firefox garde en cache les fichiers .css ( qu'il ne le recharge pas à chaque changement de page ), cela représente 50000 ko, soit près de 50 mo.

Quelques optimiseur "automatique" css

Comment optimiser ses feuilles de styles ?

Pour le faire soit même, il convient de ne pas introduire de lignes inutiles, des propriétés invisibles ou autre... Mais surtout, à chaque fois que l'on saute une ligne ou que l'on réalise un espace, le fichier gagne en taille.
Finalement, optimiser ses feuilles de styles revient à analyser clairement son code, et à se dire "ceci est inutile, je le vire". Mais nous n'avons pas spécifiquement envie de passer 40 heures à le faire.

Fort heureusement, il existe divers optimiseurs css en ligne, qui viennent faire le travail de gain de place en deux petits clics de souris.


Mise en guarde :

Votre code .css doit être "valide. Ce n'est pas un validateur css. Si une erreur est présente, celui-ci ne va pas la réparer.

1-Le meilleur ( avis subjectif ) :



http://iceyboard.no-ip.org/projects/css_compressor
Cet optimisateur s'avère simple, mais aussi le plus efficace. Il est possible de copier son code .css à "optimiser", de l'uploader, ou un robot ira télécharger un fichier .css déjà présent sur votre serveur.
Un clic plus tard, le gain de place apparaît, commenté :


Statistiques de css_compressor :
# Taille du fichier original  : 14.1 kB (14,437 B)
# Taille du fichier .css après optimisation : 10.46 kB (10,707 B)
# Gain: 3.64 kB (3,730 B)
# Réduction: 25.84%

2-Le finaliste ( avis subjectif ) :



http://www.cleancss.com/
Cleancss offre l'avantage d'être "en français" ( approximatif tout de même.. ). Il optimise un peu moins bien que css_compressor, néanmoins il propose de surligner les modifications. En outre, celui-ci nous offre le choix de diverses optimisations selon nos "goûts". Ainsi à droite si vous selectionnez une compresse "compacte", aucune lisibilité ne sera possible, mais le code sera fluide.

Statistiques de Cleancss :
# Taille du fichier original  : 14.1 kB (14,437 B)
# Taille du fichier .css après optimisation : 10.981KB
# Gain: 3.46 kB (3,460 B)
# Réduction: 23.9%

3-Un dernier pour la route :



http://flumpcakes.co.uk/css/optimiser/

Flumpcakes a le défaut d'être Overmoche. Il propose peu d'options, mais fait également bien son travail, même si quelques rares problèmes pourrait survenir à la suite de ces "optimisations". ( Il optimise tellement que le désign est altéré ).

L'optimisation certes, mais garder une lecture aisée est indispensable

Ce code est optimisé pour "l'ordinateur" :

body{height:100%;font-size:12px;font-family:Geneva, Arial, Helvetica, sans-serif;color:#000;background-color:#c3cfe5}.tbin{vertical-align:top;margin-bottom:5px;width:250px;height:110px;border:solid 1px #666}.tbin:link{color:#09C;text-align:center}.tbin:hover{border:solid 1px #9F3;background-color:#DAF2FE}.affichdiv{background-image:url(/images/cherche.png);width:275px;height:150px;background-repeat:no-repeat;font-family:Arial, Helvetica, sans-serif;padding-top:29px;padding-left:35px;padding-right:20px;color:#FFF}.tutovousetes{font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFF;background-color:#069;overflow:hidden}.infobulle{position:absolute;visibility:hidden;border:1px solid Black;padding:10px;font-family:Verdana, Arial;font-size:10px;background-color:#FFC}#menu{width:154px;margin-top:3px;margin-bottom:4px;float:left;margin-right:auto;display:block}.menutitre{background-image:url(/images/image015.png);background-position:center;border-color:#000;border:2px solid black;border-bottom-width:0;border-bottom-style:hidden;color:#F90;font-size:12px}.

Est-il facilement lisible pour une modification ultérieure ?
Si c'est le cas pour vous, bravo, vous êtes un champion. Néanmoins, un pense bête pour que le code soit lisible et facilement modifiable par vous même :
Placez le fichier .css optimisé sur FTP ( en ligne donc ), et gardez bien au chaud chez vous votre fichier .css "bancal".