Shopify Speed Optimization in 2024:

Your 9+ Steps Guide

for Faster Ecommerce

Shopify is one of the best platforms that offers a wide variety of opportunities to attract more visitors to your online store, provide them with the best services, and turn them into regular customers. However, there is a but! You must always remember about Shopify speed optimization. Your website might be beautifully designed, have numerous features, and offer the most competitive terms of purchase and delivery. But if your site is slow, none of those benefits matter. Your potential customers will abandon ship without making a single purchase.

We know this too well because we work on Shopify performance optimization for different stores every day, and we know exactly how site speed affects conversions.

Do you know how to optimize a Shopify store’s speed? In this article, we will give you answers to the most burning questions related to Shopify speed optimization and the ways in which fast websites influence Shopify conversion optimization.

Looking for help?

Contact Us for Professional Shopify Development Services

GET IN TOUCH

What Does Shopify Website Performance Depend On?

The performance of Shopify websites mainly depends on the server, custom functionality, and everything that runs on the frontend.

Explore more opportunities to get sales, like

Adding a Shopify Buy Now Button

Explore now

Server optimization

The farther the physical server is located from the user, the more time it will take to send HTTP requests to it and receive a response. Hosting should be chosen depending on the country, or countries, your business is focused on. If your online store sells products far beyond the borders of one country, then it makes sense to use a CDN connection. The previous info is useful if you haven’t had any experience with Shopify platform before, for example, if you’re now planning to migrate your store from Magento to Shopify and think that things like server tuning or caching in Shopify require the same efforts.

The truth is – in Shopify this is not a problem at all. The provider assumes all responsibility for the quality of the hosting, and online-store owners do not have to pay an additional fee for this service. The only thing you can do here is upgrade the hosting plan to take your store to the next level. Sometimes switching to a better plan may halve the loading time.

Custom functionality

Each app you install (e.g. gift cards for Shopify, marketing or SEO app, etc.) adds weight to website pages, increases the number of requests sent to the server, and makes the pages load slower and slower. Additionally, some apps may include bugs in the code, which inevitably affect Shopify performance.

Vital info on

How to Make Shopify Inventory Management a Process You Won’t Hate

Explore now

Front-end

The front-end includes the website design, chosen theme, layout, and all the other options that make the customer journey simple, straightforward, and exciting. Each of the listed points often negatively affects Shopify speed.

Undoubtedly, Shopify is one of the most convenient platforms for those who are new to online retail business and do not have enough technical skills, time or desire to study a bulk of technical documentation, which is usually a must for most ecommerce platforms. On the other hand, the performance of most of the back-end processes here is the responsibility of the platform providers. In this regard, when it comes to the need to speed up Shopify store, there is neither full access to the platform’s source code, nor is it possible to customize third-party functionality.

Explore more info on

Why Do Shopify Stores Fail

Explore now

The Best Tools to Check a Shopify Site Speed and Performance

If you are unsure if you need Shopify site speed optimization, we recommend using one or several of the tools below to start. Each of them has its advantages and unique features, and it’s up to you to decide which one is best for your use. Give each of them a try and then you can make your own choice, but we’ll get you started with some brief info on each before you do.

Google PageSpeed Insights

The PageSpeed Insights (PSI) provides Shopify page speed and performance reports on both mobile and desktop devices and gives detailed recommendations on how to speed up Shopify website page you are checking.

PageSpeed deserves your attention because:

• It tells you how to optimize a Shopify store for mobile, giving detailed data and recommendations
• Recommendations are provided first hand by Google itself, which is worth taking into account, especially if you are interested in Shopify search engine optimization as well

GTmetrix

To use GTmetrix, you just need to enter your website URL, press the Start button, and wait a few seconds. After that, you will see the Page Speed score and YSlow Score (a separate service that analyzes 23 different parameters) and suggestions on how to improve the Shopify store speed with detailed guidance and recommendations for Shopify speed optimization steps.

GTmetrix is useful thanks to its easy-to-understand interface and the great variety of parameters tested. It is also convenient that the data from the YSlow Score service is integrated with GTmetrix. The service provides extensive information on the load time of each element of the page being tested (“Waterfall” tab). The main disadvantage of GTmetrix is the limited choice of test server regions, which influence the speed test results. To measure the performance more accurately, choose the closet test server manually.

DevTools Google Chrome

DevTools Google Chrome is a useful tool for analyzing page load speed and pointing out files that slow down performance.

To open the tool in Chrome, use the keyboard combination Ctrl+Shift+I (for Windows), or Cmd+Opt+I (for Mac), or find it here: Menu>Additional Tools>Developer Tools.

