Let’s Make The Web Faster

July 24, 2012

Photography Credit: Made U Look Photography

At the School of Rock Kat talks about the importance of serving up a snappy website experience to your visitors. A statistic from Mashable claims that one in four visitors will abandon a website that takes over four seconds to load. While visitors do tend to be more tolerant of slower websites in image-heavy markets such as photography the underlying message is still important for us to hear.

Personally, I hate waiting for really slow sites to load. If I need to see their content bad enough I’ll usually wait it out but I will rarely return and I certainly will not spend any time poking around the archives for more hidden gems, or checking out their advertisers. Instead, it’s right back to Google to click on the next search result.

The time you keep somebody waiting while loading your site on their computer is part of that first impression package, along with branding and layout. Most people understand the importance of the last two but rarely consider page speed along with them. I was looking at a photographer’s blog recently which actually took over three minutes to finish downloading, I’m not even exaggerating. I was so shocked I refreshed it to make sure it wasn’t a fluke. I’m a sucker for punishment, right?

The reason I bring this up is because I recently discovered our own page load times had gone from speedy to slouchy. This discovery flew in the face of our internal motto: Serve beautiful photography, fast.

I’ve since come to realise our website had been getting marginally slower month by month. But because Team Rock n Roll Bride has reasonably powerful computers and super-fast Internet access we never noticed it directly. It wasn’t until I was trying to load the site on a slightly outdated laptop and over a slower connection that I first became aware. And just think, as smart phones, tablets and 3G become more prevalent a light-weight, blazing-fast website is increasingly important.

So, over the last month I have been up to my elbows learning about the surprisingly complex world of page load times and I’ve picked up a few tricks which I think almost every small business could benefit from.

Benchmarking

To find out how fast (or slow) your website really is you need to gather some data. My two favourite tools for this job are Google Analytics and Google Chrome. This is where it starts to get interesting, or tricky… depending on your perspective.

Google Analytics

Around November 2011 Google Analytics started collecting page load times from approximately 1% of all visitors. This means, as long as you are using Analytics, you have some data available to you right now! Just go into your reports and choose Content > Site Speed > Overview to see the graph. The problem with this is, even with our not-insignificant traffic, a 1% sample rate creates a very erratic graph. A visitor from Uganda is going to have a much slow experience than one from the UK, for example.

The only way to get anything useful out of this data is to aggregate it by month rather than day. Fortunately, Google give us the ability to increase the sample rate up to 100%. To make this change you will need to add a line to your Analytics code. Let’s take a look at a typical Analytics tracking script with the extra option defined:

The new option can be seen on the fourth line and is called ‘_setSiteSpeedSampleRate’. For the more technically inclined further information about this method is available from the Google Developers site. If your Analytics tracking code was added by a more techy partner or a third party, you’ll likely want them to make this adjustment too.

With this implemented Google Analytics will give us great data about page load times. Using the built-in reports we can drill down to locate individual pages which are too slow, we can compare page load time by country and we can monitor how any changes we make in the future affect the rest of our visitors. I also recommend you download this great custom Dashboard for Analytics from Google. It gives you tons of really useful metrics at a glance. We now have no excuse to sit ignorantly behind our quad-core processors and 30” displays while Joe Bloggs struggles to scroll our enormous pages up and down on his grandma’s Packard Bell.

Google Chrome

Analytics is a great tool for telling you about your visitors’ activity on your site but we also need to understand how our own sites fit into the greater eco-system. How does your photography website compare to your nearest competitors’, for example? Perhaps you don’t need to worry about having the fastest site on the Internet, it might be enough just to be the fastest among your peers. Remember, if you and I are being chased across the plains by a lion I don’t need to outrun the lion, I just need to outrun you.

A really great way to benchmark your own site against others is simply to use the Google Chrome web browser.

Open your website in Google Chrome then press F12 on your keyboard to access the Chrome Developer Tools. In the DevTools window click the gear icon at the bottom right to bring up the settings dialogue. For now I suggest you just ensure ‘Disable cache’ is ticked so that your measurements will reflect those of a new visitor; a returning visitor does not typically need to re-download all the elements on your webpage. This should give us nice, repeatable, worst-case scenario data.

Close the settings dialogue and click the ‘Network’ icon at the top of the window. Now you’re ready to get timing! Switch back to the main Chrome window and refresh your website. When it finishes loading switch back to the DevTools window to see the results.

There’s quite a lot of data presented in the DevTools Network tab but for now you can ignore most of it. We’re really only interested in the timing data at the bottom of the window.

The image above is a sample of this site taken using the above settings. The particular area I want you to focus on is the grey bar at the bottom of the window. The first thing it tells us is that loading this webpage results in 103 separate requests. These requests will typically be images, JavaScript or external CSS files. At this stage, you don’t need to worry too much about what the requests are just know that more of them is bad; they are expensive, time-wise. And importantly smart phones and tablets will be more noticeably affected by them.

The next number on the grey bar is the total download size. Here you can see our homepage is 3.26MB. This will fluctuate slightly as the posts rotate and the images change but sits steadily in the low 3MB range. In case you get curious, the ‘three minute blog’ I mentioned earlier came in around 70MB.

The third number is the money shot, this one tells us how long the web page took to load. So here we have a surprisingly good result of 1.68 seconds. The two numbers in brackets give a little more detail about the load time by indicating when the web browser reached various stages in the load. Don’t worry about those for now.

Having measured how fast your computer can download your site it’s simply a matter of loading other people’s websites to get their vital statistics for comparison. When doing these tests bear in mind that any activity on your Internet connection will skew the results, e.g. streaming music. For the best accuracy you will also want to repeat the test several times for each site and calculate averages.

Feel free to leave a note in the comments with your page times and a link to your site. It could come in useful to have a record of it for comparison. If you’d like to time Rock n Roll Bride for yourself and put your results in the comment too that’s fine by me!

There are lots of other tools and services available online but Analytics and Chrome are the two I’m reaching for on a daily basis because of their ease of use and the richness of the data they provide. Remember, you don’t need to outrun the lion. Well, not just yet anyway.

Set a reminder to come back next Tuesday to read my follow-up post where we’ll learn how to advance from observation stage to making the first changes towards building a faster web.