Our team has optimized over 1500 Shopify sites, built the first performance analysis tool for Shopify, and constantly studies and publishes information and case studies about Shopify optimization.

This post will give you:

  • An outline + understanding of performance (load speed) as it’s related to Shopify sites
  • An explanation of common performance tools and how to use them
  • Links to additional resources to dive deeper

Sections

What is load speed and what affects it?

Modern websites are a complex mix of files, images, and scripts coming from various sources to produce what you see in the browser.

Load speed is the time it takes for a given website page to load those resources from the servers they’re hosted on.

The key factors affecting load speed are:

  • Weight of the page
  • Number of resources loaded
  • Where those resources are being loaded (on your own server vs 3rd party servers like apps)
  • Speed and current load of the server where those resources are being loaded
  • Location of the user in relation to the location of the servers that host the content
  • Speed of the internet connection of the user

Simple explanation to improve load speed: Reduce page weight, load fewer files, reduce reliance on 3rd party resources.

Load speed and Shopify

For Shopify sites there are 3 main factors that affect load speed:

  • Images
  • Theme code
  • Apps

Images are heavy and should be compressed when serving over the web. Here’s a guide to compress images on Shopify.

Lazy loading is a technique to only load images as the user scrolls down your page. This is a key optimization technique to prevent those heavy images all loading during page load. Here’s a guide to Lazy Loading on Shoipfy.

You also want to make sure you’re loading appropriately sized images for the device the user is viewing. For example, if you upload a 4000px wide image but the user accessing your device is on a cell phone that is 420px wide, you’re loading a ton of extra file weight for no reason. To control the size of images per device, utilize the html srcset attribute.

Theme Code is what you have access to in your theme editor.

There are various optimization techniques you can employ to your theme, for example using preloading tactics, lazy loading images and videos, deferring videos to load only when the user clicks play, minifying CSS and JavaScript, conditionally loading apps and scripts only on the pages they’re needed (instead of on every page).

To check your Shopify site for common theme and image optimization issues, run it through the Shopify Analyzer. That’s a tool we developed and maintain to help Shopify stores quickly identify and fix optimization issues.

There usually isn’t much of a load speed difference between 2 different themes unless your theme is bloated with excess wasted code or old app code that is no longer in play, so my advice is change themes when you’re ready for a new design, otherwise I would optimize your current themes and apps first (unless you have a solid budget and want to have a custom theme built from scratch).

If you’re looking for a new theme and would like our recommendations, see Recommended Shopify Themes and Developers for a Fast Site That Converts.

One thing that most Shopify themes do not do well is separate stylesheets and scripts to be loaded only on the templates they’re needed. This is why you see the Reduce unused JavaScript / CSS warning in Google PSI on most Shopify sites.

Most themes load 1 big CSS file and 1 big JS file for the design and functionality. In the past it was good practice to load 1 big file but with modern browsers that’s not necessary and may be slower (reference: Combining JS / CSS Can Make Your Site Load Slower).

Our recommendation to theme developers: Create a global CSS and JS file for common styles and functionality. Then create a CSS and JS file for each core template (Home, Product, Collection, Article, etc) and only load that file when the user is on that page template.

Apps are 3rd party plugins that run code on your store front.

Apps typically don’t contribute much to perceived load speed, because if they’re coded well they will load after the site content has loaded first (assuming the app isn’t necessary to render above the fold content), but you’ll often get dinged points in general analysis tools for using them.

To see a case study on how apps affect load speed and your Google PSI / Shopify speed score, check Shopify Performance Case Study – How Apps Affect Load Speed.

We don’t recommend removing apps just to improve a score with any tool. Ecommerce sites rely on engaging store facing features to get more sales. In the case of Ecommerce sites, creating the best customer experience is more important than getting the highest score on a performance tool.

Tools for measuring Shopify website performance

We primarily use 2 tools when measuring and optimizing Shopify sites: WebPageTest.org to measure load speed, page weight, and number of server requests, and the Shopify Analyzer to identify optimization issues that can and should be fixed.

Here’s a list of common tools and their pros and cons.

Google PageSpeed Insights / Google Lighthouse

Summary: Google PageSpeed Insights (aka Google PSI) uses the Lighthouse engine for performance analysis. This is a popular tool because it’s Google. This is a good analysis tool for general websites or apps to help you identify optimization ideas, but keep in mind that most engaging ecommerce sites score low according to their metrics (including Amazon).

Link: developers.google.com/speed/pagespeed/insights

Pros

  • Lots of data points to analyze
  • Detailed documentation about the optimization warnings + how to fix them

Cons

  • Clearing some warnings results in a poorer user experience and visibly slower load time
  • The scoring system is inconsistent and score is not correlative to actual load speed (Making a site faster can actually lower the score)
  • It’s not geared well for ecommerce sites, which can lead store owners to make bad decisions like removing functionality just to increase their score
  • Lab data and estimated savings are not accurate, can be misleading

How to use it

For web apps and websites where you have full control of the code and resources loaded, this tool is great to get your code super dialed in. For platform sites like Shopify, it’s not a good measure of site health but you can use it to identify bottlenecks and slow loading resources spawning from apps, this is especially useful to identify resources loading that you do not use anymore (old app code).

Additional resources

Shopify Speed Score

Summary: This tool shows up in your Shopify themes section. It uses the same engine as Google PSI so the same information above applies.

