I’m not exactly saying anything earth-shaking when I say that a fast site is important.
For a marketer or ecommerce store owner, though, this becomes a pretty technical story quite quickly. And then there may be a tendency to shove it to the side and do other things. But that does not have to be the case. Guillaume Derolez, software engineer at Google, gave an interesting presentation during the ‘Conversions at Google’ event, one that is also understandable for non-techies. He focused especially on the speed of mobile sites, but many things also apply to the desktop and tablet version of your site.
How fast does your site have to be? And what can the impact be of a faster site? But above all: how do you make it faster? Guillaume Derolez covered these and other questions in a very accessible way in this presentation. A handy, easy-to-understand basic explanation for non-techies.
No time or not in the mood to watch the whole video? No problem! This is the summary:
Speed converts
A fast (mobile) site is a conversion booster. Intuitively, you already know that, but when you see the numbers, it’s often still impressive. Amazon, for example, saw their revenue increase by 1% due to making their site just 100 ms faster. One percent might seem small, but for Amazon, it of course translates to a huge amount of money.
But it’s not only Amazon. This major US retailer saw a 27% increase in the conversion rate when the mobile pages loaded 1 second faster:
But there are other impressive examples:
- Google: 2% faster = 2% more searches
- Yahoo: 400 ms faster = 9% more visits
- Fathead: 37% faster = 70% more revenue
Mobile sites: performance constrained, but your visitors have high expectations
However, mobile sites are ‘performance constrained’. If you think about it, smartphones are just about the smallest computers we have ever had and, of course, there are certain limitations. But at the same time, users have particularly high expectations from your mobile site. They judge your mobile site based on their experience with apps, which are native and therefore much faster than a mobile site. And so they set the bar very high for your mobile site. They just expect it to be very fast.
If you also look at the evolution of mobile sites, you’ll see that they have often become much heavier. In 2011, the average mobile page was 390 kilobytes. Today, that’s 3x more. Sites are becoming increasingly complex. But your site visitor is becoming increasingly impatient. Research has shown that:
- when the page load time increases from 1 to 3 seconds, it is 32% more likely that the visitor bounces
- when the page load time increases from 1 to 5 seconds, it is 90% more likely that the visitor bounces
- when the page load time increases from 1 to 6 seconds, it is 106% more likely that the visitor bounces
- when the page load time increases from 1 to 10 seconds, it is 123% more likely that the visitor bounces
Knowing that mobile traffic has surpassed desktop traffic since November 2016, it becomes clear that optimising your mobile site is definitely a smart move.
But how fast should your mobile site be?
Google recommends that you aim for 1 second. That is quite ambitious. It is not easy because you will have to make rigorous and sometimes painful decisions to get there. In any case, you must try to get under 3 seconds.
Important side note: Speed is partly perception. Your user doesn’t care if he is on 3G, 4G or Wi-Fi. He just wants your site to be fast, regardless of the network. Which, of course, is an additional challenge, since if your user is on a 3G network, you have already lost 600 ms to ‘overhead’ because of the network. That leaves just 400ms to work with, which is very tight.
Of course, your page does not have to load completely in that one second, which would be as good as impossible, but if the section above the fold is loaded, so your site becomes usable, that’s good enough.
The usual suspects for slow mobile sites
What makes a site slow, and what can you do about it? These are some of the most common issues:
Unoptimised images
On average, images account for 67% of total page size. If you make your page 250 kB lighter by optimising images, that translates to 1.25 seconds on a 3G network. There are different options for this:
- Use a one-off compression tool, such as ImageOptim (for Mac). This tool will significantly compress your images, without loss of quality.
- Make compression a part of your build workflow.
- Use lazy loading: you do not have to show all images right away, you can first show the images above the fold and only show the images below the fold later.
- Avoid ‘download and hide’ and ‘download and shrink’. With ‘download and hide’, you download all the elements on the mobile site that you also show on the desktop version, including those elements that you actually hide on your mobile site. That’s a waste, because that makes your mobile page unnecessarily slower. With ‘download and shrink’, you download the images intended for desktop on mobile. The images on desktop are often of a quality that is still too high for mobile users. You are better off using a lower quality image on mobile.
Non-minified resources
An e-commerce site often contains more Javascript than images. And so we should look not only at the optimisation of the images, we should also try to optimise the Javascript.
Some ways of reducing the code – up to 70%:
- Use GZIP: a way to compress files when you send them from the server to the smartphone. GZIP has become more or less a standard now, so you might already be doing this. However, should you not be doing that yet, it’s a good idea to work on this.
- Minification: your code is usually worked out in such a way that it is easily readable and usable for other developers, including spaces, comments, indents, etc. But this is not necessary to make Javascript work. So all of that can go. This is called ‘minifying’, and it makes your file lighter.
Too many requests
Research has shown that 68% of websites load more than 50 resources on mobile. That means there are too many requests made, which makes the site slower.
Some things you can do:
- Use the user’s browser cache. Each browser has a cache in which certain elements can be saved so that they do not have to be downloaded again. You can decide which files stay in the cache and for how long.
- Consolidate the resources of the page: If you, for example, minify your files, then you can merge them so that only 1 file has to be loaded instead of 5 different files.
- Load Javascript asynchronously
- Give priority to CSS above the fold, you do not necessarily have to load everything at once. If the part above the fold is already loaded in, for example, 1 second, then the visitor has the impression that the site has been loaded. As mentioned, speed is in large part perception.
Too many redirects
Every redirect takes time. For example, if you send an AdWords ad to a particular page, that is already a redirect to your site. If you then redirect to the mobile version of your site (e.g. m.example.com), you will even lose more time. You can easily already be up to 2 seconds, and there is still nothing shown to your visitor, as illustrated here:
With a responsive site, though, this is not an issue because there is no separate mobile version that your user is redirected to.
Conclusion
A faster (mobile) site can significantly boost your conversions. Generally, the development time required for this is relatively limited. Certainly if you are currently well above 3 seconds, there is undoubtedly a lot of ‘low-hanging fruit’. If you do not yet have one of the things above in order, start there. It will definitely benefit your conversions.