Compresser vos fichiers CSS – CleanCSS

minifycssIl y a de nombreuses optimisations à faire pour améliorer votre temps d'affichage.
La compression de vos fichiers CSS en est une.

La compression CSS c'est quoi ?

Le principe est simple, la compression d'un fichier CSS ne consiste pas a le zipper mais en fait à réduire un maximum le nombres de caractères présents dans le fichier.

Voici un exemple de fonction CSS "normales" donc non optimisés, non compressés:

body{
	color: #FFFFFF;
	background-color: #000000;
	width:100px;
}

Voici le même code compressé au maximum:

body{color:#FFF;background-color:#000;width:100px;}

En compressant vos fichiers CSS vous pouvez gagner pour chaque fichier 20 à 30% de ta taille en ko ! Autant vous dire que vous devez passer par cette étape pour votre site. Elle est simple et efficace!

Un outil en ligne pour vous aider.

Voici un outil en ligne qui vous permettra de compresser votre fichier CSS : CleanCSS.

CleanCSS vous propose quelques options pour votre compression. Vous pouvez entre autre choisir si vous voulez que votre fichier soit plus ou moins compressé.

Cet outil marche à merveille mais sachez que lorsque je compresse des fichiers axés responsive, il m'est arrivé qu'il ne soient plus entièrement fonctionnels.

Minify CSS remplit les mêmes fonctions en français !

Je vous conseil de garder vos fichier CSS non compresser dans un coin car on ne sait jamais et, surtout, vos fichier compressés seront très difficiles à modifier.

Optimiser encore plus!

CleanCSS est très bien mais il n'optimise pas comme un chef.
En effet, vous pouvez encore améliorer son travail, ou plutôt l'améliorer au préalable puis passer votre fichier dans l'outil.

Vous pouvez optimiser manuellement des fonction comme :

body{
	border-style: solid;
	border-width: 1px;
	border-color: #000;
}

Vous pouvez optimiser vous même le tout en écriant ceci:

body{
	border: 1px solid black;
}

Border n'est évidement pas la seule fonction qui est otpimisable de cette façon. A vous de faire vos recherches sur W3C ou contentez vous de CleanCSS.

Laisser un commentaire