Why is DevTools good? Because it is easy to access, free of charge, and if you have enough skills to use it properly, you will get a lot of useful information from it.

However, there are a couple of cons. It gives no recommendations on Shopify speed optimization. You’ll need to dig deeper to understand how to speed up your Shopify store and implement all the required steps yourself.

WebPageTest

WebPageTest is a free, simple, and useful service. To test speed, you just enter your website URL, select a region from the list or on the map, and choose a browser.

Additionally, WebPageTest provides a tool for optimizing images, which operates by compressing them.

The main advantage of WebPageTest is its convenient and detailed breakdown of test results by speed and queries. As for the drawbacks, it lacks optimization recommendations.

Fortunately, there are plenty of other tools that help analyze and optimize a Shopify website, like Pingdom, or Yellow Lab Tools. You are free to choose the one with the interface and set of services that will help you in the Shopify speed optimization more than others.

9 Ways to Optimize Shopify Store Speed and Performance

After you analyze your online store speed with one of the above-listed tools, you get a detailed test result with all the issues detected on both the front and back-end of your website. With that information in hand, it’s time to understand where you should start the Shopify speed optimization.

Everything Shopify stores owners can do to improve Shopify speed is related to optimization issues associated with the front end. This can be a theme, third-party functionality, an excessive amount of unoptimized images, and much more.

Next, you will find out more about this platform’s main weaknesses, which primarily affect the performance and speed of your Shopify store. While doing so, let’s also discover how you can eliminate these issues and avoid them in future.

#1 Choose a responsive theme

Choosing the right theme for your online store is one of the cornerstones of good (or bad!) website load speed, and Shopify mobile optimization as a whole. A general performance analysis of online store pages does not provide any details as to how well the store theme is optimized, so here is a bit more info, designed to help you figure out how to optimize a Shopify theme.

• 1. To find out whether your current theme needs any improvements for your Shopify store speed optimization, you should check it separately on PageSpeed Insights. For this, run an analysis of the theme’s demo page, and you’ll see if your current theme needs any improvements.If you do not know exactly which theme you are currently using on your Shopify store, this service will help!
• 2. If the analysis has found any problems in the performance, the first thing you should do is look for theme updates available from its provider. Yes, it’s true! Sometimes theme designers actually do not abandon their products, but continue to work upgrading and fixing bugs detected by users after the release!
• 3. When choosing a theme, make sure it is device responsive. Today, at least half of users browse and make online purchases from their smartphones and tablets, most of which have different screen dimensions. It is vital to optimize Shopify for mobile and to make sure that your users get the best experience when browsing your website.

Your current theme needs improvement?

If there is a need for any improvements, you now have three options to choose from.

• 1. Update your current theme by changing its code. Only those comfortable with HTML, CSS, and Liquid can cope with this. If that doesn’t really describe you, you may need extra help from experienced developers.
• 2. Choose a new, perfectly optimized and responsive theme from the Theme Store.
• 3. Create a custom theme from scratch. This option will be more expensive than the previous options, and you will have to hire professionals in Shopify development services who have enough skills to cope with this task professionally.

However, building a new theme from scratch can reap a lot of benefits:

• You can implement any features missing in the ready-made themes
• Custom website design is another opportunity to make your store stand-out – plus it will be yours alone
• In the future, all needed changes will always be available and easy to access

#2 Revise the installed apps

Although the Shopify platform provides vast native functionality, there are many features not included that you can implement with the help of third-party apps. While some store owners are thorough as they choose each app to be installed on their store, revising website performance after each installation, others only pay attention to the app features.

Each time you decide to expand the functionality of your store, it is crucial to remember that the more apps you install, the more your website will weigh, the more requests will be sent to the server, and the longer it will take to load each page fully. So, the question becomes how to speed up a Shopify website with all those apps?

The first thing to do is to take stock of all the installed apps. Often, it turns out that some installed applications are used very rarely, while some are not even used at all. However, despite this disuse, even if the application is disabled, JS/CSS files are still running, using resources and, as a result, making the site load longer.

How to optimize your Shopify store’s third-party functionality?

• Sort out unused apps and remove them from the store. Before you do that though, thoroughly read the Shopify support documentation and uninstall instructions. You’ll want to make sure you do everything right so as to avoid any app leftovers. These will only burden the website’s performance in the future.
• If you find some apps with useful functionality, but that overload website performance, you may not actually need to remove them. Instead, simply optimize. For that, you can merge all the stylesheets into one single file.

