CSS minification

Web best Practices
Spread the love

One web optimization that you can easily set-up, lies in your CSS files. Indeed, in most of the cases it is possible to reduce the weight of your website by minifying your “Cascading Style Sheets”.

This article aims at presenting you the principles of minification, and gives an overview of some popular tools to set this technique up on your website.

Let’s start with the beginning: what is CSS minification ?

This technique allows you to delete all the characters which are not needed by the web browser to interpret the code, such as:

  • spaces, tabulations or other new line characters
  • comments

Needless to say that these various elements are actually far from being useless: space characters make the Style Sheets easier to read for developers; comments may be essential for the code maintenance, etc.

However, their usefulness is limited to the development phase: they are not of any help for the web browsers. All these data will have to be parsed by the browser, then will just be ignored. In addition, it represents additional data that will be transferred between a server and the visitors. A waste of bandwidth that we want to avoid for sure.

We can also note that CSS allows some short syntaxes.

For instance:

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

Can be written using the following CSS shortland:

margin: 5px 10px 5px 10px;

And in this type of situation, we can still save some characters:

margin: 5px 10px;

Now, let’s apply the technique we just mentioned with this CSS fragment:

.myClass { /*Comment about my class*/
margin: 0px 0px 0px 0px;
}

Here is how it will be minfied:

.myClass{margin:0}

The impact of CSS minification can vary from a resource to another. Yahoo! carried out a study on the Top 10 most visited websites in the US, showing that 21% of the weight of the files is saved with minification.

Minification or Compression?

Do not mix up minification and compression. Compression uses specific algorithms -we can cite the Deflate, for instance- to reduce the weight of the file: the server compresses the resource, which is transferred through the network, then has to be uncompressed before its interpretation by the client browser.
Minification, itself, does not need any operation from the client.

Here we can see how the weight of a random resource changes in different cases:

File type File weight (Kb)
CSS 118Kb
CSS + Gzip compression 17Kb
CSS minified 96Kb
CSS minified + Gzip compression 16Kb

The values do not show a significant difference between the compressed file and the compressed and minifed file (just 1Kb). However, the variation is about 7%, which can be a substantial improvement if you use minification for all your CSS files.

We really recommend you to compress and minify your resources. The online tool DareBoost allows you to make sure your page meets these best practices.

How to minify your resources?

Now that we understand the theory, we will see how to put it into practice. Various choices are available. They vary according to the technologies used in your projects.

Online tools

Numerous online tools exist, to help you minifying your resources. Here, we selected two of them, for their convenience or their efficiency:

These tools can be useful for some usages, but in most cases, it is better to automate the minification process in your development workflow, by using one of the numerous existing utilities.

Offline tools

  • YUI Compressor the most renamed in this field, propulsed by Yahoo!
  • cssmin–js an alternative, coded in JavaScript, which allows you to avoid the use of JVM (Java Virtual Machine) required by YUI Compressor

Note that these solutions are not necessarily the most adapted to your workflow. For instance, if you use the WordPress CMS, DareBoost will rather recommend you to use plugins like WP Rocket or W3 Total Cache for this task:

Minified CSS Dareboost

This can be very quickly achieved, and takes effect immediately.

The principle of minification can also be applied to JavaScript (on which it is also possible to apply the principle of obfuscation) or to HTML resources. Other articles will come on this blog, to give you more information about the tools you should use for these resources.


Spread the love