What are Core Web Vitals? – A Guide

What are Core Web Vitals? – A Guide

Core Web Vitals. You’ve probably heard about them by now. Released as part of Google’s Page Experience update, which was originally scheduled for roll out in May 2021, postponed to mid-June 2021 and finally completed in August 2021, there has understandably been a number of questions being asked about it since.

 If you’re still not sure – we’re here to help answer any questions you have about these somewhat daunting metrics.

In this guide to Core Web Vitals, we cover:

What are Core Web Vitals?

Core Web Vitals are a group of metrics that Google uses to measure the different aspects of the user experience; perceived page load speed, responsiveness and visual stability to assess if the user is receiving a positive user experience from the technical elements of a webpage.

Please note: assessments are performed at a page-level, not a domain-level.

What are the Core Web Vitals metrics?

What are Core Web Vitals? – A Guide

Since Google’s initiative launched, Core Web Vitals have been made up of the following three metrics:

  • Largest Contentful Paint (LCP) measures the time it takes for the largest content element visible within the viewport on a page to render from when the page first began to load.
  • First Input Delay (FID) measures the time between a user taking an action (input latency) on a site (e.g. clicking a button) and the browser being able to begin processing event handlers in response to that interaction.
  • Cumulative Layout Shift (CLS) is a metric that essentially measures how much elements shift about on a web page during loading. 

In May 2023, however, Google officially introduced us to a new and exciting Core Web Vitals metric: Interaction to Next Paint (INP).

Interaction to Next Paint (INP): What You Need to Know

Set to replace First Input Delay (FID) in March 2024, INP was introduced to address FID’s known limitations. After testing the new metric for a year to see how they could improve on the metric that measures responsiveness, according to Google, the following will be considered with its arrival:

  • Responsiveness of all user inputs, not just the first input
  • Capturing each event’s full duration, and not just delay
  • Grouping events together as part of the same logical user interaction, defining that interaction’s latency
  • Creating an aggregate score for all interactions on page through its lifecycle

While we are expecting this metric to officially come into play next year, allowing for Google to address any feedback in a testing period, you can already access INP in Google Search Console. Once this has been officially switched over, Search Console will cease showing FID.

How do I pass the Core Web Vitals assessment?

What are Core Web Vitals? – A Guide

To improve your Core Web Vitals on desktop or mobile devices and ‘pass’ Google’s assessment of your page, your website needs to be below the set pass rate thresholds for each of the three metrics. Sadly if you are above the defined thresholds for one or more of the core web vital metrics, your website does not pass the Core Web Vitals assessment.

Currently, the pass rate thresholds are:

  • Largest Contentful Paint –  ≤ 2.5 seconds
  • First Input Delay – ≤ 100 milliseconds
  • Cumulative Layout Shift – ≤ 0.1

When Interaction to Next Paint is officially introduced in March 2024, the pass rate threshold for this metric will be:

  • Interaction to Next Paint – <=200ms

How do I check my Core Web Vitals?

So, you know you need to improve your Core Web Vitals to be in with a fighting chance. But how exactly do you begin to check them? The good news is, there are several methods available to check your website’s Core Web Vitals status:

  1. Search Console – Reviews the whole site as part of its crawls on your site. This report can be found within Experience > Core Web Vitals.
  2. PageSpeed Insight – Per page analysis. By entering your website URL, you get aggregated Core Web Vitals data from the last 28 days which is used to assess if the page passes or fails. Reports are split into mobile and desktop and require a large enough data set to generate results for each device type.
  3. Lighthouse – can be accessed via:
    a) the web.dev measure tool within the performance aspect of the report. Unlike PageSpeed Insight tool, this tool incorporates FID into Time to Interact metric.
    b) Chrome Dev Tools
  4. CrUX Dashboard on Data Studio – Like PageSpeed Insights, this tool uses the Chrome User Experience report but within Data Studio to produce a dedicated dashboard analysing your chosen URL. Using the Community Connector feature, it enables marketers and website owners to gain access to raw CrUX data on BigQuery to visualise the Core Web Vitals performance of a specific domain.

How do I know if my site passes Core Web Vitals?

