How to Make Shopify Store Faster?

Introduction

The battle for every digital customer hasn’t been so fierce as it is now. Owners of webshops spend big bucks on paid advertising and SEO every day to gain people’s attention and try to push them through sales funnel. However, no matter how hard you try, these actions won’t result in a reasonable return on investment if the basics are being overlooked.

Nowadays, basics start with the website speed. As of 2018, it became an official Google ranking factor. But it doesn’t only affect robots crawling the internet, but also the real users looking for places to spend their money.

How does website speed affect conversions?

Who likes waiting in the long queue, even in the favourite supermarket? 

Just looking at people standing impatiently may be a sufficient reason to leave without buying anything. The very same thing happens in online shopping – if your Shopify website loads slower than it should, the potential buyers will tend to leave. 

And don’t take my word for it – check research-based numbers below.

Take the bounce rate now. Bounce rate is a percentage of visitors who opened a single page on a particular website and then exited it, without taking any further action. The reasons behind this may be different, but the page load time is definitely among them.

Hungry for more statistics? Google gladly helps with that. According to their Industry Benchmarks for Mobile Page Speed, 53% of users will leave if it takes more than 3 seconds for a website to load on mobile devices. That’s a problem concerning webshops even more.

Moreover, as I said before, website speed affects not only the real customers but also your online store’s visibility in Google search results. And I don’t mean just organic search but also paid search. Slow load speed negatively affects Google AdWords Quality Score, which results in lower positions and higher cost.

You don’t trust Google? It’s okay. I am prepared for such a situation.

Take a look at stats provided by Skilled on what customers expect.

• 79% of customers are less likely to buy again from you if they are somehow dissatisfied with the Shopify store performance. Sure, load time is just one element affecting it, but it’s relatively easy to improve.
• 64% of smartphone users expect a website to load in under two seconds.
• 47% of customers expect a website to load in under four seconds.

If it’s not sufficient motivation for you, be aware that one-second delay in website loading may lead to conversion drop of 7%. So if, for example, the annual sale in your Shopify store amounts to one million dollars, such a delay may cost you $70,000 per year. 

Checking site speed

Before moving to the core of my article, you have to check how fast your Shopify store is. There are some tools you can use to do that.

• Google PageSpeed Insights
• Test My Site by Google
• GTmetrix
• Pingdom

Whatever tool you use, together with the results, you will receive tips and recommendations on how to improve your website performance. Naturally, your first choice should be to use two tools provided by Google first and follow their advice.

To improve or not improve?

Now, that you have checked website performance, compare your results to recommendations from Google and Skilled. If your Shopify store loads up in less than one second, the rest of the article is probably not for you, and you are good to go. 

If not, make a coffee, equip yourself with a pen and a piece of paper, and start reading improvements I listed below. While doing so, note down all things you can do to improve your store.

Ways to improve Shopify store speed

1. Avoid excessive Liquid loops
2. Choose a fast, lightweight theme
3. Consider the necessity of installing another app
4. Fix broken links
5. Focus on testing and optimising mobile performance
6. Forget about GIFs (even those with cats)
7. Forget about sliders
8. Implement code minification
9. Implement Lazy Loading
10. Optimise images
11. Reduce the number of HTTP requests
12. Reduce the number of redirects
13. Start using Google Tag Manager
14. Think twice about pop-ups

You can either click on the improvement that interests you the most (and it will take you there) or read them one by one.

Avoid excessive Liquid loops

Shopify created Liquid in Ruby as an open-source template language. It’s a powerful tool that enables you to create Shopify themes and load dynamic content. However, it has its flaws as well, and forloops are one of them.

What is a forloop? It’s a process of filtering through all the products available in the store to find these you are looking for (i.e. products within a specific price range or those marked with a particular tag).

The problem occurs when a product catalogue is huge because then the whole process of filtering may take a longer time than expected. And consequently, it will expand the page load time.

To avoid such a situation, check the theme code for multiple forloops processing the same request. It sometimes happens when programmers who are taking care of Shopify store change over time and create duplicate or conflicting code during the process.

Choose a fast, lightweight theme

Some people decide to build a custom storefront for their stores, but sometimes it’s better to choose a ready-to-go theme. If this is your case, make a list of some themes and check their performance.

How? It’s simple. Copy the link to the live preview of the theme and use one of the tools mentioned above.

Consider the necessity of installing another app

Everybody loves apps – teenagers, grown-ups, travellers, business people, and… Shopify owners. Shopify App Store offers the almost limitless number of apps fulfilling different functions. Installing one is easy – just a few clicks and it’s ready to use. But the problem is that every app slows down a Shopify store, even if you don’t use it anymore.

If you want to avoid overloading your store with apps, follow these simple steps:

• Step 1 – Check apps that are already installed. How many of them are you actually using? Uninstall both inactive and unused.
• Step 2 – Do you need another application? Check other applications first – maybe one of them can give you what you need without the necessity of installing another app. If not, consider if benefits of installing another app surpass drawbacks like slowing down your store.

Fix broken links

If any of the links on your website leads to a non-existing page, website, image, CSS or JS file, it means it’s a broken link. The more broken links you have on a website, the more HTTP requests it generates. Consequently, it leads to increased page load time.

To fix this issue, you can use a free tool like Broken Link Checker from Ahrefs.

Focus on testing and optimising mobile performance

Mobile shopping consistently overcomes desktop shopping since it’s a quicker and more accessible way. The statistics from Shopify stores confirm it:

• During Black Friday Cyber Monday in 2018, 66% of orders were made through mobile devices
• During the first quarter of 2019, 79% of traffic and 69% of orders came from mobile devices

