A Guide to Shopify Speed Optimization: Main Things to Consider

The first thing that users notice about an ecommerce store is its loading speed. If your website takes too much time to load, be sure customers will notice it immediately, and not all of them will be willing to stay. Needless to say, this will result in lost conversions, high bounce rates, and even damaged brand reputation.

While Shopify is considered to be a highly swift ecommerce platform, there may still be issues with its speed. We’ve collected the main reasons for mediocre Shopify performance and the most effective methods for Shopify speed optimization.

Why does Shopify store performance matter so much?

We’ve already stated that poor ecommerce store performance equals annoyed customers. Annoyed customers, in turn, equal low conversions and a drop in revenue. As if that’s not bad enough already, here are a few more reasons why you should treasure the performance of your store.

Poor Google Search Ranking

Since 2018, website loading speed has become a ranking factor for Google Search and ads. The reason for that is that slow loading speed impacts user experience and user experience, in turn, is a significant factor for Google to rank the website correspondingly. 

And what happens if your ecommerce store ranks low in Google? Users will not immediately see it, and you will lose a lot of traffic, which is crucial for any online business. Hence, a slow ecommerce store does not only drive shoppers away but also sinks you down in search results.

Negative impact on conversions

If your website is too slow and shoppers somehow manage to make it till the end (aka the checkout), the slow pace of the store loading process will eventually drive them crazy. That means, you will see higher cart abandonment rates and higher bounce rates while your conversions will be dramatically going down.

Negative perception of the brand

In addition to poor SEO ranking and a drop in conversions, slow loading speed also negatively impacts your brand and the overall reputation. If users are dissatisfied with the quality of provided services (aka the website speed), they will most probably be dissatisfied with the brand itself. This may heavily impact their future buying decisions in favor of your competitors.

Reasons why your Shopify store may be too slow

Okay, we now know that poor website performance is bad. The next question is what exactly impacts the speed?

There are two types of factors that affect how fast (or how slow) your ecommerce store performs: controllable and uncontrollable ones. As the name implies, you (as a store owner) can either control certain factors or not, but both types should be considered.

Controllable factors include:

• Shopify Apps that you use;
• The store theme and features in use;
• Images and videos;
• Fonts in use (yes, even that);
• Existing redirects.

In other words, all the content and software that you use to manage the online store is 100% controlled by you and may be the reason why your store is slow.

As for uncontrollable factors, they may be:

• User’s network, device, and even location;
• Local browser and server-side cache;
• Content Delivery Network (CDN).

The more you know. On to the next question!

How to measure the speed of your Shopify store?

According to Google Lighthouse, there are three types of speed score:

• 90 to 100: Good
• 50 to 89: Requires improvement
• 0 to 49: Poor

Say, if your store has a speed score of 35, that means it is much slower than similar stores. You can measure the Shopify page speed score either in Shopify directly or with the Google Lighthouse tool.

In the first case, you’ll need to use the Shopify Admin. Go to Shopify Admin > Online Store > Themes and you will see the current speed score atop the theme. If you click on the tab, you will see a more detailed report with such information as page type wise report, speed score over time, and day-wise score with events.

You can also use Google Lighthouse for the same purpose. In this case, you’ll need to go to the PageSpeedInsights website and simply enter the URL of your store. You will then see the current store speed and a detailed report, as well as suggestions on improvement.

10 ways how to optimize the speed of your Shopify store

Seems like we are clear on what impacts the store speed and how to measure it. Now to the most fun part – let’s discuss what exactly you can do to ramp up your store. 

So, how to speed up Shopify website?

Use a fast and responsive theme

When it comes to the design of an ecommerce store, it’s easy to fall for a rich theme with lots of customization. However, a theme of your store is among the core factors that impact its speed. The more customizations and visual elements you add, the heavier the theme becomes and the more it slows down your store.

There are several tips on choosing (and using) a suitable Shopify theme:

• Try finding a balance between great style and great performance: obviously, the core goal of your theme is to reflect your brand and match its requirements. But if the theme is too heavy, users won’t really appreciate its beauty if the website doesn’t load. Thus, try choosing a theme that is both appealing and quick.
• Always test the theme: to learn how the theme will perform, you can always test it in advance. In this way, you don’t pay for the theme until you publish it, which is really great.
• Use the latest and licensed version of the theme: though seemingly obvious, some Shopify store owners overlook this factor. When choosing a theme, always select the latest and official version and never use pirate copies. Not only will they compromise your performance but will affect the security too.

Optimize images

Images are crucial for any ecommerce store, since they are the only way for shoppers to learn about the product and its looks (yes, description is nice, but we want to see the product, not only imagine it, right?). Hence, the better the image quality is, the more appealing the product looks. 

However, too heavy images are often the reason for a slow website, especially if you use lots of images for a single product. So how do you balance between showcasing your products and retaining the high loading speed?

• Use lower resolution images where possible to maintain the speed-quality balance;
• Use recommended image formats like WebP that helps save between 26-34% in file size, compared to PNG or JPEG;
• Don’t hesitate to resize and compress images to make them less heavy;
• Consider using fewer images if possible.

Remove unnecessary apps

Shopify Apps are basically plugins that extend the functionality of your store and allow you to customize it as needed (i.e., allowing users to play videos or see product reviews). And while most apps are essential for smooth functioning of your store and great user experience, a great number of apps can significantly slow the website down. 