It’s simple! When checking your site in the methods above, Google will often stipulate if you have passed or failed the assessment.

PageSpeed Insights

In PageSpeed Insights, there is a snippet of text to state if the webpage tested has passed or failed the Core Web Vitals assessment.

What are Core Web Vitals? – A Guide

Google Search Console

Google Search Console reports on “Good” URLs (in green) to illustrate how many URLs within your website pass the Core Web Vitals assessment.

CrUX Dashboard

The CrUX dashboard provides insight into the pass rate of the individual Core Web Vitals metrics but does not provide an overview of the volume of pages that pass the Core Web Vitals assessment.

How does Core Web Vitals work with fluctuations of website performance?

Google uses a 75th percentile value of all page views to assess the overall performance of a page. This means as long as 75% of all page views to that page meet the good threshold, it will be considered as “good” for that metric. Google also states that it uses the 25th percentile value to assess poor performance. In other words, if 25% of pageviews have a “poor” performance attributed to them, the page will be classified as “poor”.

Within PageSpeed Insights, we can see that field data (historic data of a URL) uses 28-day aggregated data whereas a CrUX Dashboard uses data from the previous month. Whilst the timeframes do not necessarily align, this does suggest that Google is likely to use an aggregated score where the data set is available.

What’s the difference between field data and lab data in Core Web Vitals reports?

Field data is a collected data set based on how a particular URL has performed, whereas lab data is a snapshot in time. Lab data is based on a “simulated load of the page” from a single device and fixed network conditions to provide consistency across tests.

How does Core Web Vitals impact my website & why does it matter?

Since the Page Experience update rolled out in August 2021, Google started using Core Web Vitals metrics as part of its algorithms to evaluate a website’s ranking position against a specific organic search term.

It is important to remember in order to benefit from the Core Web Vitals, a web page must meet all three metrics. As this algorithm update was designed to reward those who pass the Core Web Vitals assessment, it does not necessarily mean you will lose or will have lost organic positions unless your competitors for the same keyword do meet the requirements. This ranking signal is included as part of many ranking factors to assign a ranking position to a page.

What does Core Web Vitals mean for SEO?

Core Web Vitals present another set of metrics for SEO-ers and web owners to be aware of and plan for within an SEO strategy. If a site experiences a decrease in positions, then theoretically these metrics could be a contributing factor. Closely monitoring these metrics to understand keyword movement in the Search Engine Results Pages (SERPs) should now be a regular task in the evolving remit of SEO and collaborations with developers.

Will Core Web Vitals impact all my regional sites?

In a word, yes, Core Web Vitals will impact all regional sites. This Google algorithm update was rolled out as a global update, and not in a phased approach (which typically start in the USA).

How do I monitor Core Web Vitals?

What are Core Web Vitals? – A Guide

How often you wish to monitor is up to you, but regular monitoring of Core Web Vitals can be carried out using the Core Web Vitals report in Google Search Console to provide a breakdown of URLs that are considered “good”, “needs improvement” or are “poor”. Combining this with the CrUX dashboard will provide a quick overview of which metrics your webpages are primarily failing on.

Why am I seeing “core web vitals not enough data for this device type”?

Similarly to when carrying out experiments or tests on your website, the sample size matters. If your data set is too small for a particular device, this error will be present in Google Search Console.

If you are wanting an indicator of Core Web Vitals only, i.e., it’s not going to feed into business decisions, you can use lab data (a simulated load of your page). We do not recommend using this if feeding into decisions as it does not provide a real-world user experience – only a simulated one based on set device and network parameters.   

Can you see Core Web Vitals in Google Analytics?

Not without some additional tracking. This data can be collected using Google Analytics event tracking. Simo Ahava has created a useful guide on how to extract core web vital metrics in GA4 with event tracking.

What do I do to resolve poor Core Web Vitals metrics?

What are Core Web Vitals? – A Guide

Resolving Core Web Vitals issues is often a case-by-case basis. However, as the assessment is page specific, page templates on your site could be impacted by the same element. Therefore, fixes can be applied by page type (depending on your CMS).

Using tools such as Google Search Console and PageSpeed Insights will enable you to identify patterns on pages. Prioritise fixes based on the volume of traffic visiting those pages and how crucial they are to the user journey on your website. 

