Top 10 things merchants should do to improve site speed
Are you an eCommerce merchant looking to speed up your site?
Maybe you’ve already ran a test on your site speed and you know there’s room for improvement… but the list is so long you don’t know where to start.
Or maybe you’ve only got a small performance budget to work with right now, but you need some measurable ROI to take back to your boss to convince them to part with a bit more dosh.
Either way – this blog post is definitely going to be helpful to you!
Not only have we summarised the top 10 things you can do to improve your site speed – we’ve arranged them in order of implementation cost, ranging from the stuff you can do for free to the most expensive.
All will provide ROI – in varying degrees – so no matter what your budget is, you can be sure your time and money won’t be wasted.
1. Optimise your images…
Probably the lowest-cost, but highest-impact thing on this list that will help an eCommerce site is optimising your image files. No matter what you sell online, it’s likely that the largest files on your site are images and video – but good quality photographs, graphics and product demonstrations don’t have to be huge files.
As well as making sure images are uploaded (and displayed) at the correct size, you can use modern image and video formats – like WebP, JPEG2000 and JPEG XR – to ensure the file sizes stay small, without compromising on quality. Don’t forget not all browsers accept these file types though: luckily a good CNS will detect the device and send the correct image format.
Don’t forget to build your team a roadmap for sticking to this one – it could be as simple as, “Every time we upload a new image, we’ll put it through Google Squoosh first.” It’s much easier to put into practice as you go along, than go back and optimise 1000s of images later down the line.
2…Using mobile as a benchmark
A growing portion of eCommerce traffic now originates from mobile devices, so it makes sense to use them as a benchmark. For example – text sized to fit within a desktop-sized banner is unlikely to be readable on a mobile device, so it’s worth designing mobile versions of these separately to ensure they are still of value to a mobile user. Similarly, a desktop has a larger screen, so requires a larger image, but sending the same large image size to a mobile device is unnecessary, as the majority of the pixels won’t even be seen on a small device.
3. Minimise your systems
Many merchants find they actually have multiple systems on their site doing the same thing – for example, tracking. You might have Google Analytics, Adobe, and Microsoft systems all providing you with very similar data – do you really need all three? A lot of similar software on the market has roughly the same features, so we’d usually advise picking the one that suits your needs the best (or the one you know your way around!) and just sticking with that one.
An extra bonus to this one is – you might actually end up saving some money by consolidating everything! Music to the finance team’s ears…
4. Turn off third party tools when not in use…
Sounds simple… but lots of merchants forget about this one! Not using data from HotJar right now? Switch it off. Only running A/B testing on your checkout process right now? Then don’t load it anywhere else on your site besides within the checkout.
This might only save you a little bit of load time, but across 1000s of users (and depending on how many tools you have implemented on your site) like a lot of things on this list, it could really add up.
5…Or remove them completely
When was the last time you audited all your plugins, modules and tools to check what you’re still using? There’s a decent chance you have at least one that you don’t need any more – whether it’s barely used as it is, or the feature you installed it for is now covered by a different system, it makes sense to get rid.
No matter what tools and add-ons you are implementing on your site, they should fit into your overarching strategy. Whenever considering a new tool (or auditing current ones), ask yourself: will this make a measurable and real difference to the user experience? If the answer is ‘no’ (or even ‘maybe’) – the boost in site performance you’ll see in not having it likely outweighs any other benefits!
6. Delete unused code
A little disclaimer though: please don’t go fiddling around in the code if you don’t know what you’re doing – the results could be disastrous! Just have a chat with your agency or developer about things that could be removed: we’re sure they’ll have some ideas. (They don’t? Get in touch with us instead!)
7. Use Lazy Loading
We love being lazy. No, no, not like that – lazy loading. Why bother loading everything at once, when every user journey is slightly different? Much better to have a super-fast, super-slick homepage and load the other elements as users move through your site.
Here’s a few of our favourite ideas:
- Load an image in place of the chatbot – and only load the full system when a customer interacts with it
- Hold off loading any of the checkout on the homepage – load them only once a customer reaches the checkout
- Don’t load search libraries until a user enters 3 or more characters into the search block (since anything below this is unlikely to be what they’re looking for anyway)
8. Minimise your requests
It’s a great idea to minimise the number and size of requests your site makes wherever you can, for a number of reasons.
As a general rule: don’t send pixels that won’t be displayed, don’t send bytes that won’t get used, don’t send products customers don’t ask for!
Larger or multiple requests will have a bigger impact on device hardware, so minimising these will deliver a better experience for all shoppers, whether they’re shopping on the latest iMac or a hand-me-down smartphone!
It’ll also reduce the strain on your servers – a sudden influx of traffic is much easier to deal with when devices are requesting 100kb of data… Whereas if they’re all requesting 100mb of data each, a huge spike in traffic could even bring your site down. Not what you want!
Similarly, you can save bandwidth by using minification within your codebase. Minification takes human readable code, removes unnessaccary data – such as whitespace – and reduces the size of the file; with techniques such as changing variable names from words to single letters. While removing whitespace might not seem like it could make a huge difference to site speed, when you’re talking 1000s of instances across your eCommerce site, it really could make a considerable improvement!
10. Move to PWA
This is the big one. The motherlode. The thing that’ll get your site moving faster than… well, pretty much anything else you can do on your current site!
If you want to future-proof your site, this is the one to go for: and while it’s certainly an investment, it might not cost quite as much – or take as long – as you might expect. Our PWA Accelerator could get your new PWA site up and running in just 8-12 weeks, from as little as £50,000. That’s a small price to pay for a customised, high-performance eCommerce store that’ll be robust and adaptable for years to come.
Still not sure where to start? Get in touch today for a free no-obligation mini site audit – come away with actionable insight and a peek at exactly how we can support your business growth.
Join our workshop?
This month we’re hosting an invite-only workshop for eCommerce merchants exploring this topic in-depth – as well as cutting through technical jargon to demystify performance, attendees will come away knowing their site’s performance score, and how to fix it if it’s not up to scratch. If you’d like to attend, email firstname.lastname@example.org to request an invite.