Le but

La compression des css et des javascripts est avec la l’optimisation des images un facteur de performance pour les sites web. J’ai fait la démonstration il y a quelque année avec voici.fr du gain et de la pertinence. Dans les deux cas le but est de transmettre moins de donnée (moins de bande passante consommé, moins de stockage, moins de donnée manipulé par les processus) , donc d’afficher plus rapidement une page, donc d’être mieux référencé par les moteurs de recherche.

yui-compressor

Yui Compresssor est un outil Yahoo  inventé par leurs développeurs de la performance team. Le yui-compressor est un outil java disponible dans votre dépôt debian. Alors laissez faite apt ou aptitude …

# apt-cache show yui-compressor
Package: yui-compressor
Priority: optional
Section: java
Installed-Size: 824
Maintainer: Debian Java Maintainers <pkg-java-maintainers@lists.alioth.debian.org>
Architecture: all
Version: 2.4.2-2
Depends: default-jre-headless | java5-runtime-headless, libjargs-java, java-wrappers
Filename: pool/main/y/yui-compressor/yui-compressor_2.4.2-2_all.deb
Size: 747892
MD5sum: 492d2c30c7f91a1307ce29bd4df7116a
SHA1: 69cc96ae9bd7c3e92a802576dc2a13892f02b8b7
SHA256: ea6577e753bdfa84ed980283f26f8aa392dd4e6595febc30da3bd767236536d5
Description: JavaScript/CSS minifier
 The YUI Compressor is a JavaScript compressor which, in addition to removing
 comments and white-spaces, obfuscates local variables using the smallest
 possible variable name. This obfuscation is safe, even when using constructs
 such as 'eval' or 'with' (although the compression is not optimal is those
 cases) Compared to jsmin, the average savings is around 20%.
 .
 The YUI Compressor is also able to safely compress CSS files. The decision
 on which compressor is being used is made on the file extension (js or css).
Homepage: http://developer.yahoo.com/yui/compressor/

Oui pour l’utiliser vous avez besoin de Java

# apt-get install yui-compressor
Lecture des listes de paquets... Fait
Construction de l'arbre des dépendances
Lecture des informations d'état... Fait
Les paquets supplémentaires suivants seront installés :
 ca-certificates-java default-jre-headless java-common java-wrappers libjargs-java liblcms1 libnspr4-0d libnss3-1d openjdk-6-jre-headless openjdk-6-jre-lib tzdata-java
Paquets suggérés :
 default-jre equivs libjargs-java-doc liblcms-utils libnss-mdns sun-java6-fonts ttf-dejavu-extra ttf-baekmuk ttf-unfonts ttf-unfonts-core ttf-sazanami-gothic ttf-kochi-gothic ttf-sazanami-mincho
 ttf-kochi-mincho ttf-wqy-microhei ttf-wqy-zenhei ttf-indic-fonts
Les NOUVEAUX paquets suivants seront installés :
 ca-certificates-java default-jre-headless java-common java-wrappers libjargs-java liblcms1 libnspr4-0d libnss3-1d openjdk-6-jre-headless openjdk-6-jre-lib tzdata-java yui-compressor
0 mis à jour, 12 nouvellement installés, 0 à enlever et 8 non mis à jour.
Il est nécessaire de prendre 33,8 Mo dans les archives.
Après cette opération, 91,9 Mo d'espace disque supplémentaires seront utilisés.
Souhaitez-vous continuer [O/n] ?

Résultat

Le résultat sur le fichier css du blog est éloquent

# cp -a style.css style.css.ori

# yui-compressor -v --type css style.css.ori -o style.css

#ls -lrth style.css*
-rw-r--r-- 1 root root 66K 16 févr. 09:27 style.css.ori
-rw-r--r-- 1 www-data www-data 50K 16 févr. 09:28 style.css

16ko de gagné sur ce seul fichier. Je vous laisse imaginer le gain sur l’ensemble des fichiers css et js, le facteur de multiplication avec votre audience etc..