Skip navigation

CSS Optimization: Cleaning Up Your Stylesheet Analysis

Blogging Pro has an interesting analysis on CSS Optimization that is definitely helpful if you are considering your website’s design optimization as well as your Search Engine Optimization (SEO). Just be careful using these on WordPress Themes.

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

These CSS Optimization methods are great. They strip your stylesheet of wasted space, streamlining it’s code.

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!

In “Site Optimization: Optimizing Bandwidth and Cleaning Out the Code Closet”, I offer a manual technique that is much more conservative than a do-it-for-you program. WordPress Themes are sensitive so apply your optimization techniques cautiously.

Related Articles


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

4 Comments

  1. Posted August 21, 2006 at 9:41 pm | Permalink

    is there a tool which i can use to preview what my CSS would look like which is included in php files? something like frontpage which would let me preview the design?

  2. Posted August 21, 2006 at 10:03 pm | Permalink

    Yep, there is: The Secret of Successful Editing of WordPress Themes

    That will answer all your questions. And DO NOT use Frontpage. It will mess your WordPress site up, if you are designing for WordPress. If not, well, use the tips above to help you design your site.

  3. Posted March 23, 2007 at 1:56 am | Permalink

    Hi Lorelle,
    Great site you have with good reference material about WordPress and blogging.

    I was looking if you had som info about a CSS-compress plugin (http://dev.wp-plugins.org/wiki/css-compress)

    Are you familiar with this one?

    Ron

  4. Posted March 23, 2007 at 7:23 am | Permalink

    Yes, and I will be writing an article about it and other similar CSS optimization features soon. Thanks.


3 Trackbacks/Pingbacks

  1. […] 最後にCSS Optimization: Cleaning Up Your Stylesheet Analysisで述べられていることを引用しておきます。 これらのCSS最適化ツールはすばらしいものです。そらはあなたのスタイルシートから無駄な空白を取り去り、コードを簡素化してくれます。 […]

  2. […] CSS Optimization: Cleaning Up Your Stylesheet Analysis […]

  3. […] CSS Optimization: Cleaning Up Your Stylesheet Analysis […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,195 other followers

%d bloggers like this: