10+ Essential and Advanced Tips for Shopify Speed Optimization

Optimizing your Shopify store speed and performance is one of the most essential questions that arise before and after your storefront is set up. Site speed influences not only user experience but also your Google ranking and conversions, which makes it a crucial point to consider when investing your time and effort. Here, we discuss in detail how to improve Shopify store speed and which optimization tactics to apply to boost your website performance.

Why improve Shopify site speed?

• User experience: Note that 47% of users won't wait for the website to load for more than two seconds. And the percentage of mobile users leaving websites with poor performance is even higher. Given these statistics, you cannot ignore your Shopify site speed optimization. Otherwise, you may lose half of your customers.

• Google ranking: It's not a secret that site speed is one of the factors Google considers for website ranking. However, this factor is not the most important for ranking, as user bounces and time spent on a page weighs a lot more. For Google, though, you need to optimize your speed at least to the average level so its load is not too long.

• Customer loyalty: Fast page load increases customer loyalty and contributes to a better return visitor rate since good website performance is one of the indicators of a company's trustworthiness.

• Conversions: Together with increased customer loyalty, a fast site load increases chances for purchasing from you as this factor influences user decisions at every buyer journey step. Studies show that a one-second load delay can reduce conversions by 7%.

What is the benchmark for Shopify page speed?

Based on the above information from studies, we can conclude that a page speed benchmark for websites, including Shopify stores, is two to three seconds.

In order to align your store’s speed with speed benchmarks, you need first to check your current speed and, then, start optimizing your store according to all the steps described below. If you wish to speed up your optimization process, we recommend leveraging Shopify web development services.

How to check your Shopify speed score

After we have learned the reasons to invest in your Shopify store speed optimization, it is time to see how you can measure your site performance.

To check your current speed score, visit the Shopify web performance dashboard in your admin panel (Analytics > Reports > Web Performance).

In this section, you will find insights not only about loading speed but also about your store's visual stability and interactivity. These metrics are based on Google's Core Web Vitals, which allow for complex and holistic measurement of website performance.

Here is a brief description of metrics provided in the Shopify web performance dashboard.

• Loading speed (Largest Contentful Paint or LCP by Google) is the time from when a user first requests a page until the largest element on the visible screen is rendered.

• Interactivity (Interaction to Next Paint or INP) measures the time needed to repaint the next frame after user interaction, such as when a user clicks a button.

• Visual Stability (Cumulative Layout Shift or CLS) measures unexpected layout shifts on a page, such as when you lose your place of reading a post because an ad finished loading.

What is a good Shopify store speed?

In the Shopify web performance dashboard, the loading speed is considered good if it's equal to or less than 2500 ms, moderate is from 2500 ms to 4000 ms, and poor is greater than 4000 ms.

See all the benchmarks for each metric here.

How to check the speed score over time

Click on any card to see detailed statistics over time. This gives you more information about which changes influence your performance, such as how a theme update or an app installation on a specific day impacts loading speed.

There are also statistics on the number of daily visits that are colored to show the share of good, moderate, and poor performance. You can apply filters, such as Device Type, Date Range, and Time Frame Grouping here.

Besides your current and historical rates, you can also see recommendations for performance improvement for the most visited pages, which are typically product, collection, and home pages.

Some other tools for running a Shopify speed test

• Another tool for checking page speed, which you can use in parallel with Shopify's built-in tool, is PageSpeed Insights. This tool gives customizable insights about your page speed on different devices and, like Shopify, provides recommendations for optimizing your website performance.

• You can also leverage the LightHouse Chrome extension to get reports about a particular page in your browser.

• WebPageTest offers additional performance metrics. Here, you can view short videos of how your pages load within milliseconds.

Which factors influence your Shopify store speed

Note that issues slowing down Shopify stores are mostly individual, and you must thoroughly investigate a particular case. To save time on solving issues for your store, we suggest reaching out to a trusted Shopify Partner like DigitalSuits, which has a proven track record of successful Shopify performance optimization projects.

However, to give you an idea of which factors influence Shopify performance, we've compiled a list of the most common.

• Apps
• Third-party services and libraries
• Theme's code
• The number and size of images and videos

There are also factors on the user's side that may affect website load, such as device and internet connection as well as local browser cache. However, these factors are out of your control, so let's focus on tips for solving common issues.

TOP-5 recommendations for Shopify website speed optimization

1. Limit installed Shopify apps: The narrower your list of installed apps, the fewer chances there are of overloading your store. So consider leaving only the most essential apps and replacing the rest with lightweight custom solutions.

2. Get rid of unnecessary features: Consider optimizing your project with a minimal set of essential features and eliminating non-essential features instead. To accomplish this task, consider rearranging your store's infrastructure and aligning it with the most crucial business objectives. Also, make sure that no features duplicate other ones in your store.

3. Go through the list of third-party services and scripts: As with native Shopify apps, minimize third-party apps and scripts by removing those you don't really need or that you have forgotten to remove previously.

