June 2nd 2020

Overview

Web Vitals is a Google initiative to provide a holistic and unified guidance for quality signals that are vital to delivering a better user experience. Over the last few years, Google brought out more tools to measure and report on performance, tools such as an updated Google Search Console, Lighthouse and Page Speed Insights. However, a site owner isn’t a developer, so some challenges arise when trying to understand all these performance tools and metrics. The Web Vitals initiative aims to simplify the landscape and help a site owner focus on those metrics which are really important – Core Web Vitals.

What are Core Web Vitals?

Core Web Vitals are the subset of Web Vitals that apply to any type of web page across all Google tools and should be used by any website owner. Each of the Core Web Vitals are representatives of the user experience and are measurable in the field by reflecting the real-world experience.

Currently, Google is focusing on three aspects of the user experience (note that the Core Web Vitals will evolve over time). These 3 aspects are:

Loading performance – Largest Contentful Paint (LCP) should occur within 2.5 seconds of when the page first starts loading for a good user experience

Interactivity performance – First Input Delay (FID) should occur within 100 milliseconds

Visual stability performance – Cumulative Layout Shift (CLS) should be maintained at 0.1 for a good user experience.

Core Web Vitals explained
(Source: Web.Dev)

Tools to measure Core Web Vitals

Now that we covered the guidelines for these metrics, let’s see where and how we can find & measure these metrics. Fortunately, all of Google’s popular tools for web developers now support the measurement of Core Web Vitals; these tools are Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, web.dev’s measure tool, Web Vitals Chrome extension and Chrome UX Report API (the newest tool).

Core Web Vitals Tools Comparison

So, Core Web Vitals can be measured using:

  • Search Console – In GSC, the old Speed Performance report has been replaced with the new Core Web Vitals report. The report identifies groups of pages that require any attention based on real-world data from the Chrome UX report.

(Note: some URLs can be omitted if a minimum amount of reporting data isn’t available)

  • PageSpeed Insights – Has been upgraded to use the newest version of Lighthouse (v6.0), which includes the Core Web Vitals metrics.
Core Web Vitals in PageSpeed Insights

(Note: Core Web Vitals are annotated with a blue ribbon as shown above)

  • Lighthouse – The new version, 6.0, brings these new metrics into the newly composed performance score along with additional audits. A third new metric – Total Blocking Time (TBT) – is considered to correlate with the Interactivity performance metric, First Input Delay (FID).
Core Web Vitals in Lighthouse Audit
  • Chrome DevTools – As with the Lighthouse tool, a new version of Chrome DevTools was rolled out to help site owners find and fix visual stability issues on any of their pages. Chrome DevTools also measures Total Blocking Time (TBT), which is useful when it comes to improving First Input Delay (FID).
Example of DevTools Console
  • Web Vitals Extension – Has been specifically created for the three Core Web Vitals launch and is quite useful if you want to measure your metrics in real-time.
Core Web Vitals Extension from Chrome Web Store