When you first start using Shopify, it’s easy. You simply pick a theme, configure it for your style and upload products. Then, as your eCommerce business starts to grow, you’ll want to extend the site. Start experimenting with some new apps, integrate some new technologies and maybe try changing some of the code.
Over time, your site starts becoming slower and slower. As with anything in web, speed is key! In this article we’re going to look at why speed is important, why your Shopify site might be slow and some tips on how to speed up your Shopify site.
Why your websites speed matters
If you’re like me, you’ll remember dial up internet. It was painfully slow and if someone else was using the phone in the house it would just stop working. Thankfully, broadband, Fibre, 3g, 4g and soon 5g all came to our rescue and now fast loading websites are normal.
The load speed of a website affects conversions, bounce rate, user experience and even your organic position.
53% of users will leave a mobile site if it takes longer than 3 seconds to load.
Why is your Shopify Site Slow?
There are several reasons why your Shopify site might be slow. These can range from a lack of optimisation on the theme, loading bloated code that’s unnecessary to not putting the right size images on. In order to find out what is causing your ecommerce site to be slow, you’ll need to run some analytics on it.
We use readily available tools and some in-house tools to monitor the performance of Shopify sites. A great place to start is using GT Metrix. This free tool lets you see your PageSpeed score and your loading time. It also offers recommendations to help you increase your page loading speed. There’s also a free tool called Google pagespeed insight that allows you to see, from the eyes of Google, how fast your site is on desktop and mobile and give recommendations to fixing any errors.
How to Speed up your Shopify Site
We know why speed matters, and we know how to diagnose some speed issues so here are some tips on keeping your Shopify website fast and optimised.
- Image Optimisation
- Organise Tracking Codes
- Your Shopify Theme
- Troublesome Shopify Apps
- Reduce HTTP Requests
- Minimise Your Code
- Minimise Redirects
- Remove the Slider
An easy way to make your Shopify site faster is to optimise the images. Making sure they’re the right size for the space is really important, if they’re too big for the space, the browser will display them in the right size but load the full image. Image compression tools will help get rid of bits of data in your images that you won’t need on websites, this shouldn’t affect the quality but will drastically reduce the weight of the image. This should be done on every image on your site, hero images, blog post images and product images.
If you’re using more than the standard Google Analytics tracking code, then it might be worth utilising Google Tag Manager. GTM allows you to load all your tracking codes in one, asynchronously. Asynchronous loading is the ability to load several JS files without blocking other files from loading. Using GTM instead of adding all the tags individually, not only makes it easy to manage your codes, but it can speed up your site.
Universal themes for any platform including Shopify will never be as optimised as a custom theme. This is because they fit lots of options and variations of the theme into the code and often your theme will be loading files that aren’t relevant to the options you’ve picked. This over-bloated code makes your theme heavier and therefore takes longer to load. Custom themes only include the bits you need making it streamlined and faster.
Apps for Shopify can cause speed issues, due to the fact that some of them are hosted outside of the Shopify environment. Some of these apps make your site call their server on every page load, which can slow down your site. While you’re experimenting with apps, some of them actually leave code behind after you’ve uninstalled them, this can have an affect on your page speed.
HTTP requests are requests for resources. These resources can be CSS files, JS scripts, Images etc. You can reduce these requests by combining the resources, so instead of asking for 6 CSS files, you combine it into 1 and the load speed is quicker.
This might not be an easy job if you don’t have any development experience, but it can massively help a sites speed. We use a series of compilers to make sure any wasted space in a file is eradicated. While this can save bytes on some files, when you add all of those savings up it can have a drastic effect on the speed.
Redirects are an important part of any SEO strategy, especially migrations. But if you’re having a trail of redirects, it’s important to shorten these. Redirects can take some time to process in the browser, which can cause a delay before the site loads, this increases every-time there’s a redirect in the chain.
Did you know that sliders aren’t really that effective at selling, and 9 times out of 10 it’s beneficial to not have one. To start with, you’re loading several graphics in a slider, versus using a hero that just uses 1. These graphics add weight to your page and can slow it down. Did you know that only 1% of people click on a slider.
Look After Your Site
You site needs looking after. By giving it some TLC and keeping it fast, it will reward you with higher conversions, better UX and better SEO. Running regular speed reports and monitoring it will allow you to keep on top of any speed issues that arise.
Our development team have spent a lot of research and development into optimising Shopify Themes; both custom and templated. If you have a Shopify theme that needs optimising, get in touch.
Follow me on my travels!