Thus, review your current apps and see whether you really need all of them or your website can keep functioning without one or two. Pro-tip: use multifunctional apps instead of using a bunch of apps, each with a single function. 

Use speed optimization apps

In relation to the point above, you should eliminate unnecessary apps – but you should also consider using specific apps for Shopify speed optimization. The main features of these apps are:

• SEO
• Image compression
• Broken link redirects
• Integration with metadata and JSON-LD
• Minification of CSS, JavaScript, and HTML
• Speed analysis

And many more. As you can see, these apps take care of the main aspects that impact the store performance, and the best thing about them is that they are multifunctional. Examples of such apps are:

• SEO, Speed & Image Optimizer
• AMP app;
• Swift
• SearchPie
• Booster

You can see more apps in the official Shopify Apps store.

Use hero images

A hero image is known in web design as an oversize banner image on top of a website. Its main purpose is to draw attention, inform users about your product/offerings/brand, and build reputation and trust (since users love high-quality images). And as you can guess, a hero image is a great option for an ecommerce website to instantly inform shoppers about what the store offers and what its overall vibe is.

However, some believe that a single image is not enough for all the information they have to offer. This is why store owners often prefer using a carousel on top of their website, meaning, several rotating images.

But the heavier images you use, the slower your store will be. Thus, you might want to replace the carousel with a hero image to achieve faster performance.

Use system fonts

When it comes to customization, store owners often prefer all visual elements to reflect the nature of their brands. This is why custom fonts are popular and are widely used in ecommerce. But a custom font may be a big bottleneck slowing your store down and here is why.

When your store has a font that is not pre-installed on the user’s device, it will take some time to load this font during the user’s interaction with the website. On the contrary, a system font is a font that is used on the majority of devices and does not require loading. Even though the process of loading a custom font takes several seconds only, it still impacts the performance. Especially considering the fact that shoppers expect a website to load in 2 to 4 seconds.

Thus, if you are heavily using custom fonts, it might be a good idea to replace them with more common system fonts – but on the condition that they align with your overall design and style.

Get rid of redirects (if necessary)

Redirects in general are quite helpful as they help users to land on the required page even if the page was moved. In this way, redirects help retain good user experience and SEO ranking.

On the other hand, redirect chains may impact the website speed significantly. If your store has many broken links, this might be one more reason for your store to perform slowly. So how do you know when to eliminate redirects and when to leave them alone?

Redirects are NOT the reason for your site’s slow speed, if:

• there are fewer than 50,000 redirects specified on your .htaccess file;
• redirects are specified in a database (i.e., via a WordPress plugin);
• your Time To First Byte (TTFB) is low.

In these cases, redirects are most likely not the reason why your ecommerce store is slow. However, we recommend a thorough SEO review to be 100% sure.

Use lazy loading for images

Lazy loading implies downloading the content on the page gradually and not all at once. In other words, the website won’t load an image at the bottom of the page unless the user scrolls down to it. And this technique is a great helper for making your website go a bit faster.

With Shopify, you can implement the lazy loading feature by adding the lazysizes.js library to the theme assets folder. You will then have to 

• include it in theme.liquid
• locate the image tags in theme files
• update the tags by changing src to data-source and adding the lazyload class. 

Use Accelerated Mobile Pages

Accelerated Mobile Pages, also known as AMP, is an open-source project created by Google for optimizing mobile web browsing and speeding it up. Though Shopify does not offer AMP out of the box, you can add Accelerated Mobile Pages to your store by one of the following methods:

• Use available Shopify app such as AMP Sheriff
• Add the AMP through custom coding.

Whatever method you choose, be sure that the use of AMP will have a very positive impact on the speed of your store so it’s definitely worth considering.

Use Google Tag Manager for code tracking

Google Tag Manager is a tag management system used to configure and instantly deploy tags on a website or a mobile app. In terms of ecommerce store optimization, GTM helps store owners manage and deploy code snippets effectively and then transfer the tracking information to Google Analytics for further analysis. So instead of having several analytics tool, you can group them in a single container aka Google Tag Manager. This approach will obviously speed up Shopify site.

An important note: Google Tag Manager is available only on the Shopify Plus plan.

Extra things to consider

All the recommendations on Shopify speed optimization listed above are highly useful but keep in mind that every store is unique. Thus, we suggest performing a comprehensive analysis of your store to identify the biggest bottlenecks and the issues that may be put aside.

There are also a few more important things that every ecommerce store owner should keep in mind:

• Stick with mobile-first approach. Mobile commerce sales are expected to reach $728.28 billion by 2025 and most shoppers access online stores from their mobile devices. Even Google prioritizes mobile when ranking online stores, so it’s crucial to provide a stellar mobile experience to your users.
• Do not overdo simplicity. In an attempt to slim down the content, some store owners may take it too far. Always keep in mind that your store has to be visually appealing and that content is one of its unique selling points. 
• Make your store SEO-friendly. Site speed is not the only factor that impacts conversions. Detailed product descriptions, proper tags, easy navigation and many other factors impact your conversion rate and user satisfaction. Thus, when optimizing their performance of your store, keep in mind SEO best practices too.

And that’s about it. Sure, keeping your store both high-performing and content-rich is not an easy task. But hey – you will eventually be rewarded with grateful and happy customers, and that’s the ultimate goal, isn’t it?