Nora Brown Design

Speeding up sites: minifying CSS

I’ve recently started thinking about website speed, thanks in part to three free videos from my alma mater on the topic. As a first step, I’ve tried combining and compressing the CSS files for a recent site I completed, www.luxurycruisebible.com. This has two advantages:

1. Smaller overall file size due to compression
2. Reduced number of server requests due to combination

Results

The minified and combined css files were 6397 bytes, or just over 30% smaller than the original files. Using Yahoo’s yslow plugin for Firefox, I was able to examine the response times as well, shown in the following table:

Compressors

There are several compressors out there that handle CSS. There is even a comparison tool you can use to see which achieves the best compression.

I used a sort of manual css compressor which seemed to work just fine and is very easy (copy, paste, click) to use. For people comfy with the command line (not me at the moment), there is the Yahoo compressor, and to achieve the compression on the fly, there is a php script from Google, which I plan on trying soon.

Conclusion

As a person who enjoys making websites beautiful and compelling, making them fast doesn’t at first leap to mind as a fun pursuit. However, small steps like CSS compression are easy to do and can significantly improve performance. Next, on to javascript files.