Minimize your CSS for smaller page sizes

Just quickly, go and take a look at your stylesheets. What you’ll probably see is a fair amount of CSS code, but an awful lot of whitespace. All of the new lines, tabs and spaces you’ve been using to make your CSS easier to read have made the size of your stylesheet go up. This of course means that your stylesheet takes that little longer for your visitors to download it. As well as that it also uses up that little bit extra bandwidth. Now, unless your site is receiving very large amounts of traffic this top won’t exactly change your world. It is however a good thing to do; the more optimization you can do the better.

It’s often a good idea to keep two versions of your CSS files. The first is the version you work on and make changes and the second is the version you upload and use live on your site. In the first you’ll want to keep all the added whitespace and formatting but in the second you want none of that. The stylesheet you use live should be as small, lean and efficient as possible. One of the ways to get it there is by using one of the many CSS minifiers which strip out all the unnecessary bits. Doing a Google search for “minify CSS” will bring plenty of online tools which will minify, compress and clean your stylesheets. Some are even capable of combining multiple CSS properties into the shorthand format.

This is definitely worth trying. You may just save yourself some bandwidth and improve your sites loading speed. What more do you want?