Website Optimisation

8 ways to improve the speed of your Shopify store

A common headache we find many “non-technical” merchants have is that the Shopify ecosystem - with its multitude of easily installed themes and apps - can sometimes leave them with a store that feels slow to load, which is not only frustrating for potential customers, but also ultimately leads to less money in the bank in the long run.

Over recent years, technology platforms have become more focused on a specific purpose, and there’s none more focused than Shopify - the eCommerce platform that the entire world seems to be gravitating towards.

More and more, brands and merchants alike are either opening new stores, or migrating existing stores over to the platform in order to benefit from the many capabilities on offer that can be setup quickly, easily and (most importantly for startups) cheaply.

However, a common headache we find many “non-technical” merchants have is that the Shopify ecosystem - with its multitude of easily installed themes and apps - can sometimes leave them with a store that feels slow to load, which is not only frustrating for potential customers, but also ultimately leads to less money in the bank in the long run.

If this sounds like you - or someone you know - don’t fear! We’ve made some notes of the types of things we do when we review stores and noted them down below for your perusal.

How things used to be...

I started designing and building consumer facing websites in 1997. Back in those days, the dominant browsers were Netscape Navigator 3 and Internet Explorer 3, and the Internet speed I had at home was a whopping 56kbps, which equated to a download speed of about 5kb/sec - if you were lucky.

To put that into context… Netscape Navigator doesn’t exist anymore, Internet Explorer is no longer officially supported by Microsoft, and the average fixed-line Internet speed in the UK is now apparently 47.78Mbps, according to some people on the Internet who know about these things.

So today, the average Internet connection is over 800 times faster than it was back then.

Add to that the most recent advances in device and browser technology… Shouldn’t we all be living in a perpetual dreamland of instantaneous page loads across every website that exists?

Why the web is (sometimes) slow

You’d think… But it seems the more things change the more they stay the same.

Unfortunately these days more capable web browsers and faster Internet speeds are conspiring to cover a multitude of sins, and coupled with the amount of tools (such as Shopify) that are enabling more and more non-technical users to create web pages, we are finding ourselves in a situation where things are far from the dreamland we’d been lead to expect.

Don’t get me wrong - we love Shopify, and the impact the platform has had on eCommerce and merchants themselves is undeniably A Good Thing… But we hear stories every day from brands about how they wish their Shopify stores loaded more quickly, and rather than go so far as to say Fuck Google PageSpeed, we believe that building your website to be a fast and frictionless experience is a key piece of the puzzle for growing your business.

Thankfully the overall principles at play here have long been the same, and our desperation to minimise page load speeds back in 1997 puts us in good position to advise on this topic.

So with all that in mind, we figured a guide with some actual actionable advice might be helpful for people as a reference. So here’s a list of things you (or your friendly local developer) can do to help.

But why should I care about making my website faster?

But before you get into that… Some of you might be asking WHY should I do this? Well here’s a few independent points of view and links for you on that one.

“A 2017 Akamai study shows that every 100-millisecond delay in website load time can hurt conversion rates by 7%.” Amazon Found Every 100ms of Latency Cost them 1% in Sales

“You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.” Google Search Central Blog - Using site speed in web search ranking

“The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of visits are abandoned if a mobile site takes longer than three seconds to load. That's a big problem.” Think With Google - Find out how you stack up to new industry benchmarks for mobile page speed

“Website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0-5).” Site Speed is (Still) Impacting Your Conversion Rate

So a faster site means a better conversion rate, better search engine rankings, and happier customers, which are all things that put more money in your bank account right? And that’s not just our opinion, this is empirically proven!

So, onto the actionable tips

There is one main principle in play with these recommendations that you should always keep in mind: Load fewer, smaller files... From fewer servers. Here’s how we break that down into actionable steps.

1. Minimise the number of remote Page Requests a web page is making

For the uninitiated, a Page Request refers to the number of remote files (HTML, JavaScript, CSS, images, fonts, pixels etc) that are referenced and included on any given web page.

Whilst several files may be required in order for your website to perform correctly, if your website is loading slowly it’s highly likely that there are a number of unused or unnecessary files being loaded that you may not actually need.

For example, I recently inspected the website of a brand that had 459 Page Requests on their homepage, for a total Page Size (the size of the files being transmitted) of 4.61Mb. 155 of those requests were for fonts, while 128 were for JavaScript. That is insane.

How to view the number of remote Page Requests a web page is making

  • Open Google Chrome
  • Open Developer Tools by going to View > Developer > Developer Tools
  • Open the Network tab (if it isn’t already)
  • Go back to the main Chrome window and enter the URL for your store and hit enter
  • Now when you go back to the Network tab in Developer Tools you’ll see all the Page Requests that your web page is making
  • Identify which Page Requests are actually even necessary for each page on the website to function as intended without errors occurring, and have your web developer remove any that are redundant so they’re never loaded at all

