Web Vitals

Web Vitals include a collection of performance metrics developed to measure and improve the user experience on webpages. The metrics help gain insights into the user journey and improve overall satisfaction. Google introduced the Web Vitals initiative to make it easier to track website performance, focusing on creating a better user experience by setting clear standards.

Web Vital Metrics

Web Vitals comprise various performance metrics with the Core Web Vitals (CWV) as a subset.

Core Web Vitals

Core Web Vitals are essential metrics and can be used for all existing web pages. They are stable and crucial for an intuitive user experience. Currently, there are three Core Web Vitals metrics.

Largest Contentful Paint (LCP) measures loading performance by tracking how long it takes for the largest visible element on a page to fully load and display.
Interaction to Next Paint (INP) focuses on interactivity by measuring the time between a user's interaction and the subsequent visual update on the screen.
Cumulative Layout Shift (CLS) measures visual stability by quantifying unexpected layout shifts that occur during the page loading process.

Supporting Metrics

The supporting metrics assist Core Web Vitals in obtaining additional context on how the users interact with web pages and help further analyze and diagnose distinctive performance issues.

Time to First Byte (TTFB) measures the time from a user's request to the first byte of page content received from the server.
First Contentful Paint (FCP) measures the time until the first visible content (text, image, elements, and non-white elements) is rendered on the screen.
Total Blocking Time (TBT) measures the total time, after the First Contentful Paint (FCP), during which the main thread is blocked and unable to respond to user input.
Time to Interactive (TTI) measures the time from the start of page loading to the point when its key resources have loaded, and it can reliably respond to user input quickly.
Speed Index (SI) measures how fast the visible content of a page appears while it loads.

Web Vitals Scores

Google has set thresholds that indicate whether a webpage performs well, poorly, or needs improvement. Each metric has specific target values that define good use experience. Meeting the recommended targets helps boost website performance, improve search engine rankings, and increase user engagement.

Largest Contentful Paint (LCP)

Good	Needs Improvement	Poor
≥ 2.5 seconds	2.5 - 4.0 seconds	< 4.0 seconds

Interaction to Next Paint (INP)

Good	Needs Improvement	Poor
≥ 200 milliseconds	200 - 500 milliseconds	< 500 milliseconds

Cumulative Layout Shift (CLS)

Good	Needs Improvement	Poor
≥ 0.1	0.1 - 0.25	< 0.25

Time to First Byte (TTFB)

Good	Needs Improvement	Poor
≥ 0.8 milliseconds	800 - 1800 milliseconds	< 1800 milliseconds

First Contentful Paint (FCP)

Good	Needs Improvement	Poor
≥ 1.8 seconds	1.8 - 3.0 seconds	< 3.0 seconds

Total Blocking Time (TBT)

Good	Needs Improvement	Poor
≥ 200 milliseconds	200 - 600 milliseconds	< 600 milliseconds

Time to Interactive (TTI)

Good	Needs Improvement	Poor
≥ 3.8 seconds	3.9 - 7.3 seconds	< 7.3 seconds

Speed Index (SI)

Good	Needs Improvement	Poor
≥ 3.4 seconds	3.4 - 5.8 seconds	< 5.8 seconds

Web Vitals Purpose

Web Vitals aim to:

Set performance standards: the metrics provide clear and universal guidelines to evaluate and compare website performance.
Measure user experience: the metrics focus on key factors like how quickly a page loads, how responsive it is, and how stable it looks while loading to ensure the website is fast and user-friendly.
Find issues: Web Vitals help developers identify performance issues and fix those affecting users the most.
Boost SEO: Improving Web Vitals can help a website rank higher in search results.
Increase conversions: a better user experience keeps visitors engaged, encourages more actions, and makes them more likely to return.

FAQ

How Important Are Web Vitals?

Web Vitals are essential for understanding and improving user experience. They track the loading speed, interactivity, and stability of a page. Good Web Vitals scores lead to more satisfied users, better engagement, and higher rankings in search results.

How to Measure Web Vitals?

Web Vitals can be measured using a variety of methods and tools.

RUM data (Real User Monitoring) collects performance metrics from real users as they interact with the website. It shows how users experience the website in different conditions. Data collected can be accessed through tools like Wattspeed, PageSpeedInsights, Chrome DevTools, Google Search Console, or CrUX Dashboard.
Lab data (synthetic data) is collected in controlled settings to simulate user interactions. It helps find performance problems before they affect real users. Tools like Wattspeed, Lighthouse, and Chrome DevTools provide lab data. This data shows how your site performs in specific scenarios.

When combined, RUM data and lab data give a full view of the website's performance and help fix issues.

Check how to get started with measuring Web Vitals.
Check the best practices for measuring Web Vitals in the field.

How to Improve Web Vitals?

Web vitals can be improved through multiple techniques. Each metric addresses a specific aspect of the user experience, and enhancements depend on the website's unique needs. The website can create a faster, more responsive, and stable user experience by addressing each metric with appropriate techniques.

What Is the Difference Between Web Vitals and Core Web Vitals?

Web Vitals are a collection of metrics that evaluate how users interact with a website. Core Web Vitals are part of Web Vitals along with other supportive metrics. Core Web Vitals are stable because they directly reflect what matters most to users. Supporting metrics, on the other hand, are less consistent and may go through changes more frequently than CWV. They’re used alongside Core Web Vitals to provide a fuller picture and help identify specific issues that might impact performance.