How to Properly Test the Speed of your Shopify Store

Google Lighthouse and PageSpeed Insights

Google provide two of the most popular testing tools for analysing the performance score of your Shopify website, Google Lighthouse and PageSpeed Insights.

 

By default, both of these tools provide insights and recommendations across the following key areas of all of the websites they analyse:

 

👉 Initial page load
👉 Time to interactive
👉 Image format and sizing
👉 Cumulative layout shift
👉 Redundant code analysis
👉 Total page requests

 

PageSpeed Insights is a browser-based tool that focuses specifically on performance scores at the individual page level, providing page-by-page recommendations that can be made in order to make meaningful improvements to the speed score of each page of your website.

 

Google Lighthouse is also a tool used for analysing the performance of webpages, but it provides a more comprehensive analysis and includes a wider range of metrics. It can be run as a Chrome browser extension and provides recommendations for improving performance, as well as insights into other aspects of the website's quality, such as accessibility, best practices, and SEO.

 

Alongside a focus on reducing page-load time, Google Lighthouse also provides recommendations for additional areas of improvement, including search engine optimisation (SEO) and image usage, both of which play a key role in determining the potential search engine ranking scores of your Shopify store.

 

One of the key differences between Google Lighthouse and PageSpeed Insights relates to the specific metrics that your website is tested against, alongside the level of detail listed in the recommendations that are provided to the user.

 

PageSpeed Insights is focused on analysing individual pages, Google Lighthouse instead provides an analysis of the entire website. This means that PageSpeed Insights is better suited for analysing specific pages and providing page-specific recommendations, while Google Lighthouse is better for getting a broad overview of the website and identifying overall trends and issues.

Shopify Theme Speed Score

While Shopify does include a version of speed testing built directly into their platform, their online store speed report simply uses Google Lighthouse to measure the speed of your store’s currently active theme.

 

However, Shopify also includes a couple of additional metrics that help their customers get a better understanding of these numbers in context. These include information on how well your speed score compares to other Shopify stores, and how your page speed score has evolved over time.

 

For a more general overview of best practices on keeping page speeds to a minimum, Shopify helpfully list a selection of criteria that may be negatively affecting a website’s speed score, including (but not limited to):

 

👉 Apps
👉 Themes
👉 Third-party libraries and services
👉 Analytic libraries
👉 Custom font libraries
👉 Complex or inefficient theme code
👉 The file size and amount of images and videos utilised

 

Putting these benchmarks into perspective.

While keeping your Shopify page speeds down to a minimum is important, it’s crucial to strike a balance between page speed and store functionality in order to ensure your customers are presented with a user experience that best suits their needs.

 

Different platforms have different limitations, and you can’t always completely perfect both areas on functionality-driven platforms such as Shopify.

 

To help you avoid obsessing over page speed and losing focus of the things that matter most for your online store, we’ve put together a helpful list of considerations to keep in mind when analysing your website’s page speed:

 

Take data from multiple sources

Scores often vary across sources, so it’s important to take information from a wide range of testing tools and draw your own list of actions from the recommendations provided as a whole.

 

Some elements are worth the decrease in page speed

Some elements that have the largest negative impact on page speed may be more important to your website than fast loading times. For example, the website of an animator or videographer may include a large amount of content-heavy video elements across the website, but removing these elements are more likely to hamper the success of your website if potential clients aren’t able to see a good selection of your projects and capabilities.

 

Some optimisations simply can’t be made

Quite often, some elements that may be negatively affecting the page speed of your website may fall outside of a developer’s control. For example, associated code libraries may be contributing quite heavily to the weight of your Shopify store, but as these are required in order for the platform to run, it isn’t always possible to make any amendments to these elements.

 

To help reassure users of the platform concerned about page speed, Shopify’s Help Centre have flagged the below areas as elements that will have a detrimental effect on your website’s page speed but fall outside of manual control:

 

👉 Your customer's device, network, and location
👉 Shopify’s own infrastructure
👉 Content delivery network (CDN)
👉 Your local browser cache
👉 Server-side page cache
👉 The assets inside the content_for_header Liquid object

 

Consider making more important improvements first

While page speed is an important metric, it is important to avoid focusing too heavily on these numbers. The development time and resources required to bring these numbers down can often be better spent improving different aspects of your website, including focusing on user experience or implementing additional functionality that may make it easier for your customers to purchase your products.