Website Speed Optimisation

A fast loading site is a well converting site

It’s no coincidence the faster your site loads the sooner people can start browsing it, and the less people who press the back button after sitting at a blank screen for what feels an eternity. Amazon.com studies show every 100ms visitors wait results in 2% loss of sales. Google now factors speed as a factor in calculating a sites ranking. Sure your site may look pretty, but if it takes 10 seconds to load how many people are even staying around to view it?

What are the benefits of optimisation?

Lower Bounce Rate

Naturally the faster the site loads, the less visitors that hit the back button. A clever combination of improving speed and loading components in a way the site feels faster ensure visitors see your website giving you a maximum chance of converting.

Higher Conversions

A faster loading site results in a lower bounce rate, more time spent on site, and ultimately higher conversions. Amazon.com approximates every 100ms results in 2% loss of sales. Google finds every 100ms of load time results in 8 million less searches a day! That's millions in ad revenue

Search Engine Love

Speed is now a factor in determining search engine ranking. Part of optimisation is 'playing the system' to ensure Google loves your site, even if the items it wants improved make little tangible difference.

The Optimisation Process

Review

An in-depth review of the site is conducted, looking at a multitude of factors and what can be improved. Results are saved for comparison after optimisation is complete.

Optimisation

Analysis

The same tests are run which provide a before & after comparison of the website improvements. It's not uncommon to see at least 2x faster loading times!

Want the tech info? Here's what I do exactly:

Reducing Requests

During a page load, each file requested requires a 'handshake' between the browser and the server. Although it only adds a small amount of overhead, by the time this is done 30, 50 or even 100 times it's suddenly a few seconds of just communication overhead. The less files the browser has to download the less 'handshaking' required and the faster the required files will be downloaded (i.e. one 100kb file is much faster than 10 x 10kb files even though the total is the same due to 'handshaking'). Using a variety of techniques the amount of overall requests is reduced so there's the least amount of possible overhead during page load.

Perceived Speed

Now that we know the less handshaking the better, let's put everything in only a few files and it'll be fast! The problem with that is the browser has to wait for the entire file to load before it can display it (to an extent but let's roll with this for simplicity).

For example, let's say there is 20ms of overhead and 100ms of download time for each 10kb file. The 100kb file loads in 1 second (1000ms).

This means overall the combined file will be finished in 1020 ms, whereas the 10 individual files will take 1200ms, around 20% slower.

Although the individual files take longer to load overall, as each 10kb file is downloaded it can be displayed and you'll see the page loading piece by piece - so within 120ms you're seeing 10%, after 600ms you're seeing 50%. The 100kb file on the other hand won't display anything for 1 second. This gives the appearance of the page with individual files loading faster even though it's actually slower! What this means is there needs to be a smart balance between combining files so it has less files to load overall, but the key parts are loaded quickly so rendering can start as soon as possible. Simply combining everything into large files will increase the speed on paper however can visually make it slower which is no good.

Optimising Resources

Images, styles, scripts, videos & and other resources are optimised to their best format in order to have the lowest possible file sizes.

Caching Setup

Each page load the browsers request is processed by the server, the code is executed and the results outputted to the browser. Caching saves this output so when the same request is received again the output is instantly returned, saving valuable time re-executing code we already know the output of anyway. Of course it's not always that simple, there's factors such as logged in areas, shopping carts and so forth which have unique components - if we're serving everyone the same cart it's not going to have their specific items in it, logged in pages will say "Hi Bob!" which isn't applicable to everyone. As such it needs to be smartly setup, and often some code changed around so the common parts are cached and the unique parts are loaded separately.

Simplifying Code & Design

Although optimisation is a good mask for bad code, the best outcome is to always have the least amount to load in the first place. In tech talk: The less stuff you have, the faster it'll load! This is reviewed on a site-by-site basis and down to client preference; for example a site may have 4 different font variations, which you may like visually however adds overhead for the end user who doesn't most likely doesn't notice anyway. If that's reduced to 2 fonts we've saved an easy 50% without much visual loss.

And lots of other things

There's quite a rabbit hole to go down: Server optimisation, Content Delivery Networks, optimal hosting location and more. Like optimising a car, there is a certain point where improvements start returning only small gains for a lot of work. Depending on factors like traffic we'll establish the value point that works best for you.

My site was already optimised!

Optimisation is an ongoing process. As content is updated, ad networks changed, new functionality added and so forth, sites slowly bloat back out over the years. Even highly optimised sites benefit from a tidy-up every now and then.