Web users are not patient. The speed of your site can make a massive difference to whether people will visit your site, whether they’ll stay on it, and whether they will come back. Not to mention whether they’ll make a purchase. Not all the web-users that’ll find your lagging pages a cause for complaint are even human. Search engine spiders measure site speed and use it as part of their ranking process, so if your site is sluggish, your potential visitors might not even find it to begin with.

As such, site speed should be a vitally-important component in your web development – especially if you’re working with an e-commerce site, where conversion rates and customer retention are your top priorities.

We’re Only Human After All

A massive 79% of shoppers disappointed by site performance say they’re less likely to use the site again. What constitutes ‘disappointed’? The Kissmetrics research on customer reactions to site speed has resounded across the industry, but it’s not something that should be forgotten: “If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.”

That’s a 7% reduction in your conversion rate, and 52% of customers say site speed is a big factor in their site loyalty. A one second delay is bad – a two-second delay is worse. 47% of consumers expect web pages to load within two seconds. Overall, the Internet can be slow. An improvement by one second results in a 27% conversion rate increase. If your site is slow, you’re going to lose customers and risky being superseded by competitors, or even apps.

Desktop Vs Mobile

Mobile connections are usually slower than desktop anyway, so further delays are felt even more keenly – making it a high value consideration to ensure mobile pages are sufficiently optimised. This becomes even more of a consideration when you factor in how much eCommerce traffic is now mobile – the Trainline, the top-scoring website in our recent research, receives only 42% of their traffic from desktop, with 58% coming from mobile devices.

Make Your Site Work For You

Your site speed isn’t simply a dial you can turn up in your page settings. There are a number of factors which contribute to it – here’s what they are, how they’ve been implemented (or not) across the industry, and how you can start making your site one of the fastest out there.

Protocol Power

HTTP/1.1 isn’t SPDY enough. Network protocols are the rules and standards that govern the end points in a telecommunication connection – how data is transmitted over the web. Common examples include IP – Internet Protocol – and HTTP – Hypertext Transfer Protocol. The HTTP/1.1 protocol is decades old and doesn’t make full use of newer technologies. HTTP/1.1 enables only one request per connection, while browsers now support maximum 6 connections per domain.

Since the time of HTTP/1.1, Google has experimented with a newer version of the protocol named SPDY (“Speedy”), which allows simultaneous connections to be opened, and means that it can serve multiple parts of the website (JavaScript, HTML, images, etc.) in parallel. But SPDY isn’t the latest protocol developed by Google. Working closely together with W3C (World Wide Web Consortium), they’ve developed the new HTTP/2 protocol. HTTP/2 has roughly the same characteristics as SPDY, but is also binary, and allows the server to ‘push’ information to the requester, with better HPACK compression.

Despite the clear advantages of the HTTP/2 protocol, only a few websites have made use of it. Our recent research discovered that only 2% of the top 50 e-commerce sites use the technology – compared to 11.3% of sites overall. Only the Train Line and Expedia travel-booking sites made use of it. According to Cloudflare when they implemented HTTP/2 they seen customers average page load time nearly halved – from 9.07 seconds for HTTP/1.X falling to 4.27 seconds for HTTP/2. That’s a significant improvement in a key area of website efficiency.”

It’s not what you might expect – e-commerce sites have the most to gain, and yet have possibly the lowest representation in the high-tech protocol market.

How To Tackle Protocols: HTTP/2 & You

If you want to be at the forefront of network protocols – and at the top end of the list of speedy (though not SPDY) sites, it’s important to get an HTTP/2 protocol in place. While HTTP/2 only requires the server to support the new protocol (a large number of server software providers have started to support it, though Microsoft’s IIS has no plans yet), the browsers will require a TLS connection. This means that every connection made over HTTP/2 will be safe and secure, adding an extra layer of security to the internet. For more information on how you can get started with HTTP/2, have a look at our in-depth article here.

It’s All About Size

It makes sense that if you’re trying to get speed up, you need to keep size down. The less there is to move from the Internet to the user, the less time it takes. The e-commerce sites looked at in our study were smaller on average than other webpages out there – a whole 18% smaller, at 2.01MB compared to a global standard of 2.47MB. The smallest of the sites looked at was Swedish furniture retailers IKEA, who kept their site flat-pack and easy to transport at only 217kB. Because these sites are small, content delivery is efficient and effective – the eCommerce industry is tackling the size problem well.

Format, Compress, Minify

One of the biggest issues on plus-sized websites is pictures. Unless they’re compressed and resized to suitable formats, they can be over-large and slow page speed to a crawl. The solution to that problem explains itself – compress and resize – but less obvious fixes can be found in using the appropriate file type. The .png format assigns each colour in an image a number, making files smaller if they’re in block colouring and simple – like infographics, illustrations and icons.

