Compressing and Minifying CSS with Code Beautifier

Let’s turn to webo.in again to optimize the blog. This time it suggests:

CSS files can be reduced in size. We recommend using a CSS compression tool (based on the CSS Tidy project). After that, you can serve CSS files in compressed form from the server (for an overall saving of up to 85%).

We’ve set up compression; now it’s time to minify the CSS and talk about a tool for minifying CSS files (based on the CSS Tidy project): Code Beautifier.

What does this tool do?

It replaces certain parts of the code with shorter notation, for example:

0px == 0
#ff0000 == #f00

It also reduces indentation and line breaks, merges blocks, and removes comments. In short, the CSS turns into a mess… and that minimizes the file size.

But you’ll say, “How am I supposed to edit that mess?” The answer is simple: you need to keep a readable backup version of the file and deploy the minified one to production!

• Production version /wp-content/themes/premium/style.css
• Backup version /wp-content/themes/premium/style-backup.css

The original CSS files from the old WordPress theme are no longer available in the archive.

Input: 23.069KB, Output:12.217KB, Compression Ratio: 47%(-10852 Bytes)

After minification, my main CSS file was half the size. But let’s not stop there: let’s enable CSS file compression, which will speed up your site even more at this stage!

AddOutputFilterByType DEFLATE text/css

CSS files are too large. It may be possible to make them smaller, for example by including only the styles that are actually needed, shortening paths to background images, grouping selectors, and rethinking the naming logic for style classes.

There are tools for this too, but they involve more fiddling… Since you’ll also have to rename all the classes and other structures in your (x)HTML files.

You’ll also have to change the paths where the linked files are stored. Of course, you could configure mod_rewrite for this, but that’s going overboard, in my opinion. You’d be better off putting all the images on another server, for example one running nginx.

For more details on CSS compression, along with test results, see CSS: All About Compression

P.S. I did have a problem with the CSS, though: went out of whack on the pages. The issue was that, in the normal CSS, the styles for the blockquote{} tag came after body *{}, and everything was fine. But the minifier decided to merge styles with identical contents, so body *{} ended up coming after blockquote{}, overriding some of its styles. I simply moved the body *{} block above blockquote{}, and everything worked properly :)