Drag

14-10-2021

How to Speed Up Your eCommerce site

Words - Tom Brownie

Blog Post

So – you’ve cracked the Google code, you’ve managed to get your site ranking in search results, and a user clicks on your listing. And then… nothing. That spinning wheel pops up as your site takes seconds to load. 

Seconds may not sound like a long time by any other measure, but in website loading times? Seconds is practically a death sentence. In fact, Google says that a load time improvement of a single second can represent up to a 27% increase in conversions. 

There’s no quicker way to kill a great site than with a sh*t backend. Sorry to be blunt about it, but it’s an element of your site, completely in your control, that’s not subjective to a user’s design preferences or demographic. 

And with Google now taking page speed into account for search rankings more than ever before, you can kiss those page 1 dreams goodbye unless you do something about it.

 

How do I find my current website load speed? 

If your own user experience isn’t enough to tell if you’ve got a subpar page load speed, there are a few tools you can use to see how your site stacks up: 

Google PageSpeed Insights

Pingdom Website Speed Test

Shopify Speed Score

The first step in fixing your page load speed is admitting you have a problem. The second step is making a plan to fix it, or enlisting an eCommerce development agency to help. 

As the owner of a conversion rate optimisation agency, here are the most common factors I see slowing down eCommerce websites and how to action them. 

 

Images 

Compared to the sites of yesteryear, eCommerce businesses probably house more images online than any other industry. Depending on your inventory, you could have thousands of images all loaded into your CMS – each one slowing down the time it takes to load your site. 

A tip that can compress your image sizes by up to 34% right off the bat – convert image files to WebP before uploading to your site. Smaller than both jpegs and PNG files, WebP images offer a huge reduction in file size without compromising on image quality. 

Elements like carousels and sliders will also bog down your site speed, and while they look great from a design perspective? As few as 1% of users will actually bother to click on the first image, and the probability that they then click through to the next one is all but nonexistent. From an eCommerce development agency – save yourself the space in your code and leave these features in the 2010s. 

 

Code

Whether you’re running an out-of-the-box theme or a custom-built site, there are layers upon layers of code working to deliver that final user experience that loads in the browser. The more plug-ins, apps, custom features and third-party scripts you start to build into your site, the more convoluted and complex your code becomes. 

If you’re using a platform like Shopify or WooCommerce, an easy win is to go through all your apps, themes and plug-ins, and remove any that you’re no longer using. 

A lot of these add-ons in the public domain also have extra, unnecessary lines in the code designed to help with future editing. Minimise your code by removing these lines and blanks – search ‘Minify Tool’ plus your platform to avoid a cutting-the-wrong-wire-and-setting-the-bomb-off scenario in the back end. A conversion rate optimisation agency can also help audit your existing code, and simplify the structure. 

Your fonts are another element that can tank your page speed without you realising. Custom fonts look great and help sell your brand aesthetic, but if the files aren’t loaded onto the user’s computer it can again add unwanted seconds to that load time. 

A font-display: swap property in your code can be a happy medium between best practice for site speed, and best practice for your brand. This pre-determines a standard font to load on the page initially, and then replaces with your custom font once the site has fully loaded. See this in practice for yourself here.

 

Scripts

If you’ve got your marketing efforts up and running, it’s likely your site is littered with scripts for Google Analytics, Hotjar, the Facebook Pixel and any other number of tags that push data back into your marketing platforms. 

While these scripts are definitely crucial in closing the loop of marketing visibility, they’re also death by a thousand cuts to your page load time. 

Luckily, your saviour here already exists, and its name is Google Tag Manager. A one and done script installation for Tag Manager means you can then implement and update all those other pixels and tags in just a few clicks. 

It’s rare that a solution is both best practice for your site and the most user friendly option, so shout out to Google on that one. 

 

Measuring success: First & Largest Contentful Paint

You’ve made it this far – well done. Time to see what impact your optimisation has had on your site. 

If you used Google’s PageSpeed Insights tool earlier, you might have seen a metric called FCP in the results – this stands for First Contentful Paint, and measures how long it takes from the start of loading your site for any part of the page content to load on screen. 

This time has historically been the benchmark for user experience, with a score of 1.8 seconds or less meaning your site is performing well. 

With the advent of Lighthouse, the newest version of Google’s tool that powers these insights, the platform is now pushing for Largest Contentful Paint (LCP) as a more accurate measure of perceived load time. In other words, users are more likely to care about when the main part of your site content loads, not how long it takes for the first element to pop up. 

Google’s LCP benchmark is 2.5 seconds or less, referring to the time it takes from the moment your site starts loading to the largest image or text block rendering in the browser.

Next steps: Work with a conversion rate optimisation agency

While these suggestions are all quick wins you can implement within the span of a week or two, there are plenty more gains to be made in your site loading time when working with an agency that specialises in eCommerce. 

The Natives is an eCommerce development agency with a proven track record working with businesses of all sizes to improve the user experience of their website. Get in touch with us – let’s have a coffee and chat about how we can transform your brand’s digital presence. 

17-10-2021

Should You Upgrade to Shopify Plus?

Read more

14-10-2021

How to Speed Up Your eCommerce site

Read more