Once you have collected some data for your SEO Web Vitals report, it is time to review how your site is performing. To access the report, within the main navigation menu on the left-hand side of your Matomo instance click on the Acquisition tab and then click on the SEO Web Vitals menu item.
Within this section, the report data is presented in table format and summarises the core metrics which make up your SEO Web Vitals:
- Page Speed Score
- First Contentful Paint (FCP)
- Final Input Delay (FID)
- Last Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
One thing to consider when analysing the results from this report is that any segments you are using won’t work. It will always show the average of all users over the past 28-days for your site.
Understanding the SEO Web Vital Metrics
Page Speed Score
The Page Speed Score, also known as a Performance Score, provides a high-level overview of the performance of your website’s SEO Web Vitals. This score is calculated from the rest of the metrics within this section and provides a simple indication of whether your pages are considered fast, average or slow. If you only want to look at a single metric to understand your page performance, it should be this one.
Performance Score Grading:
- Good – Score of 90 or more.
- Needs Improvement – Score of 50 to 89.
- Poor – Score of 0 to 49.
First Contentful Paint (FCP) Metric
The First contentful paint (FCP) metric measures the time until the browser can render the first piece of content after a user has navigated to your page. As the FCP moment is the first time that any content is shown to your visitors, it is an important aspect for making a page feel fast or slow and helps reassure your visitors that the page is actually loading.
First Contentful Paint (FCP) Grading:
- Good – Any time up to 1.8 seconds.
- Needs Improvement – Any time between 1.8 and 3 seconds.
- Poor – Any time longer than 3 seconds.
First Input Delay (FID) Metric
The First input delay (FID) metric measures the time it takes between the first time a visitor interacts with your page and the time for the resulting action to occur within the browser. This includes things like clicking on links and form fields, but not simply scrolling through your page. This is important because certain actions can be blocked while your site is still loading which can make your site feel slow and unresponsive to your visitors.
First Input Delay (FID) Grading:
- Good – Any time under 100ms
- Needs Improvement – Any time between 100ms – 300ms
- Poor – Any time over 300ms
Largest Contentful Paint (LCP) Metric
The Largest contentful paint (LCP) metric is related to the loading performance of your page and is defined as the time at which the largest text or image is painted or rendered on the screen. The reason for tracking the largest element is because it is most likely to be the main focus of your page and the reason a visitor is on the page.
Largest Contentful Paint (LCP) Grading:
- Good – Any time up to 2.5 seconds.
- Needs Improvement – Any time between 2.5 and 4 seconds.
- Poor – Any time longer than 4 seconds.
Cumulative Layout Shift (CLS) Metric
The Cumulative layout shift (CLS) metric measures the visual stability of your page while it is loading. Essentially it tracks the movement of elements that are currently visible on your page while loading. To provide an example, have you ever loaded a page with a button on it and just as you were about to click it, something else loads above and pushes the button further down the page? This experience is frustrating for your website visitors and even more so if it means they end up clicking on the wrong thing.
The CLS metric is based on a formula that calculates the size of any objects that move against the distance they move upon refresh. You certainly don’t need to understand the details of the formula to make use of this metric. All you need to know is that the lower this score is, the better. If you are interested in learning more about the specific calculations, this article explains the CLS formula.
Cumulative Layout Shift (CLS) Grading:
- Good – Score of 0.1 or less.
- Needs Improvement – Score between 0.1 and 0.25.
- Poor – Score of 0.25 or more.
Understanding the Colour Grading of your SEO Web Vitals
Within the SEO Web Vitals report, each of the metrics described above is displayed in a different colour depending on how they are currently performing against target benchmarks. The same colour key is used for all of the metrics within the report:
- Green – The metric is considered Good.
- Orange – The metric is considered average and Needs Improvement.
- Red – The metric is considered Poor and it is highly recommended to improve it.
This simple colour system allows you to quickly assess your performance without needing to remember the specific recommended values for each.
Comparing SEO Web Vitals between Desktop and Mobile
Page performance often varies greatly depending on whether a desktop or mobile device is being used. Generally, you can expect slightly slower scores on mobile devices due to slower network connections and often lower-powered devices with mobile-specific CSS to render. To help you understand performance across both contexts, you will receive both a desktop and mobile score for each of the metrics as seen below.
Even though the metrics are likely to be different between devices, you should still be aiming for a Good result (represented by green text) for both desktop and mobile.
If you are only interested in optimising for one type of traffic, it is possible to filter the SEO Web Vitals report. To do this, click the table icon at the bottom left of the table to reveal the option to show Desktop Only, Mobile only, or All Strategies to review both.
The Two Types of Data Within the SEO Web Vitals Report
The SEO Web Vitals report section contains two types of data: Field Data and Lab Data.
What is Field Data?
Field Data is shown for each page at the top level of the report for a quick overview of your metrics. This data is most reflective of the reality of your web page experience as it is an average based on 28-days of actual visits by real users loading your website.
What is Lab Data?
Lab Data is the second data type and is shown when you click the plus icon to analyse a specific page in more detail. All data shown within the Audit Lab Data section is taken from a simulated visit generated by a Google bot visiting your website and measuring each of the metrics for that specific visit. Due to the fact this is based on a single lab visit from a single device and location, the metrics and scores may vary wildly from the experience of your actual visitors and even between individual tests from the same tool.
How To Use Each Type of Data
Generally speaking, Field Data is a more reliable account of how your website is performing for your visitors. You’ll want to monitor your field data to ensure that your visitors have a great experience when visiting your site. However, Lab Data also allows you to review your metrics on demand and can help you get quicker feedback while optimising your site.
Troubleshooting Missing Data
When analysing the specific rows with your SEO Web Vitals performance chart, you may notice that several of the metrics have no Field data and only show a dash. If you see a dash, it simply means there isn’t enough data for that metric yet. The most common reasons for this are because the page is brand new, it isn’t receiving enough traffic or is not publicly accessible for some reason.
If all of the metrics are missing for a page you should check that the page is publicly available by opening it in a fresh incognito or private browser window to ensure that it loads without relying on cached files or a login. If the page loads as expected then the report probably just needs more time to collect data.
You can still get some initial lab data by hovering your mouse over the row you are interested in and then clicking the eye icon .
This will load the page in an external PageSpeed Insights testing tool that tracks the same metrics.
Note: When you run a page speed test on the linked tool, the specific results are likely to differ each time as a new test is conducted every time. That is why the blended 28-day field data is a more reliable indicator of what your users are actually experiencing.
How to Analyse Your Page’s SEO Web Vitals Over Time
If you’d like to look at one of your tracked pages in more detail. You can hover your mouse over its row within the table to reveal two icons. Click on the line chart icon which will load a row evolution view graph where you can review all of the metrics over time.
When it first loads, the row evolution chart will display your Page Speed Score. However, you can drill down into any of the metrics for a page by clicking on the relevant sparkline summary below to refresh the row evolution chart with the newly selected metric. You can also hold the shift key on your keyboard while clicking on another metric if you’d like to compare more than one. This allows you to identify relationships between the metrics such as First Contentful Paint and Last Contentful Display and also compare the differences between the Desktop and Mobile version of any metric.
You may also notice there are several green icons below the row evolution chart. These allow you to export the data into another format, share the chart as an image , reveal annotations within the selected time period and select whether each point represents a day, week, month or year so you can see how the page scores have evolved over different periods of time.
Tracking The Performance of Specific Metrics Over Time
It is also possible to monitor how each of your specific SEO Web Vitals on a page are performing over time through a similar row evolution graph. This can be especially helpful if you’ve made changes to one of the pages and you want to check they are actually improving the situation.
The first step is to expand the page row within the SEO Web Vitals report by clicking on the plus icon to reveal the Audit Lab Data. From here you need to find the specific measurable that you’d like to focus on and hover your mouse on its row to reveal a line chart icon . Clicking that icon will load a row evolution graph that is specific to this measurable.
Within this view you can see the results for the chosen metric broken down by date so that you can review how it has changed over time. All of your measurables display a Score Percentage which summarises your performance and some measurables will also contain an Information score which is the actual tracked data value for the metric. You can see an example of this in the screenshot above where the number of seconds is shown for the largest contentful paint. Each of these metrics will be provided for both Desktop and Mobile as in the main SEO Web Vitals report.
Comparing SEO Web Vitals Metrics
In some cases, you may want to compare more than one of these metrics. To do this, you can hold down the shift key while clicking on the sparkline summary that you’d like to add to the chart. In the example below you can see that while there have been significant shifts in the score for mobile devices, the score for Desktops has remained fairly consistent and even moved in the opposite direction on a few occasions.
In this case, it is possible that the variation is simply down to the variance in resources available on the mobile device. To improve your score, you would aim to increase both the lower and upper band scores for this page so the entire range is at a more acceptable level.
Diagnosing SEO Web Vital Changes with Annotations
If you often make use of Matomo’s annotation feature, then you may also notice annotation icons along the base of the row evolution graph. Where these icons correlate with an increase or decrease in the score for your metric there is a good chance that the annotated changes have impacted your score. For example, if your first contentful paint score improves on a day where an annotation notes that an image optimisation plugin was installed on your site, it is likely that this was a beneficial change for your site.