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.
- HTML, CSS, PHP, and More Cheat Sheets
- DIY Search Engine Optimization
- Extreme Site Optimization For Speed Loading
- Site Optimization: Optimizing Bandwidth and Cleaning Out the Code Closet
- Meet Them: Benefits of Compliance with Web Standards
- Validating the Code Behind the Page
- CSS and Web Standard Feeds in One Place
- Fixing Browsers: Bugs and Hacks
- CSS and Web Page Design List of Resources
- CSS Maintainability – Serious Style Sheets
- CSS: Studying Your CSS Styles
- A Good CSS Tips, Tutorials, and Tricks Resource
- Validate an Entire Website
- CSS Bar Graphs and Charts
- Using CSS in PHP
- Look Into the Future of Web Design: CSS 3 Explained
- Why Do You Comment in the Comments?
Site Search Tags: css, style sheet, stylesheet, styles, stylesheet comments, optimization, optimisation, css optimization, optimizing, compress, compression, css compression, clean, maintenance, housekeeping, blog housekeeping, blog maintenance, web page design, webdev, website development, designing web pages, code, validation, validating code, streamlining, css analysis, clean css, strip
Copyright Lorelle VanFossen, member of the 9Rules Network