La minification CSS, tout ce que vous vouliez savoir

Une optimisation web souvent simple à mettre en place porte sur les fichiers CSS. En effet, il est généralement possible de réduire le poids de votre site web en minifiant vos “Cascading Style Sheets”.

L’article suivant a pour objectif de vous présenter le principe de la minification et introduit quelques outils populaires pour mettre en place cette technique sur votre site.

Tout d’abord, qu’est ce que la minification CSS ?

Cette technique permet de supprimer tout caractère inutile pour l’interprétation du code par un navigateur web, c’est à dire :

  • les espaces, tabulations ou autres sauts de ligne
  • les commentaires

Bien évidemment ces différents éléments sont loin d’être inutiles dans l’absolu : les caractères d’espacement facilitent la lecture pour le développeur, les commentaires peuvent être indispensables à la maintenance du code, etc.

Cependant, leur utilité se limite à l’étape de développement : ils ne sont d’aucune aide aux navigateurs web. Ces données vont être prises en charge, pour être ensuite ignorées. Mais surtout, ce sont autant de données inutiles qui vont transiter entre un serveur et les internautes. Une occupation de la bande passante qu’il est donc souhaitable d’éviter.

On notera également qu’il existe en CSS un certain nombre de syntaxes raccourcies.

Par exemple :

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

Peut s’écrire, à l’aide du shortland correspondant :

margin: 5px 10px 5px 10px;

Et l’on peut encore gagner quelques caractères en utilisant :

margin: 5px 10px;

Si l’on applique l’ensemble des points évoqués sur ce fragment de CSS :

.maClass { /* Commentaire sur ma classe*/
margin: 0px 0px 0px 0px;
}

 

Il sera alors minifié de la sorte :

.maClass{margin:0}

L’impact de la minification reste variable d’une ressource à une autre, mais Yahoo! a mené une étude montrant qu’elle avait réduit de 21% le poids des fichiers des 10 des sites américains les plus visités.

Minification ou Compression ?

Il ne faut pas confondre minification et compression. La compression utilise des algorithmes spécifiques (on peut citer le Deflate par exemple) afin de réduire la taille du fichier : le serveur compresse la ressource, qui transite sur le réseau et doit obligatoirement être décompressée avant son interprétation par le navigateur du client. La minification ne nécessite quant à elle aucune opération côté client.

Voyons l’évolution de la taille d’une ressource lambda à travers ces différentes opérations :

Type de fichier Taille du fichier (en Kilo Octets)
CSS brut 118Ko
CSS brut + compression Gzip 17Ko
CSS minifié 96Ko
CSS minifié + compression Gzip 16Ko

Ces valeurs ne montrent pas une grande différence entre le fichier brut Gzippé et le fichier minifié puis Gzippé (1Ko de différence). Mais cela représente malgré tout un gain d’environ 7%, ce qui n’est pas négligeable rapporté à l’ensemble de vos fichiers CSS. Pourquoi s’en priver quand on sait que cela peut être automatisé ?

Comment minifier vos ressources ?

Plusieurs choix sont possibles, le contexte de votre projet web pour permettra très certainement de trouver celui qui vous convient sans hésitation.

Les outils en ligne

De nombreux outils en ligne existent pour répondre à ce besoin. Ici, nous en avons sélectionné deux pour leur simplicité et leur efficacité :

Ces outils en ligne peuvent être pratiques pour certaines utilisations, mais dans la plupart des cas, il est préférable d’automatiser le processus de minification dans le workflow de développement en utilisant l’un des nombreux utilitaires existant.

Les outils hors ligne

  • YUI Compressor le plus célèbre dans le domaine, propulsé par Yahoo!
  • cssminjs une alternative codée en JavaScript, permettant d’éviter de passer par la JVM (Java Virtual Machine) nécessaire à YUI Compressor

Notez que ces solutions ne sont pas obligatoirement celles qui s’intègrent le mieux dans votre workflow. Par exemple, si vous utilisez le CMS WordPress, le conseil de DareBoost.com va plutôt vous inciter à utiliser des plugins tels que WP Rocket ou W3 Total Cache pour remplir cette tâche :
Minification CSS Dareboost

Leur installation est rapide et les effets immédiats.

Le principe de minification s’applique également aux ressources JavaScript (sur lesquelles il est également possible d’appliquer le principe de l’obfuscation) ou encore HTML. D’autres articles à venir sur ce blog vous permettrons de découvrir les outils à utiliser pour ces types de ressources.

2 réflexions au sujet de « La minification CSS, tout ce que vous vouliez savoir »

  1. Très bon article. J’utilise moi-même WProcket qui est très puissant. En revanche si je compresse ou mini fie les CSS et js ou l’un ou l’autre, je n’ai plus d’affichage. Je cherche toujours un complément à WProcket pour ces types de fichiers. Si vous avez des pistes, je suis preneur :) merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*