Web vitals — what they are, why they matter, and how to measure them
In today’s hyper-competitive and digital business environment, user experience matters more than ever. A poorly optimized, buggy, or slow website can have a negative impact on conversions and search result rankings.
Web vitals give crucial insight into the user experience of your website. Understanding what they measure — and how they’re measured — will help you identify areas of improvement to create a better experience for visitors.
These metrics matter for developers that need to know which aspects of a website to focus on and for UX designers who want metrics to improve the experience for users — but also for businesses looking to boost conversions.
Measuring the quality of the user experience is essential to ensuring a quality website and improving performance. But it’s not always clear what the metrics are or how to evaluate them. Perhaps you don’t know which parts of a website are important to the user experience, or you’re not sure how web vitals impact search engine rankings exactly. Identifying the key metrics and defining their function and benchmarks will help you decide on areas of focus and provide a target for your efforts.
In this article, we’ll explore the core web vitals you need to understand to create a great experience for your users. Specifically, you’ll learn:
What are web vitals?
Web vitals are standardized metrics that quantify the user experience of a website based on a set of factors Google considers important. Introduced in 2020, Google’s Core Web Vitals consist of three specific measurements related to page speed and user interaction:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Each Core Web Vital measures and evaluates a particular part of the user experience on a website — loading speed, responsiveness, and visual stability. Let’s take a closer look at them now.
1. Largest Contentful Paint (LCP)
A critical, user-oriented metric that assesses performance across the entire site, Largest Contentful Paint represents how quickly the main content of a web page becomes visible after it starts loading. Specifically, LCP measures the time it takes the page to render its largest piece of content, whether that’s a video, rich imagery, or text block.
A website with an LCP time below 2.5 seconds receives a “Good” rating. A time between 2.5 and 4 seconds is rated as “Needs Improvement,” while an LCP of more than 4 seconds is a “Bad” score.
2. First Input Delay (FID)
First Input Delay is a metric that calculates how long it takes for the browser to respond to the first client request. In other words, FID measures the time from when a user first interacts with a site to the time when the browser actually responds.
Measurable interactions could include clicking on a navigation link, tapping a button, choosing from menu options, entering text into a field, or something else. To provide a good user experience, pages should have an FID of 100 milliseconds or less.
3. Cumulative Layout Shift (CLS)
The third Core Web Vital is Cumulative Layout Shift, which evaluates the user experience based on the perceived visual stability of a page load. CLS measures the unexpected layout shifts — or how much content elements move around — as a page loads.
For example, a poor CLS score would result if a site visitor were reading a page and a banner loaded and the page suddenly jumped down. To achieve a good user experience rating, pages should have a CLS of 0.1 or less.
Other web vitals
There are many more meaningful web vitals outside of those three core ones. Here are just some of the other common web metrics to know and track:
- Time to First Byte (TTFB) indicates the responsiveness of the web server. It measures the duration from the user making an HTTP request to the first byte of the page being received by the client’s browser. A good TTFB speed is less than 200 milliseconds.
- First Contentful Paint (FCP) measures the time from when the page starts loading to any content appearing on screen. It’s an important metric as it provides the first feedback to the user that the page is actually loading. A good FCP score is 1.8 seconds or less.
- Time to Interactive (TTI) evaluates load responsiveness, measuring how long it takes for a page to become fully interactive. A satisfactory TTI score is 3.8 seconds or less, while sites that score 5 seconds or more should strive to improve their TTI.
- Total Blocking Time (TBT) quantifies a page’s load responsiveness to user input, measuring the time between FCP and TTI. A good TBT should be less than 300 milliseconds, but the lower the score, the better the user experience.
The importance of web vitals
Now that you’ve learned what web vitals are, it’s time to understand why they’re important. Broadly speaking, web vitals are important for delivering a better user experience that keeps visitors on your site and improves SEO, as they can help your site stay organized and get more recognition.
For example, neglecting your web vitals can result in a negative user experience, which reduces conversions as visitors bounce off of your page — and possibly onto a competitor site. Furthermore, Google factors these metrics into consideration as part of the page experience when calculating search engine rankings, and poor web vitals can push your site down on search engine results pages (SERP).
Measuring web vitals
There are a number of ways to measure your site’s web vitals effectively, which can vary based on your business needs, goals, and resources. Some options to consider include:
- Google Search Console’s Core Web Vitals report. Google’s report shows how your pages perform based on field data and helps you fix poor user experiences on your site. Using the three Core Web Vitals metrics as measured by actual user data, the report displays URL performance grouped by status (Poor, Need improvement, or Good), metric type (CLS, FID, LCP), and URL group (groups of similar web pages).
- Chrome User Experience Report. The Chrome User Experience Report provides metrics and produces data that reflect how real-world Chrome users experience popular destinations on the internet. The data collected by Chrome is available publicly through a number of tools and is used by Google Search to inform the page experience ranking factor.
- Web-vitals JavaScript library. Another method to measure each of the Core Web Vitals is to use the JavaScript library, which evaluates the metrics in a way that matches how they’re reported by the Google tools. This can be done by running a simple script on your web pages.
- Web Vitals Chrome extension. This extension measures the Core Web Vitals, providing instant feedback on loading, interactivity, and layout shift metrics. It’s consistent with how these metrics are measured by Chrome and reported to other Google tools.
While it’s possible to test these metrics in a controlled, lab-like environment, focus on measuring how actual visitors interact with your website to acquire data that can help you improve the true user experience.
Using web vitals effectively
Understanding how web vitals inform and impact your site’s user experience will help you create a better experience for visitors and ensure your content gets the attention it deserves. You’ve learned about web vitals and why they’re important. If you want to take the next step, load up your own site and experience it from the view of a user. That way, you can identify any obvious areas of improvement.
But even a fast, responsive, and visually stable website doesn’t do you much good without great content and personalization that meet the modern customer’s high expectations. Adobe Experience Manager Assets automates content and supports a wide variety of file types, giving you everything you need to optimize your site and create a seamless experience for your users.
Watch a demo video to find out how Experience Manager Assets can help you optimize your website’s content.