Everything You Have to Know About Core Web Vitals

Karolina Szczur

June 11, 2020

There are dozens of web performance metrics we can track. Each one of them has different characteristics and portrays various factors of user experience. Because of the abundance of metrics, sometimes it’s difficult to know which ones are critical to track, no matter the context.

For this exact reason, Google has launched the Web Vitals initiative, pointing to a subset of metrics that should always be tracked. These metrics are called Core Web Vitals. While introducing new naming nomenclature might not seem like much, having consistent, clear advice on what to track and why is extremely valuable. That fact, combined with using Core Web Vitals to establish site ranking and grade user experience, makes Vitals essential.

In this article, you will learn what Core Web Vitals are, why are they important and how to track them.

What are Core Web Vitals?

Core Web Vitals is a set of metrics portraying three aspects of user experience: loading, interactivity and visual stability. Everyone should track these metrics.

Currently, Core Web Vitals set consists of:

  • Synthetic testing: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT).
  • Real User Monitoring: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), First Input Delay (FID).

The reason why First Input Delay only exists in one set is that it cannot be measured in a lab setting—there is no user input to be quantified. In those cases, Total Blocking Time is the recommended replacement. If you improve TBT in lab results (synthetic testing), FID is likely to be improved in real user monitoring (field testing). Make sure to use the right set of metrics for the suitable method of testing. Bear in mind that in the future, the Core Web Vitals metric set might change.

Core Web Vitals metric set for synthetic testing including recommended values.

Largest Contentful Paint, Cumulative Layout Shift and Total Blocking Time belong to the new generation of performance metrics that allow for successfully quantifying user experience to a degree we were not able to measure before. Each one of those metrics corresponds to the three facets of user experience mentioned above:

Why should I be tracking Core Web Vitals?

There are numerous reasons why Core Web Vitals are crucial. It's a robust set of metrics that portray the most critical aspects of user experience (loading, interactivity, visual stability). Being able to quantify the quality of user experience is indispensable knowledge. Core Web Vitals give us the tools to do so. This is especially important as the sites and applications evolve into more and more interactive, JavaScript-reliant experiences.

Lighthouse 6 Performance Score calculation shows the importance of Core Web Vitals.

Additionally, with the new Lighthouse 6 scoring algorithm, all Core Web Vitals contribute to calculating the Performance Score. Their importance is not insignificant: LCP, TBT and CLS make up 55% of the score.

If you’re not tracking and improving your Core Web Vitals, your Performance Score will be lower. A worse Performance Score means lower search ranking and worse user experience for your customers.

Mobile site speed is already used to rank sites within the Google’s search engine, and in 2021, Core Web Vitals measurements will be used to determine which pages are promoted to Google’s Top Stories. Both the Performance Score and the metrics it relies on will be more and more embedded not only as a ranking factor but also a way of favouring sites with measurably better user experience.

It’s going to be very hard to escape the repercussions of a low Performance Score. If we want to be ranked higher and have our content highlighted in Google search platforms, we must care about performance. SEO work is becoming even more intertwined with speed.

Last but not least, having very unambiguous guidance on which metrics are essential to monitor will be indispensable knowledge to both teams embarking on their performance journey and those that are seasoned in speed monitoring. In the abundance of information and advice, precise requirements are beneficial.

What are the recommended values for Vitals metrics?

Most performance metrics have recommended ranges which constitute good user experience. Unfortunately, more often than not, these values are hard to find. Below, we share the desired Core Web Vitals readings for best user experience and highest Performance Score:

MetricGood MeasurementPoor Measurement
Largest Contentful Paint≤ 2.5s> 4s
Cumulative Layout Shift≤ 0.1> 0.25
Total Blocking Time≤ 300ms> 600ms
First Input Delay≤ 100ms> 300ms

To make sure Core Web Vitals stay within the range, we strongly recommend using performance budgets and monitoring before releasing to production. The earlier we spot changes and regressions, the faster we can prevent them from reaching potential and existing customers.

How do I track Core Web Vitals?

Core Web Vitals are now available in most of free web performance tooling such as Lighthouse, PageSpeed Insights, Chrome User Experience Report, Search Console's Core Web Vitals report, Chrome Developer Tools and the Web Vitals Extension. These tools might be useful for one-off testing, but not when compared to continuous data from other services (comparing monitoring reports from various sources is a common mistake in tracking performance).

Calibre exposes all Core Vitals Metrics, which means you can visualise them on time-series charts, set budgets, receive email performance reports and Slack alerts about all of them.

New Calibre Budgets dashboard showcasing thresholds for Core Web Vitals.

To be effective in improving speed and user experience, we need to observe trends over time, which is why continuous monitoring will be essential for success. Make sure to add Core Web Vitals to your speed monitoring today.

Karolina Szczur

Karolina is the Product Design Lead at Calibre. With years of design experience under her belt, she’s responsible for the comprehensive user experience spanning over product, visuals and content. Find her on Twitter or LinkedIn.

Get our web performance newsletter, every two weeks

We will send you the latest web performance articles, tools, case studies and more, so you can become a better performance advocate.