Shopify Performance Optimization: Best Practices and Tips to speed up your Shopify Store

Shopify is a leading ecommerce platform and ranks number 3 on Zacks, that offers all the functionality and tools you need to launch your ecommerce site within minutes.

It is such an all-encompassing solution that you don’t even need to worry about buying a domain or hosting. This makes it the perfect out-of-the-box solution for setting up your own ecommerce business.

But, slow page speeds can make you lose valuable visitors and potential customers. At this moment, Shopify performance optimization becomes important to prevent your Shopify store from losing business.

A sharp rise in transaction and sales can be disastrous for your ecommerce site performance and page speed. But, you can prepare for this by taking a few measures to speed up your Shopify website and optimize it for the best performance.

The longer you put off performance optimization of your ecommerce website, the more customers you’ll lose to a faster competitor’s site.

Does your Shopify website take too long to load? Do you wish to speed up your Shopify store to attract more visitors? In this article, we will discuss the best practices and practical tips to follow to speed up your Shopify website. Let’s get into it!

Why Shopify Site Speed Matters?

Today, there is conclusive evidence that slow website page speed can affect your traffic, bounce rate, conversions, and customer retention.

Google’s Mobile Page Speed study shows that a website’s bounce rate gets worse for every second more that it takes for a page to load. So, if your page load time increases from 1 to 3 seconds, your bounce rate will increase by about 32%. But, if your page load time increases from 1 to 6 seconds, your bounce rate increases by about 106%.

79% of customers who are dissatisfied with a site’s performance are less likely to buy from that site again.

Moreover, boosting the page speed by just 1 second can improve conversions by 7%. For example, if your website is bringing in $100,000 per day in sales, improving the page speed by one-second could bring in $7,000 per day more in sales revenue.

One thing is quite clear from these stats, people are quite impatient while shopping online. They will never learn to be patient with slow pages. On the contrary, online shoppers relate slow page load speeds with bad user experience and an untrustworthy brand image.

Furthermore, slow loading speeds of your Shopify website also affect your searchability and search engine rankings. This is because page speed is also a ranking factor in Google’s algorithm.

Google considers websites that load fast as more desirable and gives them better search rankings than slow loading websites. If your page load speeds stay low for a long time, Google might even penalize you by lowering your search rankings.

It must be evident why Shopify page speed matters and why you should ensure that your Shopify website loads up in less than 3-4 seconds.

Want to learn more? Check out our article on the Growing Importance of Website Page Speed and Performance. You can also check out our guide on the Google Page Experience Update of 2024 and Core Web Vitals to learn more about why your site speed is about to become more important.

How can you check the Speed of your Shopify website?

There are a lot of tools available on the internet to help you gauge your Shopify website’s page speed accurately and figure out what you need to do to improve it. Here we are listing 2 such popular tools:

• Google PageSpeed Insights: It is one of the best free tools to check your Shopify website’s performance. Google PSI gives a detailed analysis of your website’s page speed, factors that are affecting it, and areas where you can make improvements to your website to reduce the loading time.
• GTMetrix: GTMetrix is also a great tool to check your Shopify website performance and to aid in Shopify performance optimization. It gives you a comprehensive waterfall analysis of all the elements loading on your Shopify website and the time taken by each element. With such a detailed report, you can easily find out which apps or elements are affecting the Shopify website page speed.Ideally, you should aim to get a score of over 90 in Google PageSpeed insights test and loading time of under 2 seconds in GTMetrix. If this goal is too difficult for you then you can aim for a loading time of under 3 seconds in GTMetrix and a score of over 80 in Google PageSpeed Insights.
  You can also use tools like Pingdom and WebPageTest to analyze your WordPress website’s speed and performance. Check out our detailed guide on 4 best tools to analyze your website speed to learn more.

What slows down a Shopify website?

To speed up your Shopify website, it is important to know what is slowing it down in the first place. Once you have a clear idea of what is slowing down your Shopify store, you can easily perform the Shopify performance optimizations needed to speed up your Shopify store.

There could be several reasons why your site load time is so high. It could be anything from server load time to image size to the number of redirects you have. Let us take a look at few such factors that could be slowing down your Shopify website:

