Abiding Themes 8 / Increasing Website Speed

Back in March when it was announced that Larry Page would be taking the reigns at Google as CEO there was an interesting profile about him in Wired Magazine that had a lot of focus on his obsession with measuring things.  Google itself has always been fast, eschewing flashy design in favour of functionality, and with an obsession with scalability to ensure that whether the index is 100 pages or 100 billion pages, access to the information it contains is seamless.

One story, possibly apocryphal within the Wired piece covered the time when Page was being shown an early demo of GMail and he pinpointed the amount of time that a page took to load as 600 milliseconds.  That was too slow.

The longer it takes for an individual page to load, the fewer pages Google can crawl in a given period of time, and the longer it takes for content to be indexed.  In a world of instant demand where real time access to information is an asset, speed becomes essential.

Speed is also important to users.  A slow loading page on a retail website can increase bounce rate and severely impact on the conversion rate – although if your analytics package only runs after the page has been loaded, you will never know because the visitor won’t be tracked.  Google use page load speed as a factor in determining quality score for AdWords too, which means that a slow loading website will not only represent a poorer user experience, it will also cost you more to get traffic to that site in the first place.

Think back to how crap the internet was when you had dial-up and how your experience of the web was transformed when you moved to a 500K broadband, and then a 10M broadband.  It got better and you spent more time using it.  You were able to access HD video content, stream music, and interact with the web.  Change from fixed line or wireless broadband to 3G, even fast 3G, and your experience is completely different.  Poorer.

According to the BBC, the average user spent 22.5 hours online each month.  Of this time, around 4% was spent on search, 4.7% on classified ads / auctions, and 3.4% on products.  That means that the average user is spending around 2 hours on commercial activity on the web.  Time is precious, so the less time you waste for users is important.

Empire Avenue

I’ve blogged about Empire Avenue before, but recently my usage of the site has dropped off dramatically.  The reason?  It’s become slow.  There are a lot of reasons for this, but the main reason for Empire Avenue becoming a slower website is the amount of information that is being displayed, and the way people are accessing that information.

Each page on the site makes multiple calls to the various data bases that run the website.  Checking share prices in real time, analysing the stream of updates from other users, serving adverts, checking for message updates, monitoring the number of users in your portfolio, listing your recommended buys.  … The list goes on…

Also, like many users, when I’m on the site, I open multiple windows to compare the people I want to invest in.  That means that the number of calls to the database is increased significantly, further increasing the load on the server, and further slowing the site down.

Users can also build apps on top of the Empire Avenue databases.  These apps make complex calls to the database to extract specific information to identify good buys.  They do this constantly, and further slow the website down.

Ultimate outcome:  The site is slower for everyone and the user experience is negatively affected, putting people off making as many visits to the site.

Increasing Website Speed

For retail websites, the challenges are the same, the slower the site, the more time you have to spend on it, the worse the user experience, the less likely you are to buy.  Streamlining your site will speed it up and should be viewed as an investment in optimising conversion.  Here’s some ways of increasing website speed:

1: Understand the issues

Unless you know why your website is slow, you can do very little to speed it up.  There are plenty of tools available that will give you a quick overview of where the barriers are.  I like this one.  Pingdom is a nice simple app that requests a page from your server and breaks down the various elements that are being loaded and provides you with a time for each one, ultimately giving you a starting point to work from.  It outputs nice reports.  The first is a chart showing visually how long the different elements of the page took to load:

The second report tells you the number of elements that made up the page:

2: Reduce the number of files:

The fewer files that need to be downloaded from your server, the faster the page will load.  Simple.  In the second list, I’m downloading 83 files as part of the page, of which 70 are images, 5 are style sheets, and 6 are JavaScript.  I’m also calling in 43 external objects – mostly social networking plug ins and feeds.  That’s still a lot.

On smaller websites, you can normally combine multiple JavaScript files into a single master file.  All of the scripts will still run, but they won’t need to be loaded consecutively.  Also, multiple stylesheets?  Do you really need them, or can you get away with one.

3: Optimise Images

When you’re adding images to a web page, you should always re-size them appropriate to the size they will be displayed.  There are so many websites where thumbnail size images are actually multi megapixel iamges that it isn’t funny.

Most image editing software allows you to save at multiple resolutions and compression levels.  When saving an image, reduce the file size to the lowest level possible without reducing quality.  Tools like Smushit remove unnecessary bytes and can reduce the size of optimised images even further without reducing quality.

Where you are building a page that uses a lot of images, you should try using CSS Sprites.  Google do it with this:

Essentially, you load a single image into the page to perform multiple functions, and then expose specific areas of that image to create the look and feel of the page.  There’s a good tutorial here.

4: Streamline your Code

It is 2011, the chances are that your web designer has heard of CSS, and that your web developer has heard of external JavaScript files.  Use them.  Ultimately, more code you have on a page, the more opportunities for errors there are on that page, and the longer it will take to load.

There are examples where in-line styles are fine – when they’re used once on a single page of the website, however in most cases, it is way more efficient to use a class attribute to style some text.  I can’t think of any possible reason why a developer would want to have the same 400 lines of JavaScript on every page of a  website.    Put it in an external file, and then call it into the page as required.

5: Optimise Your Database

A lot of businesses develop the structure of their website and the design separately and then refresh the design every year or so.  Often adding new functionality.  Business needs can change and the number and type of database interaction can change with them.  As the database of customers or products grows, the queries that you used to build web pages when the site was first launched may no longer be fit for purpose.  There could be a lot of redundant data being requested, or overly complex SQL queries being used.

When the website changes, the data that sits behind it will need to change too, and you should review the way in which that data is both stored and requested to ensure that it is done as efficiently as possible.

6: Upgrade Your Server

OK, so I’m tight, and this blog is hosted on a shared server.  It costs me a couple of quid a month, but it doesn’t need huge amounts of server resource at the moment, and if it’s down for a couple of hours here and there, it’s not the end of the world.  However your business website is a different story.

As a business, you have a lot of responsibilities around user data, and security of that data should be paramount.  You should also think about the other websites hosted on that server.  Are there any that present a risk to you?  Are there websites on the server that place a disproportionate load on the resources and slow you down?

What if your business website is being slowed down by someone who doesn’t pay any attention to speeding up their site, or a personal website that gets hot on Digg or SlashDot.  The load created by those websites can slow your’s down.

The price of dedicated hosting is pretty low.  Do a search in Google, and there are companies offering a dedicated server for £45 a month.  That’s nothing to a business.  Also, contact your hosting company regularly.  Find out what they’r’e doing for their money.  Are they upgrading regularly, are they using the latest version of IIS or Apache?