Mar 17, 2022

How to Increase & Measure Page Speed for Your Shopify Store

There are four major reasons to speed up your Shopify website: decrease bounce rate, boost conversion rate, and enhance Google ranking. And, well, it's simply more pleasant to use.

The probability of a user bouncing a site goes up by:
32% if the site load time is 1-3 seconds
90% if the site load time is 1-5 seconds
106% if the site load time is 1-6 seconds
123% if the site load time is 1-10 seconds

Site speed represents how your site is performing overall. It’s scored by services like Google PageSpeed Insights which look at various load times on your site in aggregate. Skilled ran case studies that revealed customer expectations of site performance:

shopify site speed

How do you measure page speed to optimize for performance? Through our research, we can conclude the only accurate measurement of real-world customer experience is in Google Analytics.

How to measure page speed

Go to Behavior -> Site Speed -> Overview.
Tap “Page” in the three views at the bottom.
Hit “view full report” at bottom right.
Tap the relative bar graph (center button) at top right of the data table, to outline any potentially underperforming pages.

page speed

Scores out of 100 don’t matter when considering your store’s performance. Time matters. Your pages load in a specific amount of time. You want to make sure that your store is loading, on average, below 3 seconds per page – ideally in less than one second per page.

Third parties don’t matter when considering your store’s performance. Your customers matter. What they experience matters. They may be on slow internet connections or use old browsers. You need to know what impact that has on performance.

With this view, you now have:

A clear sense of what your overall page load time looks like.
Any problematic pages that might need to have their performance improved. (Note especially the home page, product detail pages, and any blog posts.)

How to measure this over time

What you don’t have is a sense of how this changes over time. Next step:

Switch the date range to the past 30 days, then export everything as a CSV.
Do the same for every previous month that you want to analyze.
Compile everything together in a single spreadsheet.
For bonus points, average everything for page type (collection, product, blog post, etc).
Plot each page type over time, and determine whether its load time is increasing or decreasing.

Some things you can to do reduce page weight

Most page weight comes from three items in your website:

Images
JavaScript
Unconventional assets

Images

It used to be that compressing images through ImageOptim was always the answer. Then you would install an app like Crush.pics that would do it for you. Now Shopify natively compresses most images for you. The exceptions are:

Images loaded through third-party apps
Many images on blog posts
Some images uploaded through Files

I personally still run everything through ImageOptim ahead of time, because I’m paranoid, and it’s not that much of a hit to my workflow.

I also strongly recommend lazy-loading images, especially additional images on product detail pages’ galleries or collection pages. Most contemporary themes incorporate this functionality by default.

SVG is favorable for all interface elements. Run all SVG through svgo before posting. (svgo is included in ImageOptim).

JavaScript

JavaScript can increase page load times by making it more complex & buggy to interact with a page. This especially happens when you’re loading multiple snippets of the same JavaScript, and happens if you’re loading jQuery twice.

If you’re loading more than one copy of jQuery, you need to track down the incorrect second copy of jQuery and have your Shopify Developer remove it. That might involve uninstalling an app that was developed poorly. It is economically worth your doing so in almost all cases.

Improving eCommerce site performance takes time and effort

It’s important to get approval from your team to invest time and resources to optimize your site performance and page speed. The data and tips we’ve shared can help you build a case. Many of these optimizations are DIY. When it isn’t possible, you can enlist the help of a Shopify Plus Agency. They can guide you on how to speed up your Shopify website.

Want to learn more about Shopify? Read our blog post about How to Use Shopify Products & Optimize the Product Page to Increase Traffic.

Looking to upgrade your theme to 2.0 or redesign your Shopify website? Contact us to learn more. also recommend reading about out Shopify Plus services.