Design Your Website For Speed - Optimize Your Cascading Style Sheets

Designing your website for speed keeps all of your visitors happy. You never know what sort of a connection your visitors are using. They may be using mobile phones, their blackberry or even a old modem connection.

The speed at which your websites loads on their browser is important to your website’s success.

Cascading Style Sheets

When you decide to design your site for speed, one important consideration is the Cascading Style Sheets that can help you speed the server response time for your clients.

Cascading Style Sheets make websites much more efficient. They allow the browsers to cache style-related information from the .css file directly so that information does not need to be downloaded every time the users load a page.

Optimize Your CSS Code

Even if Style Sheets are naturally more efficient than HTML tables you can still optimize the CSS code to make your website cleaner and faster.

Group Your Code

First of all try to group your code. Instead of writing out the full:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

You could be using the .css defaults (top, right, bottom, left) and write your code as:

margin: 10px 20px 10px 20px;

Simplify Class Use

Instead of stating a class multiple times:

<p class=”decorated”>the first bit of text</p>
<p class=”decorated”>and the second </p>
<p class=”decorated”>and so on</p>
<p class=”decorated”>to the bitter end</p>

you should use:

<div class=”decorated”>
<p> the first bit of text </p>
<p> and the second </p>
<p> and so on </p>
<p> to the bitter end </p>
</div>

This will speed things up.

The extra advantage?

It is a much cleaner code that another programmer can easily read and use.

The Other Extreme

Class selectors can are often overused.

For example, you may need to style some elements within a <div>.

All of the elements could be styled using one class applied to the entire <div>.

Avoid unnecessary like this:

<div class=”rightsidenav”>
<h2 class=”rightsideheading”>Right Side Site Navigation></h2>
<ul class=”rightsidelist”>
<li class=”rightsideitem”> item 1</li>
<li class=”rightsideitem”><a href=”#”><span class=”sidelink”>item 2</span></a></li>
<li class=”rightsideitem”>item 3</li>
</ul>
</div>

Instead, make one <div class=”something”> for all of the elements using one class like this:

<div class=”rightsidenav”>
<h2>Site navigation</h2>
<ul>
<li> item 1</li>
<li><a href=”#”> item 2</a></li>
<li> item 3</li>

CSS Optimizer Tools

There are CSS optimizer tools on the market that can help with this process of merging similar selectors, remove useless properties and removing whitespace.

Cascading Style Sheets can help you speed the server response time for your clients and there are CSS optimizer tools can help make you a real pro at this.

A Better User Experience

Do this and your online visitors will appreciate their visit, even if they don’t realize the work you have done to make it a better experience.


This articles is part of the Design Your Website For Speed series.

Speed is an important consideration for international internet marketing. The other articles in this series are:

Design Your Website For Speed - Use The Height And Width Tags

Design Your Website For Speed – Use A Forward Slash On Your Links

Design Your Website For Speed - Reduce the HTTP Requests