Usually, when writing or modifying a CSS file, the author adds comments and excessive indentation to the code in order to preserve its readability and to simplify maintenance. Although this might be a good habit, all those extra bits stored into the CSS file increase its filesize, often resulting in unnecessary waste of bandwidth, especially if such a file is used in a production web site. Today, I decided to search for tools that can perform compression and optimization of a CSS file.
A command line utility, called CSSTidy, seems to be one of the best out there. It’s open-source software, released under the GPL, and, judging by the optimization results on this web site’s CSS, I can say it does a good job. Although the source code is available for download, I used the pre-compiled Linux binary.
Before proceeding, make sure you have backed up your current non-optimized style-sheet. CSSTidy will not touch your original file, but taking some precautions is a good habit.
Launch csstidy without arguments for a rather short description of the command line switches:
Although it is possible to define each parameter individually, some pre-defined templates are what you will most probably use. These include:
highest. The higher the optimization level, the smaller the CSS filesize. More on templates here.
I tried the
highest templates. The latter produces a style sheet that contains all code in a single line, but that file would not validate, so I used the
csstidy style.css --template=high style.css.out
The compression ratio for my file was
34.86% which was quite satisfactory. Also, the final file validated properly.
CSSTidy does a good job either you want to optimize the stylesheet for readability or for filesize. On the other hand, the CLI interface does not provide enough information about each of the CLI switches. They are pretty self-explanatory, but I guess a little description for each one of them wouldn’t hurt anyone. Also, I could not make the “
--remove_last_;” option to work.
The only difference I could notice in my stylesheets between the
high and the
highest templates was that the whole code was squeezed in a single line when
highest was used. Probably, this template performs some more optimizations than just deleting the line-feed characters, but it seems that there was nothing else that could be optimized in my CSS file.
Apart from this command line utility, there are also a lot of online CSS optimizers. I didn’t have the time to try them all, but I think I can recommend the following:
- Clean CSS – this seems to be the PHP version of CSSTidy. Everything seems to work as expected and the results are the same as before.
- Icey CSS Compressor – This is another web-based CSS optimizer which performs very well. By using the default settings you get a single line with highly optimized CSS code. The compression ratio is similar to CSSTidy’s. In order to separate each selector with a line-feed character, so that the final CSS validates, you can pass the optimized CSS through
sed -i 's/}/}\n/g' style.css.out
If anyone knows about any other utility I would be very glad to know about.
The Optimize and Compress CSS Files by George Notaras, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.