Design Method

Speed Up Your Website – Minimising HTTP Requests

Google uses over 200 factors in their search engine algorism. One such factor is site speed, i.e. the time it takes for your website to load.

More importantly, slow load times can frustrate your visitors and deter them from using your website. There is very little point injecting more and more money into marketing and SEO, when the website itself is poorly optimised. Therefore lowering site load times is an important aspect of your website that you need to bear in mind. Over the next few weeks we’ll be exploring various ways of improving load times.

How do I know if my website loads too slow?

Google Webmaster Central offers a great tool that shows how your website is performing in terms of speed. It’s calculated by tracking the load times of real visitors on your website from all around the world. You can access this information under Labs » Site performance.

Edit:Google Webmaster Tools no longer offers Site Performance in their labs section. You can find out site speed data using Google Analytics, or their Page Speed tool.

For more in-depth information you can use plugin such as YSlow, which analyses and gives suggestions on how to improve loading times.

OK, so how do I improve my load times?

As stated above, there are many ways to improve load times. Today we will be looking at minimising the number of HTTP requests to improve performance.

According to Yahoo, 80% of the end-user response time is spent on the front-end of the website. A lot of this time is spent downloading the various components on the page such as images, stylesheets, scripts etc… Therefore by reducing the number of components the browser needs to download, we can decrease the load time.

Here I’ll discuss a couple of the techniques used to minimise HTTP requests.

Combining Files

Let’s start by seeing if we can combine multiple CSS files into one stylesheet, and also all script files into one master script file. If the scripts and stylesheets you’re using vary from page to page, do what you can by gathering up what’s common throughout.

Combining files is a very simple process; all you need to do is concatenate the files together in the order the files are included. You need to do this to ensure that you don’t upset the dependencies.

If you want to automate this process you can use Minify, which is a PHP5 app that combines and minifies multiple CSS / JavaScript files, and then serves them with Gzip encoding and optimal client-side cache headers. If you don’t know what some of those mean don’t worry; we’ll discuss them in laster posts.

Using CSS Sprites

Another thing you can do to to minimise HTTP requests is to combine multiple background images into a single image sprite. Let’s say we want to add the following social network links to our website:

The HTML for the above would look like the following:

[html]
<ul id=’sn’>
<li id=’fb’><a href=’#’ title=’Find us on Facebook’>Find us on Facebook</a></li>
<li id=’tw’><a href=’#’ title=’Follow us on Twitter’>Follow us on Twitter</a></li>
<li id=’gp’><a href=’#’ title=’Add us on Google+’>Add us on Google+</a></li>
</ul>
[/html]

What some people may now do is create 3 separate images for the links. However this would result in 3 different HTTP requests, and therefore we should avoid it if at all possible. With a little planning, we can create a single image the has all icons included.

First lets analyse the design once more:

From this we can see the dimensions of each list item. The height of the icon is 24 pixels, and I have added 5 pixels padding to the top and bottom. From this information we can now create the image sprite:

The yellow area is to indicate the image sprite area. In terms of dimensions the width is set to the width of the icon, i.e. 24 pixels. The height on the other hand is set to 102 pixels (3 x 34 pixels). For each list item we will position the background using CSS so that only the appropriate icon is visible. This can be achieved using the following CSS:

[css]
#sn{
list-style: none;
}
#sn li{
line-height: 24px; /* set line height to align text vertically */
padding: 5px 0;
background-image: url(sprite_sn.gif); /* set the sprite as the background image */
background-repeat: no-repeat; /* don’t repeat */
}
#sn #fb{
background-position: 0 0;
}
#sn #tw{
background-position: 0 -34px; /* set background to be 34px from the top of the sprite */
}
#sn #gp{
background-position: 0 -68px; /* set background to be 68px from the top of the sprite */
}
#sn a{
padding-left: 34px; /* Set padding to left so text doesn’t overlap icon */
text-decoration: none;
color: #525252;
text-shadow: 1px 1px 1px #fff;
display: block;
width: 100%;
height: 100%;
}
[/css]

Just to reiterate this concept further, the illustration shows how the CSS background declaration for #sn #tw is offsetting the background sprite image by 34 pixels.

As you can see it’s pretty easy to keep the number of HTTP requests to a minimum just by keeping these points in mind. It will have a major impact on the load times of visitors with an empty cache, which is apparently around 40-60%. Speeding your website up increases user experience, which in turn should help your website conversion rates etc…