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:
csstidy
Although it is possible to define each parameter individually, some pre-defined templates are what you will most probably use. These include: low|high|highest. The higher the optimization level, the smaller the CSS filesize. More on templates here.
I tried the high and 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 high template:
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:sed -i 's/}/}\n/g' style.css.out
If anyone knows about any other utility I would be very glad to know about.
Optimize and Compress CSS Files by George Notaras is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Copyright © 2006 - Some Rights Reserved
This is a great list… the sed command is useful as well.
It would be useful to do some research on javascript compression… seems like that’s where all the bloat is these days.
Actually, I have included only those optimizers that worked well with my CSS. A google search on that subject returns a lengthy list of online optimizers.
You are right about JS. This is the real problem nowadays, but I haven’t searched for any javascript optimization tools, as I use as little JS as possible. But, this would a very interesting topic too.
Thanks for your comment.
Very much like this tool. I tend to write my CSS compressed by default but for readability’s sake this tool will come in handy. Now I can write the CSS with readability in mind and then compress when the site goes live. Thx.
Btw, most browsers appear handle gzip compressed javascript. Instead of src=”script.js” you can use src=”script.js.gz”. Down side is that it doesn’t work on Safari but with a little more uncompressed javascript you might be able to work around that.
Although it does seem to be a bit controversial at this point based on the comments.
This is an excellent tip!
I also tried to gzip the CSS file and check if it can be used in compressed format by the browsers, but it doesn’t seem to work… It would be nice if this tip applied to the CSS.