But for photographs, with a wide number of colours and much finer details, .png can compromise the quality of the image. You might consider using .jpg files instead. A smaller impact, but which is multiplied across the website, is to minify the various source codes. The CSS and JavaScript resources could be minified using tools like http://javascript-minifier.com/ and http://cssminifier.com/ into a single string/line and should save kilobytes, which otherwise would be spent on white space. The HTML should be also as compact as possible, which still could be minified –though that could make future analysis much harder. We recommend stripping out all the unnecessary white spaces and empty lines.

Time To Go Mobile

All of the 50 retailers in the study had websites optimised for mobile devices, but 24% of them would serve their mobile users separate mobile site – usually on separate sub domain. While this approach solves the UX requirements of mobile friendliness, it can be inconvenient for two reasons:

  • Google handles subdomains as separate domains.
  • Depending on how the redirects based on viewport are set up, in the new, mobile-first index world, this can mean that the Googlebot (visiting with smartphone user agent) will have troubles reaching the desktop version of the site.

A safer solution can be to use a responsive site – one page that delivers the same HTML code to all devices, but adapts to the size and shape of the device used. Our study found that this had representation on only 76% of the sites. What’s alarming is that the mobile sites themselves were largely poorly-optimised for mobile; the average mobile site scored 56/100 for speed, as opposed to the average desktop score of 65/100. Hewlett Packard had a massive difference of 29/100 between their desktop score (at 77/100) and their mobile (48/100), while the worst offenders were Debenhams, with a mobile score of only 20/100 – though it wasn’t much less than their desktop score of 24/100.

Speed has been a factor in search engine rankings since 2010, and Google have recently announced that they are implementing mobile-first indexing. Webpages will be evaluated by their mobile versions before their desktop versions. As a result, it will be these mobile scores – lower scores on average, as mentioned – which take precedence in Google’s eyes. For these websites where the mobile page is severely lacking, this represents a potentially-large hit to their rankings, and accordingly, their traffic and conversions.

Mobile Management

Much of the mobile optimisation requires coding and/or web development skills (as well as the site size recommendations we’ve already made) but worry not – Google have created a guide to delivering a mobile page in under a second, which you can find here.

Browser Caching, JavaScript Tweaking & AMPing

With browser caching, resources can often be loaded from the cache, rather than transmitted from the server. While there are expiry dates on these stored files and resources, the availability of this cache can improve site speed for returning visitors who have loaded the page once already, and especially for frequent visitors (i.e. your loyal customers). Browser caching can be quite complicated, so it’s worth investigating this further and to create the right scheme and strategy. Some basic tips can be found in this Google guide.

Any Variables To Declare?

JavaScript needs to be loaded and then executed. This takes time, which will pause the rendering of the page, as both JavaScript and CSS are render blocking elements of DOM. We recommend that JavaScript that isn’t absolutely essential is loaded at the end of the page (just before the closing </body> tag). The larger JavaScript blocks should also be put into a .js file and loaded externally to the page load. This allows the browser to load the resources with more efficiency and allows the browsers to utilise their cache. When it comes to the JavaScript itself, there are several techniques to optimise its execution time or consumption of memory, such as declaring all variables at the same time (using just once the keyword “var”) or using function expressions.

AMP It Up

AMP – Accelerated Mobile Pages – is Google’s initiative for producing quicker, more efficient webpages for mobile. It’s a work-in-progress, but every day brings new developments and more support, as well as more customisation and stability. AMP pages have a number of benefits for all sites, including being preferred by Google in search rankings, and being faster to load (i.e. higher site speed, exactly what you should be looking for) and for e-commerce it’s a technology to implement ASAP, or at the very least, keep an eye on.

While AMP debuted for publishing sites, recent updates have brought eCommerce sites into the fold, and eBay in particular have been quick on the uptake, now serving over eight millions pages through the AMP system. Customisation on e-commerce AMP pages is low at current, but it’s an ideal technology for the industry as it allows customers quicker transition between products – improving conversion rates and making the website easy to use. During testing on the Kaizen pages, AMP was found to have a 71% faster load speed for blog posts, and a reduced page size from 2.3MB to 632kB.

Onwards & Upwards

Site speed isn’t a problem that’s going to go away. As time goes by, the technology improves – AMP and HTTP/2 are just the latest steps on the road to real-time loading. 5G is on the horizon, and customers are only going to become less patient with slow-loading pages. As a result, it’s increasingly necessary to keep an eye on your site analytics and your customer behaviour. Third party tracking codes, external plugins and the like will slow your pages down whatever you do, but with the tips and tricks we’ve provided here, you can optimise your site and squeeze every line of code for more speed.

Be sure to also have a look at how the top e-commerce sites have managed their speed (or failed to do so) in our datagraphic here.