So now you know how vital mobile performance is. Testing and optimising it is critical to conversion rate. Keep in mind that it’s not a one-time job – it’s a continuous work. And our guide will help you with that.

You can perform testing by using Google tools as well as Pingdom and GTmetrix. There you will find answers on how to optimise your Shopify store with a focus on its mobile version.

Forget about GIFs (even those with cats)

Blocks of plain text with single images here and there? No, thanks. It’s boring, right? So one of the ideas to make our website or blog posts more entertaining could be to insert GIFs inside.

A GIF like this:

Well, don’t do this. GIFs weigh too much and slow down a website in the process.

“Damn, what a hypocrite. He recommends forgetting about GIFs and uses one himself.”

Guilty, but it’s not a Shopify store.

And, actually, it’s not a GIF. It’s HTML5 video, a smaller and faster alternative to GIFs. And that’s my recommendation as well.

Forget about sliders

Sliders, oh, sliders. What seemed like another web design short-term trend, survived the arrival of minimalism. A slider which consists of a few high-quality images may look cool, but data proves that it doesn’t work in any desired way.

• 1% of people click on slider (source)
• Sliders have negative effects on SEO (source)
• Sliders are annoying and visibility-limiting (source)

Instead, you can use a hero image which is a single image with a clear call to action visible to visitors straight after loading up a website.

Here is a beautiful example:

Implement code minification

Code minification is a process of deleting white spaces in the CSS and JS code which make files smaller and faster to load. These spaces are only for humans to make code more readable. Browsers, on the other hand, to read the code correctly whether it has white spaces or not.

There are two ways to minify the code:

1. You can use an app like Plug-in Speed which offers a 7-day free trial, and then it costs from 39$/month.
2. You can minify code yourself or hire someone to do that for you.

If you choose the second way, remember to leave theme.scss.liquid file because Shopify minifies it automatically.

Implement Lazy Loading

Lazy Loading is about delaying the loading of particular elements until they are needed. It applies specifically to web images.

Lazy Loading is a technique creating the impression that the website is loading faster than in reality. Such an impression is called perceived performance and is experienced by all users coming to the website with Lazy Loading implemented.

Curious how Lazy Loading works?

Typically, all images on a particular page will be loaded simultaneously. It doesn’t matter that the user sees just the top of the website without all these images. Consequently, it slows down the website.

Lazy Loading uses low-quality versions of these images and inserts them as placeholders. As a result, all the images are still being loaded, but it takes much less time due to the lower size of these images. But don’t worry about this low quality – as users scroll down the page and the images are visible to them. Lazy Loading switches low-quality images with high-quality images.

And that’s basically how the Lazy Loading works.

To implement Lazy Loading, you can use Lazysizes.

Optimise images

Images can take from 50% to 75% of your website’s total weight. It’s a lot. Therefore optimisation of them can lead up to lower weight and faster load time.

First of all, take care of the dimensions of product photos. Shopify recommends 2048x2048 pixels, and you should aim for that.

Use either an Image Resizer by Shopify or tool like Photoshop.

Then, use tools like TinyJPG or TinyPNG to reduce the sizes of all images.

Reduce the number of HTTP requests

You already know that the higher the number of HTTP requests, the slower the web page loads. But you can fix it by reducing this number.

First, check HTTP Requests Checker to check the actual number of requests. Then, start reducing it. Fixing broken links is one of the ways to do that – and I already mentioned it – but that’s not all. For example, you can also:

• Combine JS code
• Combine and inline CSS scripts
• Minimise the usage of images
• Use CSS Image Sprites

Reduce the number of redirects

Apart from being somehow annoying, redirects may slow your website and cause a bad experience. Solution? Reduce the number of them. But remember that redirecting URLs to pages that redirect users further is NOT a good idea.

Shopify has built-in functionality called “URL Redirects” which you can use for 301 redirects.

1. Log in to the Shopify admin panel.
2. Choose Online Store -> Navigation.
3. Click URL Redirects.

Start using Google Tag Manager

Collecting customer information is crucial to any eCommerce business – no doubt about that. But in addition to being fundamental in increasing revenue, it can also badly affect the website's performance and load speed due to multiple JavaScript tracking tags.

What you need is a system for managing tags like Google Tag Manager (GTM). Its job is to minimise the number of JavaScript requests to one. It also helps to store all tracking tags in one place so you can add or remove tags anytime you need.

Adding Google Tag Manager to your Shopify store is easy – all you need is one snippet of code.

Think twice about pop-ups

This rule shouldn’t apply just to pop-ups but also any functionality in your Shopify store before implementing it. Pop-ups mean not only these popping up boxes with newsletter sign-up forms but also something called Quick View.

Quick View option displays certain product information straight on the product listings page instead of redirecting users to a product detail page. Cool, right?

Well, at first they may look fantastic, and you may think that users love them, but the reality is often quite different.

Drawbacks of Quick View pop-ups:

• They increase the length of the customer journey.
• They can be a source of frustration.
• Users may take them for product pages.

But the most important thing is that they may lead to an increased page load time.

Alternatively, if you want to leave these pop-ups, use tools like Hotjar or Sumo first to check if the users are using the Quick View option. If not, there is no reason against removing it from your store.

The ultimate solution

There is also one more thing you can to make your Shopify store faster – it’s called a custom storefront. And that’s what we did for Otakuchan, an online store for Anime fans. We moved it from WordPress to Shopify and added a fully-customized storefront to make the whole website even faster.

If you are interested, you can read the case study here.