Explaining Google’s Core Web Vitals and how to leverage them

By Michele Lo Piccolo | 27 Jul 2020

After years of preaching about content quality and EAT, Google is finally taking aim at page speed performance and UX. In fact - as announced in early May - from 2021, page experience will become a ranking factor. This means that Google will take into account the usability and reactivity of a page when ranking it in SERPs.

To help webmasters prepare for the change, Google has launched the Web Vitals initiative in order to provide guidelines on how to properly improve user page experience. This is comprised of new features in its own tools, like Search Console, and new metrics to help improve UX for the areas that matter the most.

What are Core Web Vitals?

Core Web Vitals (CWV) are the key metrics that Google deems most important to improve page experience, namely:

  • Large Contentful Paint (LCP): this measures perceived load speed (page load performance), marking the moment in which the main content has fully loaded
  • First Input Delay (FID): this measures load responsiveness (interactivity), marking the moment in which the page becomes interactive
  • Cumulative Layout Shift (CLS): this measures visual stability, quantifying how often elements of the layout shift during page load

These metrics are an evolution of the ones already included in Google tools such as Lighthouse and Pagespeed Insights. They’ve been fine-tuned to give a better representation of what needs to be improved on-page.

What are the recommended values?

In its guidelines, Google gives the target values for the three CWV metrics:

  • LCP should occur in max 2.5 seconds
  • FID has to be less than 100 milliseconds for the best UX
  • CLS should be less than 0.1 to maintain a correct and usable visual stability

Since it can be very difficult to optimise these metrics, it’s very important to utilise the tools available in the correct way in order to find issues and address them.

How can I measure them?

The features used to measure CWV metrics are already included in all of Google's web tools, showing data in different ways and giving different insights. Usually, Google provides two kinds of data, lab (real-time) data and field (user average) data. The first type comes from the Chrome UX (CrUX) Report which is generated with anonymous data from real users, and the second type is analysed in real-time. Although, not all the tools present both data types.

Google Search Console (GSC)

Google has added a new tool in GSC called Core Web Vitals that is found under the Enhancements section. To use it, you need a verified GSC property for the site that you want to analyse. The tool shows data split between a desktop and mobile report, with each one highlighting performance for pages - labelling them as ‘poor’, ‘needs improvement’ or ‘good’. For each grade it’s then possible to visualise the issues that are affecting pages and the list of affected URLs. Search Console uses field data.

Pagespeed Insights

Metrics have been included in the wide range of checks within Lighthouse, including tips like the element taken into consideration for LCP. Pagespeed Insights (PSI) is available for free to analyse any web page. APIs are also available and can be used natively in tools like Screaming Frog Web Crawler.

Unlike the majority of other tools, PSI provides both lab and field data thanks to the integrated functionalities from Lighthouse.

Chrome User Experience Report

This tool requires some hand-on experience with BigQuery to be set up and used, so it’s less straightforward than PSI and GSC. As with GSC, this tool uses field data.

WebPageTest

Not actually a Google tool but vastly used by its employees, WebPageTest has been, and probably still is, the most accurate and reliable speed performance tool. New data has been added into its classic test results tab, under the “Web Vitals” header. This tool uses lab data only.

Core Web Vitals Chrome extension

Google has rolled out a new quick-check extension that is providing real-time values for the three CWV metrics. This is handy to quickly spot bad page values. It only features lab data.

Chrome DevTools

Essential for front-end devs, the Chrome DevTool is also vital for SEOs. This tool has a couple of features in the Performance panel to pay attention to. The Experience row includes information around Layout Shifts. Total Blocking Time could be a substitute metric for FID since it measures the time between First Contentful Paint (FCP) and Time to Interactive (TTI). Improving these metrics will also improve FID. The data type in this tool is lab.

What is the best optimisation approach?

While there isn’t really a best approach to these optimisations, there are some ways that are more effective than others when analysing issues and providing a clear list of recommendations.

When finding and measuring bad values it’s important to assess which pages are experiencing UX problems. Also, gathering both lab and field data can give us some hints as to how much values are changing from time to time, and therefore raising possible existing issues.

Search Console is the ideal tool for finding problematic pages within owned websites. And, by using tools like PSI and Lighthouse, it’s possible to find a good list of speed performance and UX issues to work on. It’s also a good idea to use Pagespeed Insights API in Screaming Frog to pull out both lab and field data from the whole site.