There has been a lot of emphasis placed recently on improving the performance of websites by increasing the load time of pages and fairly recently, Google compounded this by incorporating this factor into their search engine algorithm. It should be noted that this is a relatively minor component of their algorithm but nevertheless if you have a well optimised, SEO-friendly website then everything helps and it may be the difference between yours and a competitors site when it comes to SERP (search engine ranking position).

The benefits of using Cascading Style Sheets (CSS) over conventional HTML to style your web pages is obviously well documented and by separating the page content from the formatting it makes your pages load faster, contain a higher content-code ratio and gives you much more control over the layout of your pages.

What is often overlooked by many web designers and SEO specialists is the actual size of these external style sheets and the effect that they can have on your overall page loading time. Optimising your CSS can be completed via a three-stage process to significantly reduce the loading times of your sites web pages:

Stage 1: Use External CSS Syle Sheets

CSS files are cached by all web browsers and therefore do not need to be downloaded every time a new HTML document is requested from the server. Therefore it is important that you move away from inline CSS styling on your pages and instead put all of your CSS on an external style sheet to take advantage of browser caching and reduce your page-loading times.

Stage 2: Combine ALL External Style Sheets

This step in itself does not reduce the size of the code itself but it does have the advantage of reducing the number of HTTP requests made to the server. For example if your page is styled by 3 external CSS sheets then your internet browser will have to make three separate requests to your server, combining the CSS onto one sheet will reduce this to one server visit and consequently increase the loading time of your page.

Stage 3: Use a CSS Compression Program

There are a number of sites that offer free CSS compression and they are extremely easy to use. Simply copy and paste the contents of your single CSS style sheet and let their compression tool shrink the size of your code. This step will can often reduce the size of your CSS file by up to 50% without comprising the integrity of your code.

Final Thoughts:

If you follow the above steps you should hopefully be able to significantly reduce the size of your sites CSS which will in turn give you minor SEO benefits whilst also improving the performance of your site for the most important people of all, your visitors.

David Hughes works as an SEO consultant for Website Design Watford and specialises in Search Engine Optimisation for small businesses.