Understanding Core Web Vitals

Learn about these user-centric performance metrics from Google

What are Core Web Vitals

Web Vitals are metrics that measure performance aspects of websites pages that affect user experience.

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Core Web Vitals are a subset of Web Vitals, defined as follows:

Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.

Which is to say, they are a way of measuring aspects of performance that actually matter to users.

The concept of website performance is both a simple yet very complex topic, but the proper focus is always actual people, and the Core Web Vitals initiative aligns with that.

Google has said that the Core Web Vitals will evolve over time.

The current metrics focus on three aspects of the user experience — loading, interactivity, and visual stability.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

Measuring Core Web Vitals

The most important thing to understand about measuring website performance, and specifically Core Web Vitals, is the difference between field data and lab data, and what each should be used for.

A common mistake is to use a synthetic testing tool to measure Core Web Vitals scores, rather than tracking the metrics across real users. This both focuses on a completely fabricated test scenario, and ignores the variability that is so integral to real-world website performance.

The Web Vitals page doesn't do the best job of emphasizing this, but it does have this point buried farther down the page:

While all of the Core Web Vitals are, first and foremost, field metrics, many of them are also measurable in the lab.

Proper measurement of Core Web Vitals means collecting and viewing field data (metrics) from actual site visitors.

See our page about measuring website performance for more details on this subject.

Green, Orange, and Red

In the graphic above, thresholds are defined and color coded as follows:

Green - Good
Orange - Needs Improvement
Red - Poor

Many tools will use these colors. The main two ways they are typically displayed are:

Single Number / Color - Represents where the 75th percentile of all considered page loads falls in terms of the thresholds
Segmented Bar Chart / Histogram - Shows the distribution of the metric values across all considered page loads

The concept of a percentile is key. The 75th percentile means that 75%, or 3/4 all measurements for the metric were as fast or faster than the value.

By choosing to focus on the 75th percentile, Google is essentially saying that these metrics should be good for most visitors, but not necessarily all.

Trying to ensure ensure excellent performance for ALL page loads is not the point, and doing do would ignore the complexities and challenges around the variability inherent in website performance.

Google & Core Web Vitals

If you're interested in Core Web Vitals with respect to Google, you'll first want to read our page about Google and Website Performance.

Google has created a FAQ titled Core Web Vitals & Page Experience FAQs, that goes into detail about this.

The most importantant, and the first point, is that Core Web Vitals data comes from actual site visitors:

The data comes from the Chrome User Experience Report, which is based on actual user visits and interactions with web pages (also known as field data).

While Google may have defined different thresholds for each of these metrics, and assigned colors and labels to each of them, our advice is this:

Don't think that you need to have exactly 75% of your page views be "green". Instead, just remember that more green, and less orange and red, is generally better. Focus on improving performance for your visitors, rather than obsessing over artificial thresholds. The metrics, thresholds, and percentiles are just a guide, they should not be a goal in themselves.

What affects Core Web Vitals

LCP

FID

CLS

Improving Core Web Vitals

can be difficult

optimization steps

most important check field data

LCP

FID

CLS