4. Optimize your images and videos: Basic image optimization includes three steps. First, compress and resize images to the size shown on your website. Next, choose the right format for the smallest image size, like WebP. To optimize your overall website design, reach out to the Shopify web design company. If you wish to use videos for your storefront, set a maximum resolution limit, minimize your video's bitrate, compress them to minimize their size, and choose the right codec. You can also leverage lazy loading (described below) and autoplay.

5. Check your theme for issues: Choose themes from the Shopify Theme Store, as they are tested for delivering high performance. However, if you want to develop a custom theme, you should pay attention to its alignment with speed benchmarks. Check out how to customize a Shopify theme. Don’t forget to run Theme Check to identify performance issues. To get a high-performing custom theme faster, we recommend connecting with trusted Shopify developers who fully understand Shopify optimization techniques.

How to speed up the Shopify website using advanced techniques

To dive into Shopify speed optimization even further and extend your knowledge on the subject, we've compiled an additional list of advanced methods our developers use to speed up stores that opted into retainer services for ongoing support.

• Lazy loading: This programming technique not only improves speed and performance but also increases perceived performance, which means users think the website is loading faster than it really is. How does it work? Say you have a collection page with over 100 product images. It's plain that it will take huge amounts of time to load them all at their full size. The trick is to load their low-quality images when a user scrolls through the page. Yet, when users stop at some point, the lazy loading technique provides them with high-quality image analogs.

• System fonts: Using system fonts instead of custom ones improves theme performance since browsers do not need to download your fonts to render texts; instead, they are rendered based on the user's operating system's pre-installed fonts.

• Content Delivery Network (CDN): Shopify provides a CDN backed by Cloudflare for quick loading of your store around the globe. Files delivered through CDN are compressed, which additionally reduces their size so they can be downloaded faster by browser. To use CDN, add your assets to the theme's folder, either manually through the GitHub Integration or by using the Asset REST Admin API resource.

• JavaScript and Liquid optimization: JavaScript is supposed to be used only as a progressive enhancement of your theme for solutions that can't be implemented by using HTML and CSS. If using Javascript, avoid introducing third-party frameworks, libraries, and dependencies. Your minified JavaScript bundle size should be no more than 16 KB. Also, as much as possible, minimize the operation time for your Liquid code by optimizing its parts.

• Redirects and HTTP requests: Too many redirects can negatively impact your store speed as they increase the number of HTTP requests. To manage your URL redirects in Shopify, you can use redirect filters. You will find this option in the Navigation section in your dashboard settings.

• Browser caching: Enable browser caching for your returning visitors to speed up loading your website's content for them. To enable this feature, open the Online Store section in your Shopify admin, then click Preferences and find the Browser caching section, where check the box Enable browser caching.

• Accelerated Mobile Pages (AMP): Optimizing mobile performance for your store is crucial, as sales through mobile devices make up 60% of all e-commerce sales worldwide. The AMP framework will come in handy here, as it simplifies HTML and limits the use of JavaScript for mobile devices.

• Facets and filters: By leveraging facets and optimizing filtering, you simplify product search for your customers, reducing the number of pages they need to view. Optimized filters significantly improve user experience and customer loyalty. Themes and apps update: Keep an eye on updating your theme and apps in time, as Shopify never stops releasing new features and upgrades that may impact your store's performance.

• Professional help: Skilled Shopify developers can help optimize store speed and performance, as they're always up to date with Shopify's best practices and solutions.

Check out the complete list of advantages of opting in for the monthly support for your Shopify store.

Successful cases of Shopify performance optimization

In DigitalSuits, we provide maintenance and support services that include store optimization works. To illustrate how it works, we describe some of our cases.

• Pattern Brands. The client hired a dedicated team of developers to optimize his home goods stores. We had to streamline the user journey across seven websites and fix issues that slowed them down. As a result, our implementation and optimization work reduced load time by roughly 60%.

• Understatement Underwear. For the underwear store, we provided redesign services and ensured high website performance by replacing native and third-party apps with custom high-performing solutions. Within a year of such works, the website’s conversion rate has been boosted by 22%.

These companies are still leveraging the DigitalSuits retainer services that ensure ongoing maintenance and support of their projects.

Wrapping up

Shopify stores with high performance and optimized speed scores inevitably win the competition for the customer's attention. Good performance and page speed ensure better conversion, user experience, and, as a result, customer satisfaction. Yet, comprehensive Shopify page speed optimization requires proven testing tools, such as those available in the Shopify web performance dashboard, and finding solutions for fixing issues.

We mentioned that testing often shows issues that are individual for a store and need deep involvement of developers. Some common issues that developers regularly face are too many installed native Shopify apps, custom themes with unoptimized code, usage of third-party services and apps, and unoptimized media content. To solve these issues, you can apply all the techniques described above or contact the Shopify development team. At DigitalSuits, we're dedicated to implementing the best solutions that speed up customer stores and improve performance. Get in touch with us to learn more about our approach.