Typical fixes to improve Core Web Vitals will include looking at caching, image formats and optimising the code on your website. As Core Web Vitals measures the technical elements of a webpage, to resolve the causes of these metrics it’s likely that you will need a developer to implement the fixes. Share your Core Web Vitals results (using tools such as Google Search Console, PageSpeed Insights, Lighthouse and CrUX) with your developer to resolve the elements causing your site to fail Core Web Vitals.

How do I resolve FID issues?

Due to the technical nature of FID, it’s likely that you will need to get a developer involved to resolve the First Input Delay fixes.

The typical cause of FID failures is Heavy JavaScript execution, common fixes can include: 

  • Breaking up long tasks
  • Optimise for interaction readiness
  • Use a web worker
  • Reduce JavaScript execution time.

Despite FID being phased out in March 2024, it’s important to be optimising as much as possible for page responsiveness to be ready for the switch to new CWV metric INP. Google’s documentation for Optimize First Input Delay provides further information on how to resolve these elements in the interim.

How do I resolve LCP issues?

Largest Contentful Paint refers to page speed, therefore it’s important to identify which element of your page load is delaying the times associated with your LCP score. This is typically:

  • Slow server response timings
  • Render-blocking JavaScript & CSS
  • Slow resource load times
  • Client-side rendering

These issues have been around as site speed and page speed issues for a while, and we can often see the correlation between page speed and user engagement within Google Analytics. Again, a developer will need to implement the fixes to your site.

Google’s documentation for Optimize Largest Contentful Paint provides further information on how to resolve these issues.

How do I resolve CLS issues?

Cumulative Layout Shift is an issue we have all experienced as web users. You click on something and the layout moves slightly causing you to click on a different web element. This issue is typically caused by:

  • Images without dimensions
  • Ads, embeds and iframes without dimensions
  • Dynamically injected content
  • Web fonts causing Flash of unstyled text (FOUT) or Flash of invisible text (FOIT)

These elements are typically a result of the design, so involving both your designers and developers to overcome these issues may be required.

Google’s documentation for Optimize Cumulative Layout Shift  provides further information on how to resolve these issues.

Have a question on Core Web Vitals that we haven’t covered?

We know Core Web Vitals can be overwhelming, so let us know if you have any looming questions and we can update our resource! Alternatively, if you require assistance optimising your website to satisfy Core Web Vitals, see how MRS Digital can help, from audits and assessments to development fixes and website redesigns. Get in touch.

Look who’s talking…

Estimated Read Time: 8 minutes

See more articles in…

,

Sharing is caring!

What’s Good, What’s Great and What’s New

  • What are Core Web Vitals? – A Guide

    Google Chrome’s Third-party Cookie Announcement – What It Means For You

    On 22nd July 2024, the Vice President of Google’s Privacy Sandbox, Anthony Chavez, announced that Google was not going to proceed with the depreciation of third-party cookies in Google Chrome. This came as a shock to most in the digital space, as Google has been working tirelessly towards this goal since first announcing the intention…

    Read more: Google Chrome’s Third-party Cookie Announcement – What It Means For You
  • Google SGE is Here

    It’s Official: Google’s SGE is Here 

    The Search Generative Experience has begun rolling out in the US search results. Read on to learn about Google’s announcement and what it means for you.

    Read more: It’s Official: Google’s SGE is Here 
  • AI Bots from Crawling

    To Block or Bot to Block… Should You Block AI Bots from Crawling Your Website?

    As a wise playwright once said, to block or bot to block, that is the question. If Shakespeare were alive today, would he have been proud that Google’s AI chatbot began life named after a term he is commonly referred to as? Sadly, we shall never know. However, what we do know is that AI…

    Read more: To Block or Bot to Block… Should You Block AI Bots from Crawling Your Website?
  • GA4 ready for the Ecommerce Golden Quarter

    How to get your GA4 ready for the Ecommerce Golden Quarter

    Prepare for the Golden Quarter in GA4. Learn to check measurement scope and integrity, configure custom reports, create audiences and configure custom alerts.

    Read more: How to get your GA4 ready for the Ecommerce Golden Quarter