How to speed up Shopify’s page load time

18.09.2019

The rapid evolution of technology has conditioned us to expect instantaneous results. From same-day delivery options to instant-hot-water kettles, we’ve lost our patience when it comes to waiting – especially if we deem it unnecessary. And nowhere is this more prevalent than online. 

In the olden days of dial-up internet, we’d be happy to wait full minutes for websites to load. We’d put a load of washing on, make a cup of tea (with our regular, five-minute-boil kettle), do a little dance, make a phone call, etc. Now, we want websites to load within seconds. Milliseconds, even. 

The state of the internet in 2019 is that most of us won’t wait more than three seconds for a web page to load. Six seconds, and your bounce rate is likely to be somewhere around the 100% mark.

Why is page loading speed so important? 

Aside from the fact that you’re losing most of your audience if your website isn’t loading quickly enough, page speed actually impacts a whole host of metrics. 

Bounce rate: Although there are plenty of reasons why your customers might bounce from your site – including low-quality design, poor mobile optimisation and irrelevant content – speed is one of the biggest factors to consider when it comes to reducing your bounce rate. With 90% of mobile users bouncing when they have to wait five seconds for a page to load, you can’t afford to make people wait. 

Conversion: Unsurprisingly, page speed has a huge impact on conversion. Even a decade ago, Amazon found that every 100ms delay cost them 1% in sales. Fast forward 10 years, and that figure jumps to 7%. And with no one hanging around on sites that load slower than five seconds, you don’t have many users left to convert. 

SEO: Although your site’s bounce rate isn’t a ranking factor, your site speed is. Google’s algorithm uses your site and page speed as a signal of the quality of your site, determining where to place you on search engine result pages (SERPs). Slow site speed also impacts your site’s crawlability, which can harm your indexation.  

Checking your Shopify sites’ page speed  

Before you can start improving your site’s page speed, you need to know what’s slowing it down in the first place. 

Here are a couple of tools we use to test the speed of our Shopify stores:

Google PageSpeed Insights

Google’s PageSpeed Insights is a free tool that reports on the performance of a page on both mobile and desktop devices, providing suggestions of how different pages can be improved. When you enter your store’s URL and run a speed test, PageSpeed Insights gives you a performance score out of 100, with anything above 90 considered fast, and below 50 considered too slow. 

GTmetrix

GTmetrix is another free tool that analyses your site’s performance, grading web pages from A to F, as well as offering recommendations for improving your site’s speed. It gives a more detailed breakdown of the time each request took to fulfil, pulling in data from both Google’s PageSpeed and YSlow. However, without upgrading to a paid account, you’re limited to the tool’s basic features. 

These tools help you identify the things that might be slowing your site down. Now, let’s go into how to fix them. 

6 ways to speed up your Shopify store

1. Optimise your images 

All that rich, gorgeous lifestyle and product imagery you’re sporting? It’s not great for your site’s speed. With images accounting for 50% to 75% of your web pages’ total weight, it’s important to think about how many images you’re including on each page. And the higher the quality of your images, the larger that number gets. 

Luckily, it’s pretty simple to optimise your images. Here are a couple of ways you can stop your lovely imagery from slowing down your website: 

Compress your images: With tools like TinyJPG and TinyPNG, it’s easy to compress the size of new images. For existing images on your site, you can use apps like Image Optimizer to compress your images without any quality loss.  

Reduce the number of high-resolution images or videos: If your site is packed with things like content sliders, videos and gifs, you’re going to struggle to get it down to an optimal speed. Before you add anything with a high resolution, really think about whether you need it – or, if it’s a crucial part of your site, how you can reduce its size. For example, if your homepage features a hero slider, consider reducing the number of slides you show. 

2. Optimise your theme 

This is where things get a bit more technical. To optimise the performance of your Shopify theme, you can manually compress and combine your CSS and JavaScript files, making it easier for browsers to display them quickly. 

Here are a couple of key ways you can optimise your theme:  

JavaScript & CSS files minification: Minification compresses the text in your CSS and JavaScript files, removing extra characters like spaces and line breaks. By eliminating redundant characters, minification makes your file size smaller, which helps your site load faster. You can do a quick analysis with GTmetrix to find files that haven’t been minified – but make sure you duplicate your theme before making any changes!

JavaScript & CSS files concatenation: Concatenation is the process of combining multiple JavaScript and CSS files into one, ideally resulting in one large JavaScript file and one large CSS file. Because HTTP/1 struggles to serve pages with too many file requests, concatenation aims to solve the problem by reducing that number. However, with HTTP/2, concatenation is fast becoming obsolete. Once Shopify starts supporting the new HTTP, it’ll be better to keep your files separate.  

3. Do you really need another app? 

Most of the apps downloaded through Shopify add some JavaScript and/or CSS files to your store, which impacts your site’s performance. For every app you install, your site gets that tiny bit slower. 

That’s why it’s important to regularly go through your list of installed apps and evaluate what value they’re adding to your store. Are there any you installed on a trial basis and forgot to delete? Have you got two apps that do a similar job? Loop in a developer to find and delete any unnecessary apps. Once you’ve finished the app cull, run speed tests and note the positive impact fewer apps has on your site’s performance. 

Similarly, when it comes to installing new apps, always weigh the benefits that app will have on sales against the possible impact on your site’s load speed. If it adds value, then great! If not, or if the value is minimal, consider holding off for the time being. 

4. Organise your tracking with Google Tag Manager

Gathering data from your site is essential for learning more about your customers’ behaviour – but all that data collection can end up slowing down your website. 

When you’re separately tracking for conversions, goals, and retargeting, all those tracking tags increase the number of requests your page is making, which can ultimately harm its overall performance. And if they’re not done asynchronously, they can stop the page’s content from rendering. 

By using a management system like Google Tag Manager, you can condense all your tracking tags into one JavaScript request – meaning you can manage multiple store tags with just one snippet of code. For more information on using Google Tag Manager with your Shopify store, you can check out this guide. 

5. Don’t write code that loops over too many times

Liquid, Shopify’s coding language, is used to load dynamic content onto your online store. It’s an incredibly powerful and useful tool, and is great for things like announcements, product recommendations and collection filtering. But sometimes, using Liquid can come with a performance tradeoff.

Loops are one of those times. 

For-loop is a control flow statement that means the system has to loop (search through) all the products in a collection – sometimes multiple times over, creating loops within loops. While this can be useful for things like advanced collection filtering and colour swatches, it can severely impact your load times, so it’s important to avoid using an excessive number of Liquid loops. 

Removing any conflicting code or duplicated tasks is one way to stop these loops from slowing down your Shopify store. If you’ve got numerous developers working on your site, make sure you’re not running multiple for-loops for the same information. 

6. Fix those broken links 

Make sure you do some regular spring cleaning on your site for things like broken links and redirects. Not only do broken links impact your site speed, but they also affect your search rankings. 

These broken links increase the number of HTTP requests your page makes, which can do some damage to your page load time. Fortunately, it’s an easy problem to fix. You can use a free tool like Broken Link Checker to find and remove any broken links.

Applying these tips to your Shopify store

Luckily, Shopify is inherently an incredibly fast platform. With secure, reliable hosting and unlimited bandwidth, a lot of the hard work has been done for you.

When it comes to optimising your site further, always loop in your developer. It’s also a good idea to duplicate your theme before making any major changes.   

Don’t have a developer? Borrow one of ours.