[P] Understanding Shopify/Google PageSpeed score

Performance is a complex yet important topic and is the source of merchants' worry and confusion. This guide will attempt to go through shared concerns and give actionable advice you can give to improve your store's performance.

Measuring your store performance

There are a lot of tools to measure your store's performance, the most popular ones being PageSpeed / Lighthouse.

Shopify also shows a performance score calculated from Google Lighthouse's tool. We recommend you use the Shopify official tool to measure your store's performance, as this tool is adapted to e-commerce usage. We also encourage you to read Shopify's official documentation about performance.

Is performance important?

Yes. Performance is important. Performance is a criterion that search engines use to rank your website. Additionally, a slow website is a common reason for buyers to leave a website, which can reduce conversion rates.

However, there is a common misconception from merchants, who put too much importance on the performance score without taking some context.

A tool like PageSpeed/Lighthouse is a generic tool measuring performance. Such tools do not differentiate between a simple blog and an e-commerce store. However, the needs for those websites are vastly different. While a blog might only need a simple page with content, an e-commerce store usually rely on high-resolution images, videos, analytics, and apps.

As a consequence, blindly considering a performance score is very misleading. If an app helps to increase your sales at the cost of a lower performance score, then this is an acceptable compromise.

How is the theme impacting performance?

All our themes are optimized for performance. We are following the industry's best practices, for instance, by minimizing the usage of JavaScript and CSS.

We are asking you to trust us that we are crafting the best possible code to minimize its performance impact. We have spent tens of hours just optimizing our themes. We are confident that there is little to no improvement that can be achieved at the theme level.

If you are facing slow performance, this comes from different things. You will find many actionable advice to improve your performance by clicking here.

But the free theme is faster!

Yes, it might be possible that Dawn, despite all our efforts to optimize our themes, can achieve slightly better performance than Prestige or our other themes.

However, it is essential to compare apples to apples. Our themes have much more sections and advanced features than free themes. Complex features that our themes offers, such as videos in the slideshow, product variations, or image sets, come at a cost, performance-wise. As for apps, if the usage of those features helps you to sell more, then this should be considered an acceptable trade-off.

What is a good performance score?

Every merchant aims for a 100-performance score. However, we want to be clear: achieving a score higher than 90 is unrealistic for an e-commerce store. Apps, analytics, and third-party systems will impact your store performance too much to achieve that kind of performance.

As a rule of thumb, here are the score ranges you can aim for:

• Score superior to 70: your store is already faster than 99% of the websites in the wild. You don't have anything to do, and increasing the score further will require significant efforts that won't be worthwhile.
• Score between 45-70: your store is fast enough not to be an issue. However, you can improve your score by removing apps or following our performance best practices.
• Score between 25-45: your store is fast enough not to be a major issue, but customers on slow network might experience suboptimal performance.
• Score below 25: your store is facing a performance issue. It may be impacting both your SEO and your customer's experience.

Performance app/developers who promise a 90+ score

You may have found so-called "performance apps", or developers on platforms such as Fiverr promising you a score superior to 90+ for a small fee.

We highly discourage those approaches.

We have seen countless merchants contacting our support with issues such as apps suddenly not working and analytics not being reported correctly... Most of the time, the root cause of those problems was all developers "optimizing" the performance scores.

To achieve such high scores, those developers are tricking search engines by disabling essential features of your store or delaying some code. All of those approaches can have disastrous effects on your store.

Understanding and optimizing Core Web Vitals

Core Web Vitals are metrics developed by Google that directly impact the performance score. Understanding core vitals metrics and how to optimize them is crucial.

CLS

CLS stands for Content-Layout Shift and is one of the most critical metrics. High CLS happens when many elements in your page move after the page has loaded. If the user clicks on a link in your page and the page content suddenly moves, this can cause frustration.

Hopefully, all our themes are engineered to remove any CLS, so you usually have nothing to do to optimize CLS. However, CLS might be impacted by elements outside the control of the theme, such as:

• Apps that dynamically inject content on the page.
• <iframe> being injected in your HTML.
• Usage of custom web font: you can use a system font instead to minimize CLS even more.

LCP

LCP stands for Largest-Contentful Paint and is an essential performance metric. The LCP represents the most crucial visual element when the page is loading. For instance, on a home page, this is typically the first image of the slideshow, while on a product page, it will be the first product image.

Our themes make intelligent decisions to optimize faster (such as disabling lazy loading) on what might be the LCP image. To optimize LCP, you can try the following approach:

• On the home page, favor the slideshow section or a text-based section as the first section.
• Optimize your images, especially the collection image, product images, and slideshow images.

Optimizing LCP further is not always possible, though. A large, high-quality image will still require some time to load. As always, for performance, a trade-off between performance score and user experience is needed.

FID and INP

FID stands for First-Input Delay and will be replaced in March 2024 by the metric INP, which stands for Interaction to Next Paint.

Those metrics measure how responsive the user interface is. They are the most complex metrics to optimize as they encompass many different things.

Our themes are all optimized by default for FID and INP. Our themes use optimized JavaScript code that limits the initial work the browser needs to render your page as much as possible.

Here are various actions you can do to optimize FID and INP:

• Remove apps that you no longer use or are not essential: some apps often load a lot of JavaScript code. Heavy JavaScript code is the main reason for bad FID and INP.
• Limit the number of sections per page, and limit heavier sections like slideshow to 1 per page.

What can I do to improve my performance?

We have summarized many actionable advice you can follow to improve your advice. Click here to see them.