4 proven ways to speed up your Shopify store

A Shopify theme performance is often overlooked by other more prominent aspects of a store, such as design, impressive visual effects, or nice animations. However, we could argue that theme optimization is equally as, or even more important than the UI design of your store.

We have been working with many clients and on many stores over the years, and have often been surprised how at times some of the worst-designed websites easily made 6 figures a month in revenue, while other stores which we were impressed by from the professional point of view, made very little in sales.

Of course, marketing is a huge part of the success of a Shopify store, however, improving your theme performance could make a big difference in your revenue.

Shopify theme performance

A slower load time of your store could mean a big drop in your user engagements. What that means is that if your home page loads a few seconds longer, you could easily lose up to 25% of visitors, which in turn means a significant flop in sales. You will not convert all of them, but how many are you willing to sacrifice for that big slider? 2%, 5%, 10%?

So you see, improving your theme performance is very important. How come then that many themes are not optimized better? It is because, as mentioned in the intro of this article, performance is not something that is instantly noticeable, and many store owners when purchasing a new theme for their store look to find something they are impressed by visually. They often do not know enough about performance for it to be a deciding factor.

But it is important. So much so, that a year or two ago even Shopify included theme metrics from the Google Lighthouse algorithm to every theme published on your store.

Ok, that is all well and all, but how would we know what sections of our store need improvements, and to what degree? Is there a way to measure theme performance? Sure.

Measuring Shopify theme performance

There are lots of page speed metrics tools that you can easily find by googling the term, Woo Rank and Web Page Test to name a few, but we will focus on the most prominent one, Google’s own PageSpeed Insights.

All you have to do is navigate to PageSpeed Insights, enter your store’s URL into the input field and click analyze, and the tool will do all the work for you.

Once the report is generated, you can see the weak points and things to improve on your store in order to optimize the performance and load time.

You will also get a detailed analysis of your website based on desktop and mobile devices.

When working with Shopify stores, there are parts of your site you don’t have control over, such as all the things related to hosting, or the code of the third-party apps you may have installed.

It would be smart to study the report of your store performance, but in general, there are four main things you can do to drastically improve your site speed. Let’s check them out.

Improving Shopify theme performance

1. Third-party apps reduction

This is a big one. All those apps you installed to solve minor (or major) tasks on your store are killing your site speed and load time.

Every time you install a third-party app, it comes with a lot of, often heavy, code which is seriously affecting your store performance. One app may not be a problem itself, but little by little, Shopify store owners tend to install a lot of these overtime, so often a successful store has thirty or more third-party apps.

The problem is that these apps do not host their code on your Shopify store, but somewhere else, meaning you can not edit this code, therefore you can not optimize it.

How do you solve this problem then?

Uninstall all the apps you do not need and keep only the necessary ones. Some of the minor tasks you solved by installing an app could possibly be solved in 1-2 working hours and be created custom by a Shopify developer.

2. Image optimization

Large images and images served in the wrong format are also one of the main culprits causing the slow site load. I often see clients uploading huge image files, uncompressed, straight from the camera, or high-resolution stock images to Shopify.

Another mistake is using .png images when you could use .jpg. These result in huge size differences. A banner in .png could be over 1 Mb in size, while the optimized banner of the same size saved as .jpg could be 100kb. That is over 10x less! If you have only a handful of images optimized incorrectly, you are certainly slowing down your site load time a lot.

Knowing what format to use will make a big difference in your theme performance. You can use .png or even .gif for transparent logos, for example (though .svg would be even better, but I will presume you may not know about .svg, but you surely know .jpg).

Once you have your files prepared, you can put them through an online optimizer which will shed even more weight off your images. There are many tools like this available online, but you can also use Shopify’s own image optimizer.

Ideally, you would serve some images in the next generation of formats, such as .webp or .avif.

Luckily, lots of 2.0 Shopify themes use these by default.

3. Assets minification, requests reduction, and scripts optimization

Every asset that is being loaded on your store is a separate HTTP request. The more of these you have, the slower the load time will be. Asset concatenation is a process of combining multiple assets like scripts or images into one file, in order to reduce the server requests.

What you would do is basically take most (or all) of your CSS files and combine them into one. Same with Javascript. You can go too far with this as well, so you need to be mindful when using this approach.

Images can also be combined into one bigger file and then repositioned with CSS using a technique called CSS sprites. It was very popular 10 years ago, but I see less of it lately.

Also, go Vanilla. If you can remove jQuery and other libraries and solve these tasks with Vanilla js, you will speed up your store for sure. This is not a simple task though, and it may require a lot of work.

4. Content simplification

Another easy way you can improve your store load time is simply by removing unnecessary content from your pages. I know that product carousel looks cool, but is it really usable? Can you, instead of loading a carousel with twelve products, simply load four and add a button to view the whole collection?

Do you really think your target audience cares about the five neatly designed banners in the main slider? I assure you they don’t, and only one banner would suffice.

Remember, perfection is not when you reach the point where you have nothing to add, but when you have nothing to remove.

Use these techniques for some easy (and some not so easy) wins, improve your theme performance, user experience and in return your revenue.

Happy selling.