Page loading times are now a crucial part of website optimisation, they are starting to be taken into consideration more and more by the algorithms of top search engines. For example, an ecommerce site which takes a long time to load will often result in a poor user experience; this in turn may lower the average time spent on the site, and increased bounce rates mean reduced income for the company.

So the big question is: what can be done to easily improve a site’s page loading time? – without changing hosting providers or spending large amounts of money on dedicated hosting servers? To answer this, we’ve got to look at what actually happens when a page loads and what can make some sites slower than others, irrespective of their hosting.

When a web browser goes to a website, it will make a request to the server for the required webpage. But the webpage will include references to images in its HTML code. These might be in the form of photos in blog posts or graphics to theme the site. All these images are seperate files and it’s the browser’s job to request each of them individually. For each image included in the page, the browser must initiate a seperate request asking for that image from the server. This request is then processed by the server and the file is returned back to the browser. All this passing back and forth for individual files requires an un-necessary amount of processing and bandwidth.

In step sprites! These are images that typcially include multiple graphics all in one file. Imagine the image file is a canvas and each graphic is a painting on a small portion of that same canvas. In order to use a graphic on that image, the browser must download the entire image in one go and then it can use individual parts of that image on the site.

For example, going to http://www.google.co.uk/search?q=news will return a webpage that makes use of what appears to be several images. Look at the infamous page navigation for search results here.

This consists of a series of links to browse through pages of search results. It appears to use indivudal images for each button; but on closer inspection of the code, it’s actually using a CSS sprite, a single image file with lots of individual mini graphics in it. The image in question is shown below.

Putting the majority of Google’s search result interface graphics on one image allows means that the overheads normally incurred by transferring each graphic as a seperate file are avoided. Rejoice – for in turn this will mean a faster loading web site!

Get Involved