Optimize Your CSS

The combination of XHTML and CSS can reduce size of a webpage, mainly by freeing up the layout from HTML tables. This does not mean that any XHTML and CSS code can do it. It has to be done the right way to be effective.

Here is where we use CSS Optimization, to make sure that we are using the leanest CSS possbile, which will reduce the bandwidth consumption and in turn increase the website performance. I came across CSS Tweak by Andy Peatling.

For people who have no idea what I’m talking about, CSS Tweak is a web based CSS optimization tool. It will take any CSS file and optimize the syntax, grouping your style declarations into shorthand where possible. It can also remove comments, and strip whitespace for maximum compression.

The one thing that makes it different from other tools however, is you can also stop it from altering your syntactical layout at all. Instead it will go through and stick with the layout you have defined, and clean up any areas that are incorrectly formatted.

CSS Tweak is a smart tool because it gives you control over the optimization that you want to do, including maintaining layout of the CSS file. The highest level of optimization removes white space, carriage returns, comments, everything. Help is provided to explain the options provided. You can control the level of optimization you want to do through the options given. One of my CSS files was reduced by 37% in size when full optimization was used.

CSS Tweak thumbnail

There are other tools out there which offer optimization like CSS Optimiser. However CSS Tweak stands out because of the finer control it offers to the users. As noted in the article, the CSS is only optimized, not validated. For CSS validation you can use W3C tool online or through Web Developer extension for Mozilla firefox.

Technorati tags: , ,

Copyright Abhijit Nadgouda.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: