Depending on how many notes or messy modifications you make to your cascading style sheets, you might be about due for a little compression.  By shrinking you external CSS files, you can save the bandwidth it takes to download them, each time somebody visits your web site. 

Now how much optimization should you do?  Well, the CSS files should be small enough to load quickly, however readable enough to where you know what does what where, and why.  You have to balance size with readability.

Here are my three favorite online tools to help optimize and shrink my CSS files:

• CSSCompressor.com
• CSSOptimiser.com
• CleanCSS.com

By using any of these three solutions, you can reduce the CSS code size and make your web pages load faster.  They all allow you to choose from multiple degrees of compression, and they are all very quick too.

Related Tips and Tricks:

• Speed Up Pages by Combining External CSS
• Wizzypage – Great (and free!) Web Site Editor
• Best Web Site Speed Analyzers

© Lunarpages Web Hosting – Also, don’t forget to follow @lunarpages on Twitter!

Tell me, which of these would be easier to do? Carry ten pieces of luggage with you on your trip, or put everything into one piece of luggage?  The second, of course.  The same thing could be said for CSS files in your web site’s code. 

The use of multiple external CSS files, can slowdown the loading of a web page.  Instead of telling it, “OK, load this file now” you are telling the browser, “load this file.  Done? OK, now load this one, and this one and this one”.  The general rule of thumb when it comes to web design is to try to use three (or less) external CSS style sheets. 

Here are some rules of thumb for combining your CSS files in production from the Google Code site:

• Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn’t needed until the page load has completed.
• Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
• For CSS that shouldn’t be cached, consider inlining it.
• Don’t use the CSS @import rule from a CSS file. If possible, inline the imported CSS content in the main CSS file, or load the imported CSS from the main HTML document instead.

Also worth mentioning is the fact that you should make sure in your head tags, the link to the CSS files should go before any links to any scripts.  To put it in a way that everybody can understand – when your browser loads a page, it takes its time with JavaScript, because JavaScript can alter how the page looks, or the content inside the web page.  So, you should always call for your .css files before you call for the JavaScript files in your web page’s head code.

I hope this helps as a pretty good guide to shave some of the loading time from your web pages.  We might be talking about milliseconds here a lot of the time, but when it comes to delivering the fastest loading pages, every second does count, in true web site optimization.

Related Tips and Tricks:

• More Web Hosting Help, Tips and Tutorials!
• Affiliate Plan Payment Checklist
• Wizzypage – Great (and free!) Web Site Editor

© Lunarpages Web Hosting – Also, don’t forget to follow @lunarpages on Twitter!