We’re Blend Commerce

Contact our team using the options below

hello@blendcommerce.com
+44 (0) 1789 765 822
+1 (833) 456-4236

Courtyard Offices, 55 High St, Alcester B49 5AF

Search our shop

    We’re Blend Commerce

    Getting in Touch

    Contact our team using the options below

    hello@blendcommerce.com
    +44 (0) 1789 765 822
    +1 (833) 456-4236

    Courtyard Offices, 55 High St, Alcester B49 5AF

    What Is A Shopify Page Speed Score?

    graph of speed score

    Not long ago Shopify introduced the Speed score feature. Small label indicating score on the themes tab and full report within the analytics section. To generate those values Shopify uses a test environment with Google Lighthouse performance metrics. Within the reports Shopify refers merchants to PageSpeed Insights tool to seek for opportunities to improve the score. Presented scores are for users on their mobile devices.

    What Is The Difference Between Shopify’s Page Speed & Google’s PageSpeed Insights?

    The short answer is Google’s PageSpeed Insights uses a different environment than the Shopify Page Speed test. But what does that actually mean?

    Let's start with running tests for the same website at different times of the day. No changes on the site have been made, but the scores are very different. There could be multiple reasons for that such as current traffic on the store, running A/B tests or Shopify server variability. Usually lower traffic will mean that Shopify response will be slower and the score can be impacted by this.

    Speed score from the Shopify dashboard is the score at the specific time of the day within a special environment.

     

    What Does The Google PageSpeed Insights Tool Do?

    First part of the report is the overall score from Lighthouse Scoring Calculator. The most important metrics within this score are Total Blocking Time and Largest Contentful Paint, each is 25% of the overall score. Next part is Core Web Vitals, available also in the Google Search Console. I’d recommend installing the Web Vitals extension for Google Chrome to always keep a track of those metrics.

    graph showing Core Web Vitals Results

    First Contentful Paint is the time when the browser will render anything on the page, it could be text or image. This time is crucial as it indicates to the user that something is happening (other than white page). First Input Delay is the time when the user can start interacting with a page, for example click or scroll the page. This usually happens before first contentful paint. Largest Contentful Paint is probably the most important metric of all from a user point of view. It measures load time for the biggest resource on the page visible for the user, for example hero images, videos or iframes. These kinds of resources have the biggest impact on user experience on the page. It can happen that when the user opens multiple tabs the largest contentful paint can not load till the user focuses on the tab. Optimizing images can prevent that. Last measure from Core Web Vitals is Cumulative Layout Shift. This metric measures visual stability of the page.The worst thing that can happen in the store is that the user wants to add something to the cart and while clicking on the button moves slightly and the user missed.

    Gif showing Cumulative Layout Shift

    Source: Cumulative Layout Shift (CLS) - web.dev docs

    Speed Index chart

    After Web Core Vitals there is Lab data. It contains all the metrics that actually have impact on the PageSpeed Insights score. They can be fluctuant and I would recommend running multiple reports and taking average from them to determine more accurate data. First Contentful Paint has the same name as Core Web Vitals metric and is measured in the same way. The score in Lab data can be different from the top one as the previous summary contains data collected for the whole domain over 28 days, where lab data shows information about the current page. Speed Index is the time that takes content to be visible during loading time. This metric checks visual progression between frames from the video of page loading. Largest Contentful Paint is another metric from Core Web Vitals and in this case score in Lab data is for the current page. Time to Interactive is the time when users can fully use the page, that means: scroll, add to cart, interact with input fields or open pop ups. Total Blocking Time is the metric that sums up Time to Interactive and First Contentful Paint. It’s mainly affected by third party resources on the page, for example scripts rendered from the apps or just standard Shopify scripts. Reducing page size can have a great impact on this metric. Cumulative Layout Shift is another metric from Core Web Vitals and in this case score in Lab data is for the current page.

    Remove Javascript and CSS

    The last part of the report contains Opportunities and Diagnostics. Starting with opportunities that PageSpeed Insights usually suggest. These might sound hard to implement for non-coding people but usually they can be improved by removing unused apps from the store, optimizing images on the page or changing the theme for a faster one. If any of those doesn’t improve your speed score I would recommend hiring a Shopify expert. Our development team can help with improving your current theme and suggest how to maintain a high score in the future. Diagnostics on the majority of Shopify stores recommends reducing impact of third-party code, but when you look into this tab you can actually see that the majority of those resources are served either from the apps or Shopify itself. If the time displayed is more than 2000 ms that should be a strong indicator to way the worth of the apps installed on the store. Some of them can render a lot of resources therefore slowing the performance but not bringing enough value to justify it.

     

    When Is The Core Web Vitals Update?

    Within the PageSpeed Insights tool you will see First Input Delay (FID), Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) being flagged as elements of Google’s Core Web Vitals. In November 2020, Google advised that the next broad, impactful Algorithm update would surround User Experience and Core Vitals in 2021.

    On 19th April, Google announced a more detailed update which advised that the Algorithm Update would begin rolling out in Mid-June, and would continue to be integrated through to the end of August. The intention of the algorithm update is to highlight sites that are delivering good user experience through core web vitals and page experience factors. More information around the Core Web Vitals Algorithm Update can be found here.

    If you are concerned about the User Experience on your Shopify Plus site, get in touch and we can support you in devising a strategy that will turn more of your prospective customers into paying customers.

    About the author

    Angelika, Shopify Developer

    Angelika

    Shopify Developer

    Angelika is a skilled technical developer with a passion for making things really work for a Store. Alongside her love for problem solving and technical implementation, Angelika loves to study and continues to gain further academic qualifications in her field.

    Let's achieve better Shopify store performance. Together.

    We help clients achieve significant results. On average, clients who work with Blend on design & development projects for their Shopify store achieve these results after 3 months: