Optimisation des fichiers CSS

L'optimisation du CSS correspond à la suppression d'éléments inutiles et redondants de votre code avec pour seul objectif la réduction de la taille du fichier. Pourquoi est-ce important ? Eh bien, la réduction de la taille du fichier engendre une réduction du temps de téléchargement. Si vous voulez que votre page se charge rapidement, vous devriez l'optimiser. De plus, si votre site a un énorme trafic, la différence entre 10 et 20Ko sur chaque page vue, représente beaucoup pour votre bande passante.

Comme mentionné, l'optimisation du CSS peut être faite soit en utilisant certains optimiseurs CSS disponibles en ligne, soit à la main. La plupart des actions d'optimisation consistent à supprimer les sauts de ligne, les espaces vides et les commentaires. D'autre part, les plus importantes mesures que vous pouvez prendre sont de vraiment soigner votre code en ce qui concerne l'utilisation des raccourcis de propriétés, le nommage avisé des classes, l'utilisation des styles généraux et l'usage avisé des sélecteurs CSS.

Si vous optimisez au maximum, au final vous obtiendrez une ligne de CSS. Vous pouvez aller aussi plus loin, mais le voudriez-vous réellement ? Avoir toutes les propriétés écrites en une seule ligne rend le code très difficile à lire et extrêmement difficile à maintenir.

Imaginez combien de temps vous auriez à passer sur la remise en forme. Donc, si vous avez vraiment besoin que votre CSS soit optimisé à ce niveau, vous devriez avoir une version de travail de votre fichier. Optimiser le CSS mais à condition qu'il soit lisible !

Comme je n'ai pas de trafic trop dense, je ne me suis pas préoccupé des quelques Ko. Vous pouvez jeter un coup d'oeil sur mon fichier CSS de base que j'ai écrit pour ma nouvelle galerie de templates CSS. Il fait 15.583Ko et ça me convient. Optimisé au maximum, il fait un peu plus de 10Ko. Comme je mets constamment le site à jour, j'ai besoin d'avoir un code très lisible et maintenable. Je vais garder ma structure de code, indenté et commenté parce que ça va m'aider à m'y retrouver plus rapidement. Est-ce un fichier optimisé ? Si vous regardez combien il y a d'espaces (inutiles), de commentaires et de sauts de ligne, il n'y a que la réponse NON. Mais si vous analysez le code (pas les espaces blancs), vous verrez qu'il ne peut guère être écrit avec moins de lignes. Les propriétés raccourcies, l'héritage, le style général... tout y est. (La seule habitude que j'ai qui pourrait être optimisée serait la mise à zéro des margin et padding pour les listes ul et les réutiliser plus loin dans le code).

Laissez-moi vous donner juste un exemple de ce qu'il faut faire pour éviter la redondance et sauver de nombreuses lignes de code. C'est quelque chose que j'utilise pour l'image de remplacement. Pour remplacer un élément par une image vous aurez besoin d'un long code. J'utilise le style général :

.graphic{
	margin:0;
	padding:0;
	display:block;
	overflow:hidden;
	text-indent:-8000px;
}

Comme j'ai développé mon site et que je l'ai utilisé sur pas mal d'éléments pour lesquels je voulais un remplacement par des images, j'ai simplement ajouté les sélecteurs à ce "style général" que j'ai déjà codé. Je termine avec ceci :

.graphic, #header h1, #header li, ul#nav li, p#join, #price, #individual, 
#intro span, #subscribe, button, #preview h1, #preview span {
	margin:0;
	padding:0;
	display:block;
	overflow:hidden;
	text-indent:-8000px;
}

Pour un élément spécifique, je n'ai pas à définir toutes les propriétés. J'ai besoin de définir les choses comme ceci :

#preview h1 {
	width:233px;
	height:69px;
	background:url(../images/bg_logo_preview.gif) no-repeat 0 0;
}

Donc, l'optimisation commence à la minute même où vous commencez à coder. Mes convictions sont que la meilleure façon d'optimiser votre CSS est d'apprendre à écrire correctement et constamment améliorer vos techniques. Vous pouvez supprimer tous les espaces et les commentaires que vous voulez, mais si vous gardez la définition de famille de police de chaque élément sur le site, vous commencez mal.

Voici quelques liens (en anglais) que vous trouverez intéressant:

• Optimisez vos fichiers CSS pour améliorer la lisibilité du code
• CSS avec les propriétés raccourcies
• Améliorer la lisibilité avec Styleguides CSS
• Comment optimiser votre CSS encore plus

(Quelques) Optimiseurs de code CSS disponible en ligne :

• http://floele.flyspray.org/csstidy//css_optimiser.php
• http://www.cssoptimiser.com/
• http://flumpcakes.co.uk/css/optimiser/
• http://mabblog.com/cssoptimizer/compress.html