(cet article a été écrit par Camille Bouiller, voir son précédent billet pour plus d’informations)

Il existe de nombreuses techniques, plus ou moins fiables, permettant d’optimiser votre site Web (et donc de réduire la bande passante). Mais je vais vous présenter une technique qui marche : le but est de compresser vos fichiers CSS.

Le principe est de réduire au maximum la taille de votre fichier CSS (en enlevant tous les sauts à la ligne, commentaires, etc.). Ce processus est notamment utilisé par les librairies Javascript qui font des milliers et des milliers de lignes de code. Certains sites importants l’utilisent mais ils sont encore rares.

1. Utilisez un outil pour compresser vos CSS en ligne

Comme je l’ai dit plus haut, nous allons utiliser un outil permettant de compresser nos fichiers CSS. Clean CSS, par exemple, fait ça très bien. Tout d’abord, il faut commencer par entrer le contenu ou l’URL de votre fichier CSS et choisir le mode de compression.

On a le choix : le plus compact, très compact, normal, peu compact ou sur mesure. Le mode de compression le plus important est très compact, il rendra votre CSS illisible mais vous gagnerez considérablement après la compression : de 20 à 30 % de gagnés sur la taille du fichier, c’est non négligeable !

Sur un fichier CSS de taille moyenne (plus de 500 lignes), les modes normale ou peu compact sont pas les plus efficaces, on gagne en moyenne une vingtaine de pourcents alors qu’on peut gagner presque 30 % avec les modes le plus compact et très compact - d’après mes tests.

En fait, le principe c’est de réduire considérablement le nombre de caractères dans votre fichier CSS pour y gagner, voici quelques exemples :

  • Réduction ou suppression (le plus compact) des retours à la ligne ;
  • Tri des priorités et sélecteurs ;
  • Fusion des priorités similaires (.center { text-align: center } et h3.titlepage { text-align: center } deviendront .center, h3.titlepage { text-align: center }) ;
  • Compression des couleurs et de font-weight : color: white et font-weight: bold deviendront respectivement color: #FFF et font-weight: 700 ;
  • Enlever le dernier point-virgule des priorités (pour gagner un caractère à chaque fois) ;
  • Etc.

Quelques exemples de CSS avant et après la compression

J’ai testé CSS Clean sur quelques sites que je visite quotidiennement :

Nom du site Mode de compression Avant compression Après compression % gagnés
Presse Citron Le plus compact 13.5 Ko 9.8 Ko 27.1 %
Techcrunch France Le plus compact 27.8 Ko 21.6 Ko 22.2 %
Site du Zéro Le plus compact 40.7 Ko 31.1 Ko 23.5 %
Digg Le plus compact 55.8 Ko 37.3 Ko 33 %
Wordpress.org Le plus compact 18.7 Ko 15.3 Ko 17.8 %
PC INpact Le plus compact 35.5 Ko 25.7 Ko 27.9 %
Punbb.fr Le plus compact 11.5 Ko 5 Ko 56 %

2. Séparer le CSS source du CSS compressé

Je conseille fortement aux webmasters de compresser au maximum leurs fichiers CSS et de les inclure dans leurs pages, et de garder à côté les fichiers CSS sources, car modifier un fichier CSS illisible relève d’une mission commando (ou presque).

A ce propos, CSS Clean utilise CSS Tidy, le script permettant de compresser les fichiers CSS avec différents paramètres. Pour ceux qui ont quelques compétences en PHP, ce script peut être utile car il permet simplement d’automatiser la compression de votre CSS source, sans passer par un service tel que CSS Clean.

Vous aurez besoin de la version PHP 4.3.x ou PHP 5.0 supérieur pour que cela fonctionne. Voici quelques liens pour en savoir plus :

Coder un système qui s’occupe de compresser automatiquement votre CSS source à chaque modification n’est pas bien compliqué, il suffit de jouer avec les informations du fichier CSS source et de lancer une compression au bon moment.

3. Réduire le nombre de caractères par ci par là

Outre les sauts à la ligne/espaces retirés et les diverses optimisations effectuées par CSS Tidy, on peut encore réduire le nombre de caractères d’un fichier CSS. C’est un constat que j’ai fait en lisant le code source de certains sites. Par exemple, la propriété CSS background peut contenir les valeurs des priorités background-color, background-image, background-repeat et background-attachment.

De ce fait, le code suivant :
[sourcecode lang=css]#header {
background-color: #000;
background-image: url(images/header.png);
background-repeat: no-repeat;
background-position: top left;
}[/sourcecode]
Devient :
[sourcecode lang=css]#header {
background: #000 url(images/header.png) no-repeat top left;
}[/sourcecode]

L’opération peut se répéter pour quelques autres propriétés : comme font par exemple. Avec l’exemple ci-dessus, on réduit le nombre de caractères de moitié (passant de 143 à 73 caractères).

La question que l’on peut se poser : doit-on privilégier la rapidité d’exécution (en compressant les fichiers CSS) à la lisibilité du code source ? Par ma part je pense que l’on peut garder les deux en gardant 2 fichiers CSS distincts (le fichier source et le fichier compressé), comme je l’explique dans la partie 2.