October 20th, 2016
As we know, mobile web has exploded and is taking an ever increasing chunk of all internet traffic. This is the main reason why we practice mobile first, responsive design in our web projects. The other side to design is implementation, and this is where we come to the most critical part: how fast your website loads for users on fibre optic broadband all the way down to 3G.
Why is this so important? Well, studies have shown that people are becoming ever increasingly impatient. In fact, up to a whopping 40% could abandon a website altogether if there are no signs that the page is loading after just three seconds, and this number can increase by 10% every 1.5 seconds thereafter. To make matters worse, you’re unlikely to know that people are even leaving, as most analytics services are not able to capture data until after the page has loaded.
Forrester Consulting on behalf of Akamai Technologies, n=1,048 U.S. online consumers, September 2009
How did we become such an impatient society? A few years ago, people expected to wait much longer, network connectivity was a lot slower, and so there was no expectation of an instantaneous experience. Then, the rise of the smartphones and apps with pre-downloaded content and pre-fetching abilities paved the way in terms of technology and accessibility, but also created a higher expectation in users and the speed they retrieve and digest content. Social apps, in particular, provide infinite scrolling experiences, so the next piece of content is just a flick away. In a heavily saturated, easily accessible mass-market of information, it has created an abundance of throwaway content, and we just don’t have the time to sift through it all properly. We have to have our attention grabbed quickly.
You could be missing out on a huge portion of your audience, just through their impatience alone. Which is sad when you may have put so much love into a brand, product or business, only to not get people through the door. If you were missing out on these people, wouldn’t you want to know about it?
There are things you can do about it. So, let’s explore how you would go about checking your website load speed is up to scratch. There are many services available that can show performance indicators of a website, for example:
Each will give you a variety of measurements and suggestions that can help diagnose website performance issues. In this case we can use Webpagetest.org to break down how a website loads. Firstly, we need to know what to look for. Here are the three main indicators that can be used to measure load speed:
- Time to first byte – This is the time it takes for your browser to send a page request and receive something back from the website server.
- Start render – This is how long it takes for the browser to start rendering something, even partially, on screen.
- Total page load – This is the time for all page assets such as images and copy, to download and display in the browser.
In this post, the metric we will focus on is the start render. If there is something on the screen, even a partially uploaded page, then the user is going to cut you a bit more slack. They are less likely to leave as this sets up an anticipation indicator for the user that the content they requested is coming soon in its entirety.
As an example we will use our own website hatchedv5.mystagingwebsite.com as our test candidate using one of their test locations, on an Android Nexus 5 phone.
We can see in the image below just how much of a difference the start render can make, on the left we have a blank screen – there is not indication anything is happening, the website may load in one second, or not at all.
Compare this to the right screen, which occurred after the browser has received enough of the webpage to do an initial start render of the page. These screens are poles apart and although the image on the right is not completely loaded, we know something is happening and we can start to anticipate using the website.
Now let’s look at the results:
We can see from the table below that the first byte is coming in under 0.5 seconds, then the browser starts to render in under 1.2 seconds and finally the total load occurs in just over 5 seconds.
| Load Time | First Byte | Start Render | |
|---|---|---|---|
| First View | 5.078W | 0.424s | 1.165s |
| Repeat View | 2.108s | 0.366s | 0.682s |
We can see this clearly in the visual flow chart below, exactly what the user would have seen in this case:
We can also see from the graph below that the website reaches a 97% visually complete point at the first render.
Not all websites are the same, and the more complex pages are always going to have more of an impact, so it’s good to have a minimum reachable goal.
We believe a website should always aim to at least reach the start render stage in at least 2.5 seconds. This is a good starting benchmark that can be improved given the right optimisations and tweaks. There are so many factors that can be considered and everything apart from physical geography should be changeable. So load speed is truly one of the biggest opportunities to boost customer confidence and trust in your site, and sow the seeds that will make them want to tell others about you. A few seconds can make a big change.
If you feel like you’re missing out on visitors on your website, then why not get in touch and we can help explore what’s possible and take your website to the next level. Sometimes the simplest things can make the biggest difference.
