Shopify is an incredibly accessible platform, with huge companies like Lindt able to create and open their ecommerce store in just 5 days. It’s easy to launch a store and start trading in no time, and has a lot of built in functionality to make this process easier.
However there are some things merchants need to be aware of to get the most out of their stores. Site speed remains one of these critical factors. A slow loading site has many negatives: from low engagement and high bounce rates, to less traffic, lower sales and even damaged search engine ranking (Google loves pages with a quick loading time), it makes sense to do what you can to make your site as fast as possible.
In this article, we’ll be examining ways to assess your current site speed, and then giving you our top tips to make sure you’re doing everything you can to increase its speed.
How to check your Shopify site’s current speed
Use PageSpeed Insights which will give you a speed score and recommendations for improvements. It will separate out desktop and mobile results and make recommendations such as:
- Optimise your images
- Minify JavaScript and CSS
- Eliminate render-blocking JavaScript and CSS above-the-fold
- Leverage browser caching and reduce server response time
- Avoid redirects
- Gzip compression
Just runing the test on your home page isn't enough - it’s worth testing at least the top 10 most visited pages of your site - that is where speed improvements will have the biggest impact. Check out our guide to running and interpreting a website speed audit.
There are some caveats for the Insights tool though. While it’s useful, it’s worth bearing in mind a couple of things. It marks down sites that rely heavily on Javascript (as most Shopify sites do) and judges sites against a technical checklist which does not take into account some practical considerations. It can also vary depending on how much bandwidth is available at the moment the test is carried out.
I remember a client at another agency whose score dropped from 98 to 96 following some site changes, and was insistent on getting the score back up by making other changes. What they didn’t understand that to do so might break or undermine other areas of their site and it wasn't the number in the score that was the critical factor, but the real-world useability and speed of the site itself.
So in summary: it’s a good guide to get an idea of where you’re at with your site speed, but not the be-all and end-all.
You can also use Pingdom or GTmetrix to assess your page speed - trying a couple of different tools will give you a broader overview of the speed performance, issues and remedial action.
How to Increase Your Site Speed
Once you have an idea of how your site is performing, you may have some recommended actions that come off the back of whatever tool you have run your pages through. If so, to complement those, here are our top ten actions you can take to increase your site speed.
Don't forget we have a team of experts who focus on optimising Shopify stores for better results so if you'd like to discuss how we can help, get in touch.
1 Use AMP to make pages quicker
AMP (accelerated mobile pages) helps improve page loading speed on mobile devices. The premise is to serve the web pages in a standard format (defined by Google) to reduce the page size and loading time. For example, all of the page’s content is loaded at once, and browsers know the layout of AMP pages beforehand.
Although Shopify doesn’t offer AMP versions of its stores as standard, there are apps like RocketAmp available in the app store which will create AMP versions of your store’s pages on your behalf. Bear in mind that if you follow this route and stop using the app later, it could cause problems with page errors.
2 Image optimisation
Compressing your images is important for faster loading web pages, particularly on ecommerce sites.
Image compression means taking the image in its original size and then reducing its file size, without impacting its quality.
Shopify allows you to use the following image formats:
- JPEG or JPG
- Progressive JPEG
- PNG
- GIF
PNG images are useful if you need transparent pixels in your picture (you’ll often see them with a grid pattern in the background denoting the transparent part), but they usually take up more space than JPEGs, so consider using JPEGs as standard if you can.
There are two levels of compression:
- ‘lossless compression’, which gives you a small file with no reduction in image quality
- ‘lossy compression’, which results in an even smaller file BUT a sacrifice in image quality
Both options are available to you, but as an ecommerce site selling products, it is likely that imagery is an important part of persuading customers to buy. In a recent survey of 1,500 online shoppers conducted by Eastside Co, 37.8% of respondents said they thought product imagery was ‘very or extremely influential’ in their purchasing decisions. With this in mind, consider using lossless compression for smaller files but no reduction in quality.
When you upload images to your site, make sure that they’re the size required for the page in terms of pixel width and height. You can use the free tool tinypng.com to reduce the size of your images.
3 Use a fast and responsive theme
If you’re using an out of the box theme as opposed to utilising the services of a Shopify Expert like Eastside Co, make sure you choose one that is fast and responsive. This means they will amend the elements on your website based on the dimensions of the device being used to view it, making for a better and faster user experience.
4 Review the apps installed on your store
Go into the admin of your Shopify store and review all the apps you have installed, and remove any that you don’t need or aren’t using. Often, the issue behind the slower speed of Shopify sites is the number of apps running on them: every app you install is more code on your website and more elements to load.
As well as apps, it’s also worth looking at any third-party code that you’re using and having a general tidy up if there’s anything that’s no longer needed.
5 Reduce the number of HTTP requests
Every time a visitor loads one of your web pages in their browser, additional web files are loaded as well, such as CSS files, Javascripts, design images, etc. Every time a file like this is requested it creates an additional request for the browser to process. These are known as HTTP requests and the more there are, the longer it will take.
There are a number of technical steps you can take to reduce the number of HTTP requests. This article provides 9 actions that will help you do this, and increase your site’s speed.
6 Minimise broken links and redirects
Broken links can increase your HTTP requests (see point 5), and you don’t want your visitors landing on them as it increases the chance they’ll leave your store and shop elsewhere.
Unnecessary redirects (page A points to page B which points to page C where the visitor finally lands, for example) mean it takes longer for your visitor to arrive, and drags down the overall site speed.
There are apps available in the Shopify app store to identify broken links and redirects and help you fix them on an ongoing basis.
7 Get rid of sliders and carousel images
Sliders do persist on some websites but we would recommend a single hero image over a carousel of images. Why?
- Hardly anyone ever clicks on the first slide, let alone waiting to see the second or third
- Each slide means additional weight to the page and as no-one really sees them or uses them, they are largely redundant
- They’re even less effective on mobile devices
Use one 'hero' image instead (optimised as described). It's all you need.
8 Put all tracking code through Google Tag Manager (GTM)
Move any of the third-party code that you’re using into Google Tag manager. Over time, marketing software or analytics code will be added to your site and it can get unwieldy. Using GTM means that all the third party code is easier to manage, plus it only loads on the relevant pages. It also means you can keep track of it all and remove any elements that become redundant down the line.
9 Lazy loading
This is another easy way to increase the speed of your Shopify store. Lazy loading is a method in which anything not ‘above the fold’ on a page is not loaded until the user scrolls further down.
This is a great ‘cheat’ for optimising for speed on pages that are image-heavy or feature videos further down. Essentially, you’re only fetching elements as they’re required, instead of loading everything at the same time. Check out this in-depth guide to how to implement lazy loading from CSS Tricks.
So there you have it: 9 practical points to bear in mind to ensure you’re doing everything you can to increase your site speed. If you need any assistance with your Shopify store, from site speed to increasing sales, drop us a line!
Shopify SEO Audit TODAY
