Understanding the Shopify Speed Score

Today's post is inspired by a question I got from a former client Nora (who is also a subscriber! You can check out her products here: https://www.hullwinkle.com/). Her Shopify Speed Score was surprisingly low on her site, and she wanted to know if she should be worried about it. Here's a quick overview of how the score is calculated, and the cases in which you should prioritize it vs. when it really doesn't make a big difference.

What is the Shopify Speed Score?

This is a metric provided by Shopify that tells you “how quickly your customers can shop”. It tracks how quickly your site loads for your actual users and assesses its performance. A high Speed Score means that your site loads relatively quickly, while a low Speed Score means your site loads relatively slowly. Having a fast site speed is a form of reducing friction on your site. Less friction means that users can access products and purchase them more quickly. If a site has a lot of friction, customers are likely to leave before they complete their purchase.

How is it Calculated?

The Shopify Speed Score uses Google Lighthouse Performance Metrics to create your score. There are six metrics that are used for Lighthouse (they have kind of crazy names):

• First Contentful Paint: How long it takes the first piece of content on your site to load
  ​

• Speed Index: How quickly content is visually displayed on your site during loading
  ​

• Largest Contentful Paint: How long it takes the largest image or text block to load
  ​

• Time to Interactive: How long it takes a page to be fully interactive (all elements are visually displayed and all functionality/buttons/links working)
  ​

• Total Blocking Time: How long a page is blocked from allowing a user to click or interact with it during loading
  ​

• Cumulative Layout Shift: The largest shift in layout (elements moving drastically) during the loading process

Site Speed is a Two Way Street

It’s important to remember that site speed is dependent on the site as well as the user that is accessing it. It can be affected by the content and code on a website, but it is also dependent on the device from which the user is accessing the page, the internet connection that a user has, etc. If your customers are likely to be accessing your store in areas with strong internet connection and on well-performing devices, then managing site speed is a lower priority. If your clientele does not have access to good internet or computers/phones, it is important to make your site as fast as possible.

How to Improve Site Speed

There are several ways that Shopify Store owners can improve site speed and performance:

• Reduce/Remove Apps: Apps will download code that can slow down your site. If you have apps on your store that you are not using, make sure to delete them and remove the code from your store. Sometimes deleting the app does not remove the code, so it is important to double-check that all code is removed.
  ​

• Use a Faster Theme: Some themes are optimized for speed, and others are optimized for aesthetics. Check with your theme provider about whether the theme you are using is considered one of their “faster” themes. If you have serious speed issues, consider switching to a theme that is optimized for performance. One example of a high-performance theme is Shopify’s Dawn.​
  ​

• Simplify Codebase: As you increase the number of custom code changes to your Shopify site, you are at risk of creating clunky and slow code. This is especially true when people who are not familiar with coding are making repeated changes to the code directly. Consider hiring a Shopify Expert to review your code and help streamline it to improve speed.​
  ​

• Reduce Size and Number of Images/Videos: Images and videos are great for displaying products, but they also cause your pages to load slowly. Consider using smaller images or fewer images to make sure your site loads faster. You can also “Lazy Load” images to only load images in the viewport - this will allow the page to load faster since it won’t have to load all images on opening.
  ​

• Use System Fonts & Fewer Fonts per Page: Custom fonts must be downloaded every time a user loads a page. If you are using custom fonts or multiple different fonts on a page, it will increase page load times.

Bennett