Everything You Have to Know About Core Web Vitals

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 we should always track. These metrics are called Core Web Vitals. While introducing new naming nomenclature might not seem like much, having consistent, straightforward advice on what to track and why is valuable. That fact, combined with using Core Web Vitals to establish site ranking and grade user experience, makes Vitals essential. Think of those metrics as a health check for the speed of your site.

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.

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:

• Loading: Largest Contentful Paint (LCP).
• Interactivity: First Input Delay (FID) and Total Blocking Time (TBT).
• Visual stability: Cumulative Layout Shift (CLS).

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.

Core Web Vitals influence Google Search ranking

Another aspect is ranking and content discoverability. Since August 2021, Core Web Vitals are a page experience ranking signal in Google Search. For now, the ranking change is limited to mobile results, but it’s coming to desktop starting February 2022.

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

While relevant and well-written content is still essential in search, Google will also evaluate your sites based on Core Web Vitals and might favour them if the recommended thresholds are met. Now, your site speed is related to how you rank. We’re already seeing proof that sites with good Core Web Vitals rank better—according to Sistrix showing a 3.7 percent increase in visibility!

Core Web Vitals impact key business metrics

There’s no denying that improving speed correlates with growth in key business metrics. Optimising Core Web Vitals can reduce bounce rates, increase conversions and engagement. If the mutual goal is business expansion, it might be easier to rally your entire team (or organisation) to invest in speed when the evidence is clear:

Slow sites hurt revenue, while fast ones boost conversions and retention. As pictured above, even one second improvement can make a huge difference!

Core Web Vitals make it easier to communicate about speed

Having clear guidance on which metrics are essential is indispensable knowledge to both teams starting their speed journey and those seasoned in speed monitoring. With a short set of critical metrics (versus dozens available), it’s easier to explain and consistently communicate them across different teams, roles and departments.

Not only we’re limiting the amount of deep-dive knowledge to communicate, but we’re also focusing everyone on the same web performance north star. Similarly to Performance Score, Core Web Vitals can serve as a more robust abstraction when talking about aspects of user experience.

Core Web Vitals make up the majority Lighthouse Performance Score

If Lighthouse Performance Score is a metric you’re tracking and using to communicate speed in your organisation, there also have been changes to show the prominence of Core Web Vitals.

The refreshed Lighthouse 8 scoring algorithm gives Core Web Vitals significant importance: LCP, TBT, and CLS make up 80% of the score.

What are the recommended values for Vitals metrics?

Most performance metrics have recommended ranges for a good user experience. Unfortunately, more often than not, these values are hard to find. Below, we share the Core Web Vitals ranges for optimal experience and mitigating the risk of losing positions in search ranking:

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 reporting doesn’t come without limitations:

• only shows reports for sites and pages that have enough traffic
• excludes browsers that aren’t Google Chrome (35% of browser market share)
• excludes the iOS operating system (27% of phone & 55% of tablet market share)
• the data is published monthly

While CrUX is a substantial dataset, it might not be a complete picture of your audience’s experiences based on those constraints. If Google has not indexed your site in the report, you won’t see Core Web Vitals field data used for ranking. The monthly publishing cadence also 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 alongside.

There are tools to visualise CrUX report data, but often not without effort and a complex setup. That’s why we built Core Web Vitals Checker—a tool to see if your sites and pages pass the Core Web Vitals assessment:

Free tool

Check if your site passes the Core Web Vitals assessment in one click.

Generate report

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 prioritises Core Web Vitals metrics, which means you will see them highlighted across the entire platform. You can visualise them on charts, set budgets, receive email speed reports and Slack alerts about all of them to know where you’re at.

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 page speed monitoring today!

Karolina Szczur

Karolina is a Co-founder and 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 Mastodon or LinkedIn.