Get in touch with our team

13.08.2020

8 min read

Core Web Vitals: A guide to Google’s new page experience signals

This article was updated on: 30.01.2023

On May 28 2020, Google announced that it would be introducing a new ranking metric that considered real-world user experience. This new ‘page experience’ ranking metric includes existing ranking signals such as mobile-friendliness and HTTPS, but also includes the Core Web Vitals for the first time.

The new ranking metric will launch in 2021 and Google has said that they will give webmasters at least six months notice before introducing it to its algorithm. It will join the hundreds of other ranking signals that the search engine giant has added over the years, but we do not yet know the weight that it will hold compared to other signals.

Google did, however, state the following:

“Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn’t override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search.”

To summarise, the page experience signals are the following:

Summary of page experience signals 

Core Web Vitals (LCP, FID, CLS)

  • LCP – The measurement of when the largest content element becomes visible within the viewport.
  • FID – The measurement of a page’s responsiveness during load. It focuses on input events like clicks, taps and key presses.
  • CLS – The measurement of how much a page’s elements move unexpectedly upon loading.

HTTPS

Pages served over HTTPS are more secure.

Mobile-friendliness

A mobile-friendly site is easy to use on mobile, with users able to navigate it without needing to pinch or zoom to read content.

Safe-browsing

Pages are deemed to be safe for browsing if they don’t contain malware or deceptive content.

No intrusive interstitials

Intrusive interstitials include popups that cover the main content. Some interstitials are exempt, such as popups for cookie usage and age verification.

With the page experience signals outlined above, let’s jump into the most significant new signal: the Core Web Vitals.

What are the Core Web Vitals?

The Core Web Vitals are a set of quality signals designed by Google to deliver great user experience on the web. This will evolve over time, but for now the Core Web Vitals are limited to:

  • Largest Contentful Paint (LCP)
  • First Input Delay (FID)
  • Cumulative Layout Shift (CLS)

Each metric is scored across three areas:

  • Good 
  • Needs improvement
  • Poor

The scores that decide which category a page falls within is different for each metric.

Credit: Web.dev

How do I measure the Core Web Vitals?

The new Core Web Vitals can be monitored in Page Speed Insights and the updated CruX dashboard. Page Speed Insights can give you both lab and field data to measure your Core Web Vital scores. The CruX dashboard connects to Google Data Studio and can give you very actionable insights into your performance.

Credit: Web.dev

Search Console also allows you to monitor your Core Web Vital metrics. The previously-named ‘Speed’ report was replaced by the ‘Core Web Vitals’ report following Google’s announcement and it now shows Google’s current evaluation of your pages.

Let’s take a deeper look at each metric now:

Largest Contentful Paint (LCP)

LCP measures the time between a user clicking onto a page and the largest content element being loaded in. These elements can be:

  • <img>
  • <video>
  • <image>
  • Block level HTML elements (p, h1,h2, ol)

A good LCP score is less than 2.5 seconds, while a poor score is anything more than 4.0 seconds. While the largest content element varies between pages, it is most commonly an image element given their relatively large size. Google has provided some examples of how this is seen by a search engine crawler:

How do I measure LCP?

You can measure the LCP score of your pages using a mixture of field tools and lab tools:

Field Tools

Lab Tools

The image below provides an example of how Google judges the LCP score. As different page elements are loaded into the viewport, the largest element changes as the browser executes the next piece of content. Initially the ‘Visual Stories’ element is deemed to be the largest, followed by the H1 ‘Who has qualified for the September debates, so far’, and finally the image. 

Credit: Web.dev

First Input Delay (FID)

The first input delay is the time between the first input event, like clicking on a drop-down menu, and the website reacting to the event. A good FID score is less than a 100 milliseconds between the input event and the reaction, while a bad FID score is anything over 300 milliseconds. Below is a graph showing a typical case of a poor FID score.

Credit: Web.dev

How do I measure FID?

You can see your current FID score in the Search Console ‘Core Web Vitals’ report. You can also test the affected pages yourself by using Chrome DevTools.

Cumulative Layout Shift (CLS)

CLS measures the amount a page layout changes unexpectedly when a user lands on it. Shifting elements contribute to a negative user experience because content they might be reading or elements they might be clicking will move around the page, disrupting their user journey. The equation for CLS is:

Layout shift score = impact fraction * distance fraction

The impact fraction measures how much moving elements impact the viewport between the previous frame and the current frame. The total space the elements occupy between both frames is the impact fraction. 

This is shown in the image below where the element occupies 50% of the previous frame, before moving down 25% of the height of the viewport. This then means that the total impact fraction is 75%, or 0.75.

Credit: Web.dev

The distance fraction is the biggest distance an element has moved in the frame divided by the viewport’s largest dimension, which can be either width or height. 

In the example below, the element has moved 25% of the viewport’s height, its largest dimension, meaning it has a distance fraction score of 0.25. 

Credit: Web.dev

As mentioned above, the formula for CLS is: 

Layout shift score = impact fraction * distance fraction

Therefore the CLS score in this example would be:

Layout shift score = 0.75 * 0.25 = 0.1875

How do I measure CLS?

The best place to start is with the ‘Core Web Vitals’ report in Search Console. This will outline the scores for each of the affected pages.

The next step is to use one of the following to spot where the source of the CLS issue is in a Waterfall chart:

  • Chrome DevTools
  • GTmetrix
  • Pingdom

A great way to diagnose the source of the CLS issue is to visualise what is happening on the page. This tool by Defaced.dev allows you to create a GIF of your page’s CLS issue and highlight the moving elements.

Conclusion

Google’s new Page Experience ranking signal is the most significant algorithm announcement in recent years as it highlights how far Google’s algorithm has come, and how user experience is central to its goal of providing users with the most relevant results. 

We as SEOs should improve our websites in line with these latest signals as soon as possible to ensure they are regarded favourably when the new signal is officially introduced next year.

However, we also should not be too hasty to view this new metric as the silver bullet to our organic ranking woes. Google has stated that content is still king and prioritising this over other ranking signals will still be a sound strategy in 2021 and beyond.

Have any questions about the new page experience signal? Leave a comment below.

Next steps

Page experience is just one piece of the technical SEO puzzle. If you’d like to learn more about how Impression can help your business improve its online visibility and stand out from the competition, head over to our SEO agency page. Ready to talk? Get in touch today.