Optimising CSS #1

Optimising files for size can seem a bit stupid to some people. So what if I reduce a 6k file down to 5k, that's only 1k!

Well fine, but if it's a popular file, say a server side include, you could have millions of hits a day; not only does every k on every file save on bandwidth usage and costs but it also speeds up the delivery of the file to the user.

The CMS system I'm using comes with a template which has a 12k CSS file. Having modified the file quite extensively it eventually rolled in at 17k.

I saved the CSS file with ALL its original markup and comments to an archive/src folder and then set about modifying the live CSS file.

All the comments removed saved 1k.

Then I uploaded the CSS file to HTML tidy, switching off all the output options to get the most basic HTML file, stripping out the CSS and dumping it back in the CSS file.

That saved another 2k.

I changed the wrap from the default 90 to 999999 and uploaded again.

That saved another 1k.

So now I have a much more complex CSS file, initially 5k (nearly 50%) bigger than the original that is actually only 1k more than the original. Not bad huh?

Effectively all this is doing is removing the line breaks from the original CSS file, saving 5k of code. You still have your source CSS file, right? If you need to work on the CSS again, just work on the source CSS file, comment it as appropriate, save it and run it through the optimisation process again to get a trimmed-down version for your live site :)