2. Minimise the number of third party Page Requests you are making

Further to the above… Third party Page Requests such as Facebook, Google, Klaviyo, Hotjar or other tracking pixels may feel necessary for your website to function, but are you actually getting the value out of these integrations that would warrant slowing your website down with their inclusion?

  • Are you actually running Facebook or Google (or any other network) ads regularly enough to warrant using the Facebook pixel to track on-site events and conversions?
  • Are you actually using Klaviyo (or any other CRM) to the full extent of their capabilities in terms of segmenting your audience and sending automated emails based on their interactions on-site?
  • Are you regularly reviewing the interaction data you’re collecting from your Google Analytics or Hotjar pixels, and taking concrete action in response to your findings?
  • Are there any other third party tools that are injecting unnecessary code or pixels into your website that you don’t need any longer?

Take a look - or ask your web developer to look. If the answer is no to any of these questions - and you don’t have plans to use these tools in future, consider removing them to improve the load speeds of your pages.

3. Remove any unused apps

Again, further to point one above… The Shopify App Store is a great place to find tools that can help you improve the way you run your business, but the ease with which these tools can be installed can often lead to merchants trying tools out and then either leaving them in place, or not uninstalling them correctly. Many apps will leave behind calls to external fonts, CSS, or JavaScript that you just don’t need.

Once you’ve done the above you should be left with a website that only features Page Requests to files you actually need and want to include. From here, do the following:

4. Combine files

Every Page Request you make slows down your website, so where you can, combine multiple JavaScript or CSS files together into fewer files so your website is making fewer overall Page Requests.

5. Upload and serve files from the Shopify CDN

Coupled with the above, upload as many of your required assets as you can to the /assets folder in your Shopify theme - this ensures that they’ll be served via the Shopify CDN.

A CDN is a Content Delivery Network. In layman’s terms, you can think of it as a globally distributed network of computers that can serve your assets from a geographic location that is close to your customers, which in turn delivers faster loading times.

You can upload many different types of file here - JavaScript, CSS, fonts, images, etc. If it can be embedded into a web page, it can most likely be uploaded via the /assets folder.

To upload files to the Shopify CDN via the /assets folder:

  1. Login to your Shopify Store Admin
  2. Click Online Store > Themes under Sales Channels on the left side of the screen
  3. Click Actions > Edit Code next to the theme you want to upload files to
  4. Click Assets > Add a new asset
  5. Choose an asset to upload from your local computer

Then in order to reference JavaScript or CSS files, use the following code within your theme:

JavaScript
{{ 'filename.js' | asset_url | script_tag }}
<script src="{{ 'filename.js' | asset_url }}" type="text/javascript"></script>

CSS

{{ ‘filename.css' | asset_url | stylesheet_tag }}
<link href="{{ 'filename.css' | asset_url }}" rel="stylesheet">

Image

<img src=”{{ 'filename.jpg | asset_img_url: 600x' }}” />

Note: You can specify a pixel dimension to any  images served via the Shopify CDN, and you will receive a cached image resized to this dimension in response. You can read more about Shopify URL filters here.

6. Minify files

Minification is a process whereby any extraneous spacing, comments, carriage returns or variable naming is removed in order to minimise code and reduce file size. The minified file will then provide the same functionality whilst also reducing the file size of the request assets.

As a bonus, if you use the Shopify CDN as recommended above, any JavaScript or CSS files can automatically be minified at runtime by calling them as follows in your theme code:

{{ 'filename.js' | asset_url | append: "&enable_js_minification=1" | script_tag }}
<script src="{{ 'filename.js' | asset_url | append: '&enable_js_minification=1' }}"  defer=”defer” type="text/javascript"></script>

{{ ‘filename.css' | asset_url | append: "&enable_js_minification=1" | stylesheet_tag }}
<link href="{{ 'filename.css' | asset_ur | append: '&enable_css_minification=1' }}" rel="stylesheet">

7. Lazy load image files where you can

Lazy loading is a technique that ensures only images that are actually visible to the customer on the initial page display are loaded - minimising the number of unnecessary Page Requests made, and speeding up the load time of your website.

There’s a great article describing lots of different methods for lazy loading images over on the CSS Tricks website.

8. Efficiently load JavaScript files using defer and async

In some situations, when JavaScript files are included they can slow down the loading and rendering of your website, so it can improve page load speeds if you can load them in different ways using the defer or async attributes.

There’s a great article detailing more about how JavaScript defer and async tags work over on Flavio Copes’ website.

Ready to improve your Shopify speed score?

As with all things technology, your mileage may vary with these techniques, but importantly implementing any of them will definitely improve your Shopify page load speeds, which will contribute towards improved conversion rates and better search engine rankings. From your customers’ perspective, having a website that loads more quickly and efficiently can never be a bad thing right?

Drop us a line if you have any questions or comments!

JM

Further Reading