Link: help.shopify.com/en/manual/online-store/store-speed/speed-report

Pros

  • Tracks metrics over time
  • Shows comparison to other Shopify sites
  • Easily accessible inside your Shopify dashboard

Cons

  • Uses same engine / scoring system as Google PSI that punishes engaging ecommerce features
  • Causes frustration with Shopify store owners because they think they need to get a 100 (which is impossible)
  • Lacking a disclaimer that score is not equal to speed, and that you should not remove apps to score higher

How to use it

In it’s current state this tool just pulls in data from Google PSI so we don’t have a good recommendation yet, but we think the idea of showing performance metrics and tracking over time is good and this has potential.

Additional resources

Shopify Analyzer

Summary: This tool shows the key optimization issues that contribute to slower load speed + recommendations how to fix them. The scoring system is geared specifically towards Shopify sites.

Link: analyze.speedboostr.com

Pros

  • Shows actionable optimization issues that can be solved without sacrificing functionality
  • Geared specifically for Shopify sites, data backed by thousands of Shopify sites our team has analyzed / optimized

Cons

  • Does not track load speed
  • Does not track results over time

How to use it

We recommend this as the first tool in your optimization quest because solving the warnings will lower requests and page weight, leading to an actual faster site. Once you have optimized your theme with this tool, you can dive into more advanced optimization (for example conditionally loading apps, preloading resources)

Additional resources

WebPageTest

Summary: this is the best tool we’ve encountered for measuring load speed. We use it for benchmarking (before / after optimization) and comparing page weight, loaded resources, and load speed.

Link: webpagetest.org

Pros

  • Great tool for measuring actual load speed and the differences from making changes to your site
  • Shows a waterfall list of each server request + details of the request
  • Good indicator of load speed on mobile devices

Cons

  • Grading system could be better (we love the stats reporting but don’t find much use for the graded score cards)

How to use it

Use WebPageTest to measure your site’s performance before and after doing optimization work or installing new apps to see how your load speed is affected. Also great to go through the waterfall view to identify anomalies + understand how each server request affects your site.

Additional resources

Pingdom

Summary: Pingdom gives a nice overview of how different resources affect your site speed.

Link: tools.pingdom.com

Pros

  • Easy to read breakdown of page content by type, domain, and size
  • Nice graphics and user friendly waterfall view
  • Good estimate of load speed for desktop users on a fast wifi connection

Cons

  • Load speed is not consistent from run to run (not good for doing benchmarks)
  • Optimization warnings don’t provide actionable recommendations

How to use it

Pingdom is a nice tool to use to see the big picture of what apps and resources contribute to your page weight and number of requests. It also has a great waterfall view to analyze how each resource affects your page speed.

Tips and disclaimers for optimizing Shopify sites

Whether you’re doing an optimization in-house, working with us, or working with another Shopify optimization agency, it’s good to know these data-backed facts before starting an optimization project.

Google PSI / Google Lighthouse

We don’t use this tool in Shopify optimization projects but understand that it is well-known and that people want to score well in it, but there are some key points to beware of:

  • This is a general tool, not geared specifically to ecommerce sites where sales based metrics (conversion rate, revenue) are the key performance indicators and engaging store front features are commonly used
  • The score can change from run to run in the same day, without any changes to your website
  • Clearing warnings does not always raise the score
  • Fixing some warnings can cause a negative affect (slower perceived or actual load time, degraded user experience, decrease in conversion rate)
  • Google PSI score is not equal to speed
  • Not all warnings are able to be fixed on a Shopify site
  • Most ecommerce sites score low with this tool (even Amazon)
  • See the additional resources under Google PSI in the Tools section above for case studies to confirm these points

Shopify Speed Score

  • Shopify imports results from Google PSI / Google Lighthouse, a general performance analysis tool not geared well for ecommerce sites
  • Making your website faster may or may not improve your Shopify speed score, because Google PSI score is unpredictable and not equal to actual load speed
  • After tracking and analyzing the data we’ve found a good balance between speed and functionality for Shopify sites with engaging features is a score between 20 and 35
  • Do not panic and think you’re doing something wrong if you’re not “getting an A”. It’s rare to get a high score with this tool, especially if you use 3rd party apps

Our advice for Shopify performance optimization

We focus on doing what’s best for ecommerce stores, so we will not tell you to try and have the fastest site on the web, or recommend services that increase scores in Google PSI but do not improve actual load speed. Instead, we advise optimizing your site as much as you can without sacrificing functionality.

In our opinion (after optimizing over 1500 Shopify sites, doing various case studies, and having numerous internal discussions), the 3 best tools for optimizing Shopify sites are:

1. WebPageTest.org to measure actual speed, page weight, and requests before and after making changes to your site.

2. Shopify Analyzer for a quick look at the key optimization points and a scoring system that is geared towards Shopify sites.

3. A developer to look at your code to make sure you don’t have any old app code or wasted scripts loading, or any extreme cases where there are hundreds or thousands of extra resources loading (like in this case study).

If you want to optimize in-house, feel free to use our free guide to optimize your Shopify site: How to Optimize a Shopify Site: Complete Guide to Faster Load Speed.

If you would like a free analysis of your Shopify site contact us at speedboostr.com/contact.

Final piece of advice from our team: Focus on improving actual load speed and providing the best possible experience for your customers.