I have been spending some time looking at CSS Optimization tools today. I wanted something free, online, and easy to use. And of course, something that worked. There are actually quite a few websites that fit the bill, and some of them are easier to use, produce more friendly code, and others are a bit harder to use, but can produce amazing results.

…Many broadband users might not think this matters much, as most websites seem to load fast for them, but if each site you went to loaded even 10% faster, think of all the time it could save you over the course of a week, a month or even a year…

…CSS optimization is a very valid form of speeding up downloads without having to sacrifice much (just legibility). With the average dialup user downloading at 3kb/s, savings of just 10kb can mean the page loads a stunning 3 seconds faster. And just imagine ESPN with savings of almost 18kb. Multiple by the large traffic the site gets, and those are some real solid promotion-worthy savings. So while this may not be important whilst you use a broadband connection, just you wait until you go visit your grandparents.

As websites and blogs get stuffed with more and more graphics, bells and whistles, their downloading times definitely drop. Don’t assume everyone is using broadband, high speed digital cable connections to the web. They aren’t. The majority are still using phone line connections. Speeds suck. And every little bit of useless code and wasted space you can wring out of your web page helps keep things flying on the web.

CSS Optimization and WordPress: Be Warned

Before you begin, make one or two backups of your original stylesheet. This is critical as the process of using these online CSS optimization tools removes what they think is wasted code and space. What they think is wasted code and space and what WordPress and various browsers require for displaying your WordPress Theme may be different. It’s hard work to restore a broken web page design so BACKUP, BACKUP, BACKUP!

One of the CSS optimization tasks is to remove all comments in your stylesheets. While this eliminates information your viewer doesn’t need, it can screw up your WordPress Theme.

WordPress Themes require the comment section at the top to provide information so the Theme will appear in the WordPress Administration Panels under Presentation. Do not remove this section in your CSS cleaning process.

I test drove a couple of the suggested CSS optimization online programs recommended and found that they also stripped relative links for graphics and some of the browser bug hacks. This killed most of the graphics and layout of one of my blogs.

After cleaning your CSS stylesheet, test your WordPress Theme thoroughly. Check every detail, lists, bullets, footer, sidebar links, graphics in every corner, every italic, bold, and heading. Check the look of your Theme on a Page, post, archive, author, search, category, and every possible page view to make sure every design element is there on every page. I found styles missing from my category view that were in my post view after one of the CSS optimization methods. Yikes!