To avoid common problems in the future, you should only select modules from trusted providers. Before purchasing, you should test every app to reveal its disadvantages. These could include things like an excessive number of database requests, etc.

Are you searching for quality third-party apps?

Choose the Best Ones in Our Compilation of Top Shopify Apps

Choose Apps

#3 Optimize Shopify images

Pictures play an essential role in load speed and thus in the Shopify speed optimization. Uploading high-quality pictures to use on homepage sliders or product pages is a common mistake. Of course, beautiful photos are a must-have for any online store. Plus, this is exactly what your customers want to see when deciding whether they should buy from your store or not. Although shoppers won’t tend to notice a slight decrease in the resolution of your optimized images, they will notice and relish the opportunity to enjoy the significant improvement in your website performance.

Product images and icons

Shopify image optimization and compression will help speed up website performance significantly. For example, compressing images from 20 MB down to about 300 KB can sometimes improve website speed by 70%. So, here’s what you want to do to optimize images for Shopify:

• Use CSS sprites to consolidate multiple images, such as icons, into one. This will limit the number of server requests, thus improving the page speed. The SpritePad tool will quickly create sprites and render the code for you. For this, you just need to drag-and-drop images to the tool and then download the sprites.Instead of downloading all images one by one (1 HTTP request per copy), the CSS sprite loads one large image sending only one request to the server. The CSS, in turn, allows the display of each element separately throughout the page.
• To compress and reduce the size of images without losing their quality, we recommend using TinyJPG or TinyPNG online services. Just download or drop your files, and download the compressed and ready-to-be-published pictures in a minute. For non-optimized pictures that are already uploaded to the site, you can install one of the available Shopify image optimization apps, like Crush.pics or Image Optimizer. These tools are made to take care of all existing pics and those that will be uploaded to the site in the future.

Optimize the thumbnail images

If you use carousels to showcase popular products on the homepage and related products on the product pages, the following advice may be useful for you. To display thumbnail images in such carousels, they are pulled from the product page, as is the related product information. If you leave everything as it is, the system will take high-resolution images, and the customer’s browser will have to adjust the pictures to the requested dimensions, in turn, making the customer wait longer.

For desktop browsing, the change in download speed may be minimal, but if a potential customer has reached your site from a mobile device, the situation may drastically change, and the page load speed will increase several times. However, an easy fix is that you can make some changes to the Liquid code – just use the “srcset” attribute, and set different screen resolutions for images.

Take a closer look into image optimization techniques

With Our Practical Shopify Image Optimization Guide!

Get the guide

#4 Use Lazy Load

Lazy Load is a technique that helps by loading images only as soon as they appear in the viewport. For example, on the online store for our client, Generate, the drop-down menu on the homepage included product carousels with six products for each slider. This meant that 48 additional thumbnail images had to be loaded to showcase their popular products to customers. In this Shopify speed optimization project, we replaced all sliders in the drop-down menus with optimized static images. Additionally, we used Lazy Load, which works to make the pictures load as soon as the more critical elements on the page are ready.

Lazy Load helped us save 11 seconds of customer time, which is a huge result! 11 seconds may not sound like much, but when it comes to loading a webpage, it is an eternity.

#5 Find an alternative to the homepage hero slider

Large Hero sliders at the top of the homepage is one of the distinctive features of Shopify online stores. No doubt, large sliders with high-resolution images make your online store look sophisticated and attract visitor attention. However, a slider with 4 to 6 high-resolution images adds a seriously destructive load to your store. Here’s what you can do about it:

• Decrease the number of slides. Leave no more than three photos in a slider and optimize the images for Shopify without losing their quality. Your slider should follow the best UX practices and should be complemented with a Lazy Load feature. The store will still look great, without the heavy weight.
• Eliminate the Hero Slider and replace it with a single, well thought out hero image complete with a CTA on it. Statistics show that today less than 1% of customers click on sliders. Others are either annoyed by the feature or at the very least, don’t bother to watch every slide. Of course, it is your choice to decide which option is for you. So, if you decide you still want to use a slider, just be sure to consider the previous point.

#6 Reduce the number of HTTP requests

When we open a website page, it accesses the server to receive information such as the list of products, shipping or payment methods, images, and other content. Sometimes the generation of a complex page with a bulk of content may imply up to 100 requests. However, if the store is not optimized, the number of requests may increase indefinitely. Each request can require up to 20 milliseconds. While that sounds miniscule, they add up! The more of them are there, the longer it takes to fully load the page.

How can we reduce the number of requests?

Caching!

