Optimiser fichier css, diminuer la taille d'un css

Il y a plusieurs solutions pour optimiser les CSS. Par ordre d'efficacité décroissante, je dirais qu'on peut:
1. Écrire un code CSS de qualité en factorisant les styles et évitant d'écrire des styles extrêmement répétitifs et verbeux. Donc écrire du bon CSS, quoi.
2. Concaténer les feuilles de styles CSS quand il y en a plusieurs, pour n'avoir qu'une seule requête HTTP au lieu de plusieurs.
3. Utiliser la compression gzip (en général en utilisant mod_gzip ou mod_deflate).
4. Supprimer les commentaires, surtout quand on a abondamment commenté son code.
5. Supprimer les espaces facultatifs, tabulations, retours à la ligne, voire le dernier ";" dans un bloc de déclarations.
6. Remplacer certains mots-clés par des valeurs numériques ou des notations de couleur comme "#000000" par "#000".

L'outil que tu mentionnes s'occupe surtout des points #4, #5 et #6. Il y a beaucoup plus à gagner (en termes de performances et de méthodologie) à s'occuper des points #1, #2 et #3.

Entièrement d'accord avec ces points, mais cela n'enlève rien au premier post.

#1: Cela se fait dès la conception, il est difficile de l'améliorer à postériori (ou demande énormément de temps)
#2: Je pense que la plupart des gens le font et dans le cas inverse, c'est facilement et rapidement modifiable.
#3: Malheureusement pas toujours possible (free.fr) même sur serveur payant (Nfrance.com...)

Maintenant les autres points peuvent être fait rapidement en une seule action, permettant de garder un fichier css largement commenté coté machine et parfaitement allégé coté serveur.
Vu que je n'utilise pas de logiciel autre que notepad2, je trouve cela pratique.

A l'inverse lors d'un rapatriement de css, cleancss peut le formater proprement. Bref, c'est pas révolutionnaire, mais ça termine bien une démarche de réduction de poids.

Je plussoie Florent : une CSS bien optimisée, bien factorisée et avec la compression activée, c'est imbattable comme optimisation.

Petit test de Clean CSS sur la CSS principale de mon site perso (raisonnablement optimisée et factorisée) :

Compression normale :
Entrée: 8.481KB, Sortie: 8.044KB, Facteur de Compression: 5.2% (-437 Bytes)

Compression maximale (0 lisibilité, impossible à maintenir, 0 commentaire) :
Entrée: 8.481KB, Sortie: 7.42KB, Facteur de Compression: 12.5% (-1061 Bytes)

Les remarques/messages de Clean CSS (ça j'aime bien !) :

245
    Optimised shorthand notation (margin): Changed "-80px 0 0 0" to "-80px 0 0"
300
    Optimised font-weight: Changed "bold" to "700"
324
    Optimised shorthand notation (margin): Changed "0.5em 0 0.5em 0" to "0.5em 0"

Avec la compression activée : 2,21 KB VS 8.481 KB sans compression. Et ça évite le côté impossible à maintenir.


Je retiens l'outil en tout cas :
-pour les messages (toujours utile de voir ce qu'on a oublié d'optimiser ),
-les sites avec extrême charge... quoique la question se pose entre bande passante (qui coûte du blé) et charge serveur (la compression coûte du temps CPU... qui coûte du blé).
-effectivement la version minifiée peut être utile si la compression n'est pas activable.

Il faudrait comparer sur un site très sollicité la compression des CSS (temps CPU) VS la bande-passante (si non compression).
Quelqu'un aurait des infos ou un exemple ?
Modifié par Nico3333fr (01 Mar 2010 - 10:14)

Autant greffer csstidy (clean css est basé dessus en plus) à son site pour faire un système
d'auto paquetage + optimisation + génération d'un cache "versioné" de ses css (et des js également tant qu'a faire, grâce à jsmin ) ... Sans oublier mod_expire.

D'ailleurs c'est ce que je fait pour tous mes sites, sa m'évite de perdre du temps et de passer par ce genre de site à chaque fois que je modifie un css ou un js.

Et en plus ça me permet d'obtenir A sur yslow et 9x/100 sur google speed, wahou trop top méga cool !


@Nico3333fr : Pour ce qui est des gros sites ils ont les moyens. Donc le coût de la bande passante ... Surtout qu'ils utilisent des CDN pour leurs ressources statiques.

Sinon les sites assez fréquentés qui n'ont pas les moyens de s'offrir des CDN (pourtant ça ne coûte plus très cher chez amazon ces bêtes là) épargnent leur bande passante et leur cpu grâce à des reverse proxy et la mise en cache des ressources statiques dans les browsers des clients.
Modifié par Benjamin-Ds (01 Mar 2010 - 16:16)