• Hosting Quality: When your Shopify hosting server is not properly configured or you have slow or bad quality hosting, it can hurt your website speed.
• Caching Configuration: If your Shopify site is not serving cached pages, then it will overload your server thus causing your website to be slow or crash entirely.
• Page and Image Size: The total size of the webpage and the size of images that aren’t optimized for the web also determine the loading speed.
• Apps: If you’re using bad quality or outdated Shopify apps, then it can significantly slow down your website.
• External Scripts: External scripts such as font loaders can also have a huge impact on the performance of your Shopify website.

You should thoroughly examine your website’s report on Google PageSpeed Insights and GTMetrix. These reports will tell you what exactly is causing your Shopify ecommerce website to load slowly.

Now that you know what slows down a Shopify website, let us find out how you can speed up your Shopify website and implement Shopify speed optimizations.

Shopify Performance Optimization – Best Practices to follow

It must be pretty clear to you how important it is for websites to load fast and provide a good user experience. It is an important factor in increasing conversions, reducing bounce rate, improving brand image, and improving search engine rankings.
In this section, we will take a look at the best practices to follow for overall Shopify performance optimization.

1. Select a Better Shopify Plan

If you want to ensure that your Shopify store functions effortlessly even with high traffic, then you must go for the Advanced Shopify plan or Shopify Plus.

These plans are extremely reliable while scaling operations and provide great technical support.

So, if you’re using Basic Shopify or Shopify plans and experiencing slow page load speeds with increasing traffic, then it’d be best to upgrade your Shopify plan. A better plan comes with better resources, better analytics, and better support.

2. Select a responsive and fast Theme

The site theme is one of the main reasons for slow site speed. You must select a fast and responsive theme.
A theme that has been optimized for speed and performance will have all styles in just one CSS file and all javascript in one javascript file.

It is recommended that before zeroing down on a theme, run the theme through Google PageSpeed Insight and analyze the results.

Once you’re satisfied with your selection and the theme’s performance, you can apply that theme to your Shopify website. But, you must always ensure that your theme is kept up to date with the latest version. Check out the best Shopify theme optimized for speed and performance.

3. User Hero Layout, avoid Sliders Carousels

A Hero layout is a large banner image, usually placed on the front and center of a web page. Hero images are usually the first visual element that is seen by a website visitor.

It can be a static image or a dynamic image with animations. It usually includes some text and a Call-to-action too.

Using Sliders and Carousels increases your page size by a lot. Research has shown that only about 1% of the people interact with the slides, mostly with the first slide. Moreover, sliders and carousels can negatively impact your website’s SEO.

So, it is best to avoid using Sliders and Carousels. Instead, you can use a well-designed Hero layout for your home page and landing pages.

4. Remove unnecessary Shopify Apps

On the Shopify store, a large number of apps automatically add some CSS or JavaScript files to your store.

This causes serious performance issues with your website. If the app is not in use, the CSS and/or JavaScript files continue to run in the background and slow down your Shopify store’s performance.

Therefore, it is always a great idea to go through your Shopify store to check for apps that are no longer in use delete them. As long as any app remains installed, it will continue to run its CSS and/or JavaScript files.

5. Enhance Mobile Performance with AMP

AMP or Accelerated Mobile Pages is a standard open framework that is designed for a publisher to build quick loading web pages for mobile devices.

Today, more than 50% of shoppers use their mobile devices to make purchases and over 65% of such people expect a website to load in 4 seconds or less on their mobile devices.

Your store must be ready for users on mobile devices because they won’t hang around for a store that takes 10 seconds to load. They will most likely move on to another store that provides them what they need quickly.

Studies have shown that people read AMP content for longer than they read the standard web content. And the longer someone engages with your store, the more likely they are to buy too.

Shopify has a few AMP apps like ‘AMP by AMPify Me’ and ‘AMP by Shop Sheriff’ that you can install to create and apply AMP pages for your website.

6. Optimize Images

Visual elements are the primary reason behind slow page load speeds. Large size images and videos can slow down your website exponentially.

Serving unscaled and full-size images increase your total page size and thus directly reduces your page load speed.

Shopify recommends using images of size 2048×2048 pixels for product photos. So, if you have images larger than that, it’d be best to scale them and reduce their dimensions. You can use the Shopify Image Resizer tool for this.

Images that are too large should also be compressed so that file size is reduced without compromising the image quality.

7. Use Google Tag Manager to organize tracking

Google Tag Manager loads all the external scripts or tags your Shopify store uses (like tracking codes for analytics, goals, conversions, etc) in one request instead of making seventeen different requests.

Google Tag Manager also loads JavaScript files asynchronously. In this way, they don’t force other elements of the page to wait for them to finish.

Google Tag Manager consolidates all your tags into a single JavaScript request. This allows your rest of the website to load without hindrances.

8. Reduce HTTP requests

You can use the HTTP Requests Checker tool by GiftOfSpeed to reduce the number of HTTP requests. The number of HTTP requests can be reduced by taking some of the following steps:

• Combine inline your CSS scripts
• Use inline JavaScript for smaller snippets
• Combine all JavaScript files
• Minimize the use of design functional images
• Convert images to Base64 code
• Limit the number of social buttons

We will discuss some of these Shopify speed optimizations in detail in the next section.

9. Regular Performance Analysis

It is always a good idea to check your website’s performance at regular intervals. This enables you to know when your site speed is affected and what is affecting it.

This analysis should always be performed before applying any Shopify performance optimizations so that you clearly know what optimizations are required to be made.

You can use tools like Google PageSpeed Insights, GTMetrix, and Pingdom to analyze your website’s performance and to determine areas where there is a scope for improvement.

Practical Tips for Shopify Speed Optimization

Now that you know the best practices to follow while setting up your Shopify store, we can delve deeper into optimizing your slow Shopify website.

In this section, we will deal with the technical aspects of optimizing a Shopify website and provide tips to optimize various elements of your Shopify website.

If you follow all these tips and apply the suggested optimizations, you will see a significant improvement in your Shopify website load speed.

Let us take a look at all the Shopify speed optimizations that you can apply to your slow and sluggish Shopify store.

1. Minify CSS and JavaScript

To minify the CSS and JavaScript files of your Shopify website, you first need to download all your CSS and JavaScript files. Head over to the Themes folder and you have to look for all the files that have ‘.css’ or ‘.js’ as extensions.

Shopify automatically minifies the theme.scss.liquid file, so you do not need to minify this file.

Make a copy of each of the files in a separate safe space like your cloud storage (Dropbox or Google Drive).

Now, use the CSS Compressor if you have to compress your CSS and use the JavaScript Minifier to compress JavaScript.

Now all you have to do is replace your uncompressed or unminified code with the compressed code.

2. Combine JavaScript and CSS files

If you have a theme installed that is not completely optimized for best speed and performance, then you can manually optimize it by optimizing the JavaScript and CSS files.
Let us take a look at how you can do that:

• Merge all Stylesheets: Firstly, you have to merge all your CSS stylesheets into a single file. To do this, create a fresh file called ‘application.scss.liquid’ in your theme’s asset folder. Paste all the content from each stylesheet into the freshly created file. Next, from your theme’s master layout (theme.liquid), delete the link tags for the old stylesheet into the new main file. The Code will look like this:

  {% raw %}{{ 'application.scss.css' | asset_url | stylesheet_tag }}{% endraw %

• Merge all JavaScript files: To merge all JavaScript files into a single file create a fresh file called ‘application.js.liquid’ in your theme’s asset folder. Now paste all the content from each JavaScript file into the newly created file. Finally, from your theme’s main layout (theme.liquid), delete all javascript link tags, and add the following code to the newly created main file, towards the bottom (right above the closing):

<body>
<script src="{{ 'application.js' | asset_url }}" async defer></script >
</body>

3. Use Asynchronous loading for CSS and JavaScript files

If you have minified and combined the CSS and JavaScript files, you can optimize the way they load on your pages.

CSS and JS can be loaded in two different ways, synchronously and asynchronously.

If your scripts load synchronously, they load one at a time, in the order in which they appear on the page.

On the other hand, if your scripts load asynchronously, some of them will load simultaneously.

Loading files asynchronously can speed up your Shopify store and its pages.

This is because when a browser loads a page, it moves from top to bottom.

If it gets to a CSS or JavaScript file that is not asynchronous, it will stop loading everything else until it has fully loaded that particular file.

If that same file were asynchronous, the browser could continue loading other elements on the page at the same time.

4. Reduce URL Redirects

The performance problems and high load times in your Shopify store may be the result of too many redirects.

To check all the URL redirects on your Shopify store you can go to ‘Online Store’ > ‘Navigation’ from your Shopify admin panel.

Now click on ‘URL Redirects’ to display most of your Shopify store’s active redirects. From here you can check and reduce your URL redirects to improve the speed and performance of your Shopify store.

5. Remove Broken Links

Broken links on your site can prove to be quite harmful. Broken links inflate the number of unnecessary HTTP requests to be performed. This reduces the page load speed of your Shopify website and it takes longer to load.

The Broken Link Checker is a tool that can help you identify and fix the broken links within your site.

This tool is completely free to use and also provides a ‘src’ link which shows you exactly where the broken link resides in the page’s code.

6. Minify HTML, CSS, and JavaScript

We can reduce the amount of data the browser has to download by minifying HTML, CSS, and JavaScript resources.

Minification is the process of removing unnecessary characters like comments and whitespace from the source code.

These characters are extremely useful in development, but they’re useless for the browser to render the page.

7. Lazy Load Images

The technique of Lazy loading the images involves making use of a JavaScript library to load images only when they should be visible to the site visitor.

This improves page load time.

Lazy Loading can prove to be quite useful for Shopify stores and is especially advantageous if you use tall pages where a lot of images will not be visible to the visitors until they scroll down.

So, you can improve your website’s perceived loading speed by not loading all the images initially.

8. Compress and Consolidate Images

Images make for about 50-75% of your web page’s total size. The higher the quality of your images, the larger the number gets.

You can compress the size of images without reducing quality with lossless compression. To reduce the size of new images that you add, you can start with using TinyJPG or TinyPNG.

You should also consider consolidating multiple images like icons and thumbnails into one, called ‘CSS Sprites’ or ‘CSS Image Sprites’.

Doing this reduces the server’s number of individual image requests.

It also improves your page speed. Upload your images to a free tool like SpritePad to create sprites and render the code for you.

9. Use Pop-ups sparingly

Pop-ups display a product directly from a product listings page in a quick view window rather than making you visit a product detail page.

Ideally, it should help save the time of customers while deciding if they’re interested in buying or not. But, in reality, it can impede a customer’s experience on your Shopify website.

It can add an extra step to the buyer’s journey and can also be mistaken for a product page, which creates confusion.

Also, pop-ups can significantly slow down your page loading speeds and the page might take a long time to load.

10. Host videos and other large files on External platforms

It is not a good idea to host videos and other such heavy files directly on your Shopify website. It can seriously impact your website load times and speed.

If you want to showcase a product video on the product page, then uploading it to Shopify servers is the worst thing you can do to your website’s health and performance.

There are other platforms that specialize in hosting videos like YouTube and Vimeo but Shopify is not one of them.

Shopify servers will likely get overburdened if you try to host a video there and you will see a significant increase in page load times.

So, the best practice is to host your video on a platform like YouTube, Vimeo, or DailyMotion. And then you can embed them in your Shopify store’s product page. In this way, the video will reside on the external servers of the platform where it is hosted.

All you have on your Shopify website is an embedded link to that video so that it plays on your website itself.

Final Words

As you might have already guessed, we are obsessed with all the ways in which you can speed up a Shopify website.

A fast site helps boost your rankings, improves crawl-ability for search engines, increases time on site, improves conversion rates, and decreases your bounce rate. Moreover, everyone loves to visit a fast website and users consider it a part of a great user experience.

We hope that this Shopify performance optimization guide was helpful. We also hope that you were able to learn a few important things and apply them to your Shopify site.

If so, please take a moment and share it.

It’ll help more people like you who want to speed up their Shopify website.

Did we miss anything important? If yes, then we’d love to hear about it.

Want to know more about Shopify performance optimization? Get in touch with us today and we will help you out!