This is a mandatory feature, especially for pages with large amounts of data, images, videos, and other files. An example of “long” requests for online stores is one in which the products list page contains more than 100 products. If the data is cached, the server does not need to regenerate it every time the user lands on your website. This significantly speeds up the data receiving process and relieves the server load.

In fact, each element on the page requires sending a separate HTTP request. Hence the more complicated the page is, and the more details, images, CSS and JS files it contains, the more requests it will send to the server. This of course then means the longer your customers will wait for the complete picture to appear on their screen.

In addition to caching, to make fewer HTTP requests in Shopify, you can also do the following:

• Consolidate / optimize Shopify JavaScript
• Combine CSS
• Make sure that CSS and JS are in-line
• Make CSS sprites for faster image loading
• Keep the theme and images design to a reasonable minimum
• Revise installed apps

In our Shopify speed optimization project for Generate, we faced an unexpected issue. Five forms were using Magento validation. We replaced them with Shopify validation forms and deleted all the extra scripts. As a result, several additional HTTP requests were eliminated. Additionally, some of the removed Magento JS scripts were found in the main file with scripts. Although their elimination did not lead to a decrease in server requests, the file weight decreased, and now it loads much faster.

In general, after we removed the demand for missing style files and jquery recalls, and deleted the redundant CSS and JS files, the website load time was reduced by 6 seconds.

#7 Enhance the mobile performance with AMP

This technology was introduced back in 2015. AMP (Accelerated Mobile Pages) allows you to speed up a Shopify website several times. The result is achieved due to some restrictions and layout rules for AMP pages. The main ones are:

• 1. All AMP pages are cached on CDN servers around the world for quick access to them.
• 2. Restrictions on the size of uploaded files, which leads to a decrease in the amount of transferred data.
• 3. Limited use of JS, which reduces the number of the server requests.

It should be noted that Shopify stores do not support this feature natively. In theory, there are two ways of Shopify mobile optimization with the help of AMP – using the app or developing accelerated pages from scratch. In practice, the first option is more viable and justified. There are some great apps on the Shopify App Store like, AMP by ShopSheriff, Fire AMP, and a few others.

Grab our compilation of

The Top Shopify Apps for 2024

Grab now

Development of the AMP pages from scratch is a long-term and rather complicated process. Consequently, this leads to higher expenses which is rarely justified, especially when you can take a ready-made solution and implement it within several clicks.

What about when AMPs are not an option?

Another important point about the AMP is that it’s just not always a viable option. Let’s figure out when using the technology will really help, and when it might cause numerous issues and headaches.

So, why aren’t Shopify AMPs for everyone?

• 1. This technology is not an option for online shops mainly using complex Javascript apps that change the way product pages run. Such pages are not compatible with AMP.
• 2. Online stores operating in the print-on-demand niche should abandon this idea too because usually to checkout in such stores, users have to upload a photo to personalize their chosen product (e.g. a mug). On AMP, this feature is simply not available.
• 3. The story is the same with wholesale stores that require users to login before viewing the product catalogs. Such functionality is usually achieved in Shopify with the help of heavily customized third-party apps.

Of course, each online store is unique and the decision on whether you should implement AMP on your store needs to be based on a deep analysis of that particular store.

What pages are best to consider for converting into AMP?

If you decide to implement AMP on your store, the next question is – which pages exactly should be AMP? The whole website can’t be converted but some pages have no need to be converted anyway.

So, let’s summarize. Which of the website pages should be AMP?

• Collection pages. First and foremost, these are collection pages which are the best landing pages throughout every online store. Because of this, the idea to make collection pages AMP is totally justified. Additionally, improved performance of these pages will help them rank higher, consequently bringing more organic traffic to your Shopify store.
• Product pages. Being properly optimized, AMP product pages are good to go. However, as we mentioned above, not every product page is a subject to AMP. Everything depends on the way your product page looks and runs, and on the way you expect it to look and run while being an AMP.
• Blog pages. Sure, you’d want to boost your blog pages! This is a great source of organic traffic. So, don’t miss the opportunity to get the maximum profit from your content, along with letting Google know that your blogs are the fastest.
• Other regular pages, and a homepage are worth considering if they are simple in design and do not request any third-party apps to run properly.

Although sometimes your website’s page load times can be boosted up to 1 sec, you should remember that these would be different pages with slightly different URLs (some kind of product page duplicates with a simplified layout and functionality). In addition, Google inspects these pages separately. To track them, you’ll need to configure basic analytics separately. To learn more on how to add analytics to your new AMP pages you can simply google it and get all the deets.

#8 Minimize redirects and get rid of broken links

First, we have a couple of words about redirects, which are the pain point of numerous online stores. Abundant redirects throughout your store affect website speed. Sure, sometimes redirects are necessary and inevitable, but don’t overuse them. While most customers might never notice that they were redirected to another page, search engines will. These added milliseconds to the page load time will definitely be noticed and might affect your page rankings at any time. Moreover, redirects are usually perceived by Google as factors impairing the user experience, which is another strike against them. So, stick to the 301 redirects only where they are really needed. 302 redirects are good only for short-term use.

As for the broken pages – you probably already know they’re bad, right? Here is why:

Bad user experience

A 404 page is often a deadend for every customer. When wishing to find a needed product, customers landing on a page that ‘does not exist’ is a very very bad user experience. Numerous broken pages just convince customers to leave the website and move on to the next online store where the pages work as intended.

Business reputation

It harms your business reputation and revenue. No matter how much you invest in your product or service promotion and building brand awareness, all your efforts will vanish once that potential customer lands on broken website pages.

SEO

404s kill your SEO efforts. Having a couple of broken pages throughout your site won’t harm the website performance or rankings in SERPs. Here, the consequences are much less obvious compared to the previous points.

To understand the way 404s affect your SEO, let’s look at the problem the way search engines see it. Google’s algorithms pay a lot of attention to how users behave on website pages, such as how much time they spend on a page, and how they interact with the content. Accordingly, when users land on a 404 page, they leave it immediately without any real interaction. The algorithm treats such behavior as a signal that the page does not contain the useful content that the user came for. As a result, your pages lose trust as well as position in the search results.

#9 Upgrade your Shopify plan

Sometimes, the only reason for a slow Shopify website is a lack of hosting capacity. Usually, this happens with online stores seeing an increase in the traffic flow. According to the official data, Shopify hosting does not limit the store traffic or number of product listings. And the capacity of the server automatically scales along with the rising needs of the website. However, sooner or later, those super fast growing stores with only a basic Shopify subscription face performance issues.

So, if you’ve already analyzed the entire website and still haven’t found the reason for the poor Shopify website performance, you should consider upgrading your Shopify subscription plan. This move can potentially increase the website load speed two times.

Note! If the upgrade didn’t help, you need to investigate your performance issues deeper. If this is the case, you’d be best off addressing the problems with Shopify pros who have good experience in performance optimization.

Explore your opportunities and

Create Multiple Stores With Shopify

Explore now

Here’s How Whidegroup Deals WIth the Performance Issues

In This Case Study We Describe the Steps in Detail

view case study

How Does Shopify Speed Optimization Affect the Conversion Rate?

By the end of 2020, the number of online shoppers is expected to reach 2.05 billion. Along with that stat however, the average online shopper conversion rate for the same period is 2.86%! This means that only about 28 out of 1000 potential customers who landed or will land on a given online store move on to the purchase!

There are many factors that influence conversion rate. To promote your business, by increasing brand awareness and customer loyalty, you should apply different advertising and marketing techniques. However, no matter how much money is spent on marketing, if your website is not optimized – these will just be wasted efforts.

Shopify speed optimization has a significant impact on user behavior. If within a few seconds a website is not fully loaded, visitors leave. Consequently your bounce rate grows, which is direct evidence of a bad user experience. This means that you won’t see not only repeat sales in Shopify, but will hardly attract even the first-time customers.

Explore more ways to

Significantly Reduce Shopify Bounce Rate

Explore now

There is no loyalty! They just buy from your competitor, whose site is faster – hence, your decreasing number of sales and profits.

To illustrate all the above, here are some facts taken from Kissmetricks:

Thus, with each passing second while your website loads, you lose more and more potential buyers. Not only does the number of people who are likely to buy from you decrease, but the likelihood they will return also decreases.

Additionally, search engines take into account Shopify website performance and load speed when ranking them in their organic search results. This is yet another reason why a slow site gets far fewer targeted visitors, and consequently, a lower conversion rate compared to faster online stores.

Final Thoughts

Depending on the number of issues found at the stage of analyzing your online store performance and on the experience of a specialist, it can take from a couple of hours to several weeks to speed up a Shopify store.

Remember that the only irreversible consequence of Shopify speed optimization is your conversion rate optimization! Shopify’s platform provides a lot of opportunities to implement steps for fast and high-quality speed optimization techniques. The process can be complicated, but it doesn’t matter what issues you face with your Shopify store optimization. At Whidegroup, we are always ready to assist in optimizing, regardless of your store’s size or the site’s complexity. Drop us a line today so we can help your e-store be a success!