Minifier son fichier CSS

[Admin]

Une optimisation de vos performances 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 fichiers CSS.

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, afin de gagner un temps précieux sur le rendu des pages.

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

Code : Tout sélectionner

.maClass {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}

Peut s’écrire, à l’aide du shortland correspondant :
.maClass {margin: 5px 10px 5px 10px;}

Et l’on peut encore gagner quelques caractères en utilisant :
.maClass {margin: 5px 10px;}

L’impact de la minification reste variable d’une ressource à une autre, mais elle reste recommandée, d’autant qu’elle est souvent une simple option à activer dans votre solution de compilation Front-End.


Quelques sites qui proposent de minifier votre CSS :
https://www.toptal.com/developers/cssminifier
https://www.site24x7.com/fr/tools/css-minimiseur.html
https://www.minifier.org/