Site speed matters. Particularly so when it comes to e-commerce websites. The numbers are clear; your site’s conversion rate decreases by an average of 1.2% for every additional second it takes for your website to load. Furthermore, 47% of customers expect a webpage to load in two seconds or less. So, how do you speed up your Shopify store? Keep reading for the answer…
Establish current site performance
You can only improve your site’s speed if you know exactly what its current performance is.
Luckily, Shopify makes it easy to establish how fast your site is.
Shopify’s built in ‘Online Store Speed’ report is powered by Google’s Lighthouse performance metrics and provides a really handy ‘at a glance’ view of your site’s speed:
As this report is powered by Google, it lets you see how Google views your site (site speed being an important ranking factor). With that in mind, you should be checking this report on a regular basis if you want to improve your organic rankings on Google.
To get access to this report is straightforward. Simply log into the backend of your Shopify store, and go to Analytics > Reports. Then click on the Online store speed report.
Another handy feature of this report is that it keeps a historical track of your site’s speed over time. Again, this will help you track your progress:
Now that you’ve established your site’s current performance, you can start planning some changes.
Site speed: some things are out of your control
Before we dive into those ‘actionable insights’ that’ll help you speed up your Shopify store, we need to outline those things that are out of your control.
Some things that can influence the speed of your site - but which you cannot change - include:
-
Site infrastructure - with your store being on Shopify, it’ll be hosted on their servers. You can’t change this, but don’t worry! Shopify uses blazing-fast servers, with unlimited bandwidth.
-
Content Delivery Network (CDN) - on Shopify, your choice of CDN is outside your control. But, as with their servers, Shopify uses a world-class CDN; in this case, Cloudflare.
-
Local browser cache - Shopify determines local browser caching for your store. Files that can be cached include image files, PDFs, JavaScript files, and CSS files.
-
Server-side page cache - Shopify also caches pages on the server side. Again, this is done automatically and is out of your hands.
- The asset inside the ‘content_for_header’ Liquid object - this Liquid object injects a series of assets onto a page (assets such as performance analytics, dynamic checkout buttons etc). This is out of your control, however, Shopify is continually optimising this process to make it faster.
So, whilst some things are out of your control, it shouldn’t be a worry as Shopify is continually focused on optimising these things and ensuring they have minimal to no impact upon your site’s speed.
However, there are some things you can control…
Site speed: what you can do to improve it
There’s an almost endless list of things you can do to improve the speed of your site. However, based on a cost/reward ratio, some things are more worthwhile than others. Below, the Velstar team has set out the ‘biggest impact’ changes you can make to speed up your Shopify website.
Minimise triggers at site load
How many things are triggered as soon as you land on the homepage? Intuitively brand owners know that they need a pop-up for email address acquisition, a pop-up for chat support, and perhaps a pop-up that offers social proof (positive customer reviews etc).
But, these assets can be damaging to the visitor experience; especially if they all occur before the shopper even has a chance to explore the product offering. Naturally, multiple triggers will also slow your site down, negatively impacting user experience (and potentially damaging your SEO).
Instead of pop-up ads for email address acquisition, perhaps you can change to exit-intent ads? Instead of chat support appearing as soon as the user arrives at your site, can you offer it on specific product landing pages instead? And, instead of social proof pop-ups, you could consider using static review badges elsewhere on your site.
Remove excess apps
The Shopify app ecosystem is frankly incredible. If there’s a function or feature that you want to add to your site, there will almost certainly be an app that’ll do it.
The thing is, it can be all too easy to install apps and then subsequently forget about them.
It can become easy to lose track of which apps are still driving value for your store. Without clear success heuristics - especially if app costs are negligible - some store owners may unknowingly bloat their app list to the point of severely slowing down their website.
What’s more, even when you uninstall an app, it’s not guaranteed that you’ve entirely removed the associated code from your Liquid code base.
Effective e-commerce operators should have a clear success metric tied to every app installed on their store, and measure against it on a regular basis. By following a clear process, you’re able to prevent app bloat from slowing down your store, and ultimately harming your bottom line. If you’re reading this now as a Shopify store owner - go audit your app list now!
Tip - the Online Store Speed report we mentioned earlier is a quick and easy way to check if an app is slowing down your store. If the report shows that your site speed has tanked following an app install, you know where the issue is!
Site theme
Your site’s theme can have an appreciable impact upon speed and loading times.
Consisting of Liquid, HTML, CSS, and JavaScript code, alteration to your site’s theme can change the size of files and thus impact site speed.
So, what can you do to optimise your site’s theme for speed and performance?
Some easy fixes include; disabling theme features you don’t use, using a system font (one that will already be on the vast majority of users’ devices), using a theme that’s optimised for performance, or - of course - speaking to a Shopify Partner agency.
Tip - Shopify has released a Shopify Theme Inspector for the Google Chrome web browser. This tool will allow you to assess and identify the lines of code within your Liquid code base that are slowing down site performance.
Optimise images and videos
Oversized and ‘heavy’ images and videos are often a major source of site speed and performance issues.
This is true from both a qualitative and quantitative perspective; having to render in images of huge file sizes can quantifiably slow your site down. However, if a user has to wait for images to load, this can drastically affect their perception of your site’s speed.
Either way, it’s not a good situation to be in!
If you want to ensure the images and videos on your site are fit-for-purpose, there are a number of things you can do:
- Review Shopify’s image optimisation guide.
- Keep slideshows of images to only two or three images maximum.
- Speak to a Shopify Plus partner agency.
Inefficient Liquid code
Whilst it’s possible to edit almost all the Liquid code that is used to render your store, there are both efficient and inefficient ways of doing so.
If you’re not a particularly experienced coder, then you may be inadvertently slowing your site down by not coding correctly. For example, if you’re asking the code to perform complex operations repeatedly, this can significantly increase your Liquid render time - which in turn impacts overall site speed.
The solution? Unless you’re an expert coder, the best way to ensure your Liquid code is as efficient as possible is to get a Shopify Partner agency to review it for you.
Accelerate your Shopify store with Velstar
Want to put the pedal to the metal and really speed up the performance of your Shopify store? Then speak to the Velstar team today.
As one of the UK’s leading Shopify development agencies we have the team, experience and expertise to squeeze the most out of your Shopify store.
