Web Vitals are a set of metrics that Google views as essential to a website’s user experience (UX). Google started the Web Vitals initiative to provide website owners unified guidance for quality signals regarding UX.
Web Vitals can be grouped into two categories: Core Web Vitals and Other Web Vitals.
When reading articles about Web Vitals, these will often refer to the Core Web Vitals. As the name reveals, these are the metrics that, according to Google, matter the most.
And Google has really put their money where their mouth is. Starting May 2021, Core Web Vitals will become an official ranking factor in Google.
Core Web Vitals
The Core Web Vitals consists of three metrics:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
These are metrics that all site owners should measure. Google also captures these metrics in their Chrome User Experience Report (CrUX), powered by real-world Chrome users’ experience.
Tip: You can monitor your own and your competitor’s CrUX-data by using Alertdesk’s competitor monitoring solution.
The Core Web Vitals are not set in stone but will evolve over time. For now, they focus on three aspects:
- Loading – Largest Contentful Paint (LCP)
- Interactivity – First Input Delay (FID)
- Visual Stability – Cumulative Layout Shift (CLS)
Let’s look at what exactly they are and what the recommended “score” is for each.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is used for measuring perceived load speed. It shows the time it takes to load what is most likely the main content – the largest image or text block visible for the user.
The elements that are considered in LCP are:
- Images (
<img>,<image>,<svg>) * Videos (<video>) * Background images (elements loaded via the url() function) * Block level elements (<p>,<h1>, etc. – see full list here)
A good LCP is anything below 2.5 seconds.
You can read more about Largest Contentful Paint (LCP) here.
First Input Delay (FID)
First Input Delay (FID) is used for measuring load responsiveness. It shows the time it takes from a user interacting with a page (e.g., clicking a button) to the browser begin processing this event.
A good FID is anything below 100 milliseconds.
You can read more about First Input Delay (FID) here.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is used for measuring visual stability. It represents how often a user experiences unexpected layout shifts.
A layout shift is when an element changes its position. These individual layout shifts get a score (layout shift score = impact fraction * distance fraction) and accumulate to the CLS score.
A good CLS is anything below a 0.1 score.
You can read more about Cumulative Layout Shift (CLS) here.
Other Web Vitals
Even though Core Web Vitals are the most important of the Web Vitals (duh), it doesn’t mean the Other Web Vitals aren’t. They also play a role in the overall user experience.
Let’s take a look at them.
First Contentful Paint (FCP)
Like LCP, First Contentful Paint (FCP) is also used for measuring perceived load speed. It shows the time it takes for any part of the page’s content (text, images, background images, , and non-white -elements) to be shown on screen.
So the time it takes for the first content to be visible for the user. Having a fast FCP helps to reassure the user that something is happening.
A good FCP is anything below 2 seconds.
You can read more about First Contentful Paint (FCP) here.
Time To Interactive (TTI)
Like FID, Time To Interactive (TTI) is also used for measuring load responsiveness. It shows the time it takes for the page to be capable of responding to user input quickly and reliably.
A good TTI is anything below 3.8 seconds.
You can read more about Time To Interactive (TTI) here.
Total Blocking Time (TBT)
Total Blocking Time (TBT) is yet another metric for measuring load responsiveness. It measures the time between First Contentful Paint (FCP) and Time to Interactive (TTI).
A good TBT is anything below 300 ms.
You can read more about Total Blocking Time (TBT) here.
Speed Index
Speed Index measures how quickly content gets displayed during load. It gets measured by capturing a video of the page loading and afterward computing the visual progression between frames.
A good Speed Index is anything below 4.3 seconds.
You can read more about Speed Index here.
If you want to dive into the juicy details about Web Vitals and how to optimize them, we recommend you check out Google’s official documentation about Web Vitals: https://web.dev/learn-web-vitals/
🩺 Use Alertdesk to track your Web Vitals
Alertdesk helps you keep track of your page’s web vitals.
Each day we run an automated test from both a Mobile and a Desktop perspective, where we collect and store your metrics.
Dive into our powerful reports and find the low-hanging fruits that can skyrocket your performance.
Start tracking your web vitals today with Alertdesk. Try us free for 14 days.
Top comments (0)