Everything You Have to Know About Core Web Vitals

Karolina Szczur

Karolina Szczur

June 11, 2020 (Updated: June 9, 2021)

There are dozens of speed 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:

  • Lab testing (synthetic): Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT).
  • Field testing (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 (lab 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. Since Core Web Vitals’ announcement, we have also already seen numerous improvements to the metric calculation. Those changes resulted in an observable difference in measurements for some sites and applications. To keep track of Core Web Vitals definition improvements, check the Chrome Speed Changelog.

Core Web Vitals metric set for synthetic testing including recommended values.
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 speed 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 8 Performance Score calculation shows the importance of Core Web Vitals.
Lighthouse 8 Performance Score calculation shows the importance of Core Web Vitals.

Additionally, refreshed Lighthouse 8 scoring algorithm gives Core Web Vitals even more prominence. Their importance is not insignificant: LCP, TBT, and CLS make up 70% of the score.

Google uses mobile site speed to rank sites with their search engine, and starting May 2021, Core Web Vitals measurements will be used to determine which pages are promoted to Google’s Top Stories. There are also plans to roll out page experience ranking to desktop. The metrics are embedded not only as a ranking factor but also as a way of favouring sites with measurably better user experience. Now, your site speed is closely related to how you rank.

If you’re not tracking and improving Core Web Vitals, your ranking will be lower.

It’s going to be very hard to escape the repercussions of poor Core Web Vitals measurements (and low Performance Score). If we want to rank higher and have our content highlighted in Google search platforms, we must care about 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 speed 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 avoidance of losing ranking:

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 see Core Web Vitals the way Google sees them?

Unfortunately, it’s not easy to understand and mimic Google’s ranking algorithm. Core Web Vitals for ranking purposes are collected by the Google Chrome browser directly from its users. After the speed data is fully anonymised, it’s made available through the Chrome User Experience Report (CrUX).

CrUX doesn’t come without a handful of limitations:

  • sites without enough traffic are not included
  • the data is published monthly

This means that Google has not indexed your site in the report, so you won’t be able to see Core Web Vitals field data used for ranking. Additionally, the monthly publishing cadence makes it challenging to quickly react to potential speed regressions or observe wins as they happen. That’s why it’s critical to use continuous speed monitoring.

While Core Web Vitals contribute to ranking through measurements collected with CrUX, tracking those metrics in other lab and field tools is still beneficial. Maintaining fast measurements will translate to better experience and ranking.

How do I track Core Web Vitals?

Core Web Vitals are now available in most of free speed 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 speed).

Calibre Performance Budgets dashboard showcasing thresholds for Core Web Vitals.
Calibre Performance Budgets dashboard showcasing thresholds for Core Web Vitals.

Calibre exposes all Core Vitals metrics, which means you can visualise them on time-series charts, set budgets (pictured above), receive email speed reports and Slack alerts about all of them.

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 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.

Become a site speed expert

Join thousands of subscribers keeping up-to-date with web performance news and advice.

The best performance newsletter I’ve come across. Highly recommended.

Addy Osmani

Addy Osmani

Engineering Manager at Google Chrome