Webshop Performance Optimisation

When your customers are shopping on the web the last thing they want is a page that takes 30 seconds or more to load, personally when that happens I just close the web page and go somewhere else.

If you want to improve the performance of your Webshop there are a number of things you can do.

Benchmarking

The first thing I’d recommend is to perform some benchmarking on your website to find out exactly how slow it is, that way you’ll have something to compare the performance against when you’ve finished souping it up. You could get some software to do this or you could just rely on some simple timings using the second hand on your watch, but basically you want to get a set of measurements for your front-page, some of your major category pages and some of the major product pages. Write them down or record them in a spreadsheet.

Once that’s done you can start improving your Webshop’s performance

Make sure that Your Server and Connection are fast

This may seem obvious but if your server is bogged down because there are too many other websites running on it then you haven’t got a hope of making your Webshop perform well. Likewise make sure that your server has plenty of bandwidth, with multiple network connections and a fast internet connection.

Reduce the number of Requests

Each image, every external JavaScript script and each css file on your page causes a request to be sent from your customer’s browser to your server, each of those requests causes a connection to be opened between the two computers and the file then gets downloaded from the server to the client. Although these communications generally happen quite quickly when you’ve got a lot of files to get each of these small downloads adds up to a lot of time.

The problem is that it takes quite a few milliseconds just to make the connection and when you’ve got a lot of connections to make (one for each file) then all those milliseconds add up.

How can you resolve this?

What we generally try to do is to use image maps i.e. we combine a lot of images into one large image so even though we may be showing ten pictures we actually only download one file, so we save on the connection time for nine images.

We also refrain from loading below-the-fold images until the customer scrolls down on the web browser, when we design our pages we know that some of the images on the page won’t be seen by the customer until they scroll down the page. So using JavaScript we wait until the user scrolls down before we load the additional images, that way the web browser only loads the images that the customer is likely to see. All of those images way down at the bottom of the page don’t get loaded until the customer can see them.

Use a Content Delivery Network

A Content Delivery Network (CDN) will host some of your files for you, usually you would put your image files onto a CDN and any requests for those files will route to the CDN’s very fast servers, what they also do is to replicate your files across their own network and they will serve your files from the nearest server to the customer. For example if you have a customer who is in Japan when the request is made for a file the request is routed automatically (by the CDN) to the nearest server to the customer (probably in Tokyo). So although your Webshop server may be located in London a large number of your files will be located in Tokyo (and wherever else your CDN supplier has servers)

This also saves a lot of bandwidth as your files will only be loaded from your servers once by the CDN and any further requests will be satisfied by the CDN.

Use Gzip Compression on your Apache Server

This may be out of your control but we’ve found that by switching on compression on the Apache server the download time of your (text based) files will be much shorter. Typically a text file (css, html, JavaScript) will be reduced by about 50% in size when its compressed which means that the time taken to download the file will be reduced by almost a half.

Minify JavaScript and CSS

The smaller the text file, the faster it will be downloaded so using a compression utility to minimise your JavaScript and CSS files will again make the files smaller and make them load quicker. Especially when they are compressed even further by the Gzip compression on your Apache Server.

Setting a Default Expiry Date in the Apache Server

The Apache software has a setting to set a default expiry date of image files, what we generally do is to set this far into the future. When a customer’s web browser requests a file it will check the customers local cache to see if the file has already been downloaded and hasn’t expired yet. If the file is up-to-date it will use the local file instead of downloading a copy of the file from the server.

Further Reading

For lots more ideas on how to improve the performance of your online Webshop I would recommend the following

http://developer.yahoo.com/performance/rules.html

http://sites.google.com/site/io/even-faster-web-sites