What are the core web vitals?
The Core Web Vitals is a set of specific factors that search engine considers crucial in the overall user experience of a webpage. Web Vitals will help you measure the experience of your site and uncover areas to improve whether you're a business owner, marketer, or developer.
You do not have to be a performance expert to understand the quality of experience they are delivering to their users. The Web Vitals initiative aims to simplify the landscape and help sites focus on the metrics that matter most, the Web Core Vitals.
Each core web vital refers to a distinct aspect of the user experience of the page. The metrics made by Core Web Vitals will evolve over time. The current 2020 target focuses on three components of user experience -
Loading, Interactivity, and Visual Stability.
These ranking criteria will likely be comparable to others introduced by Google around the criteria as mobile-friendly, secured, and intrusive interstitials.
The core web vitals report shows three main categories under each user experience component we discussed above:
Loading - Largest Contentful Paint (LCP)
Interactivity - First Input Delay (FID)
Visual stability - Cumulative Layout Shift (CLS)
Now, let’s understand them one by one.
Largest Contentful Paint(LCP)
This measures the loading performance of your web page. This metric shows how quickly your main page content is rendered. Measuring how soon a web page's main content loads and becomes visible to users has always been a challenge for web developers. With this score, now you can consider the factors that help improve the website loading performance.
Good score:
To deliver a maximum user experience this value should occur within 2.5 seconds when the page first starts loading. To guarantee you're hitting this target for the majority of your consumers, a suitable criterion to measure is the 75th percentile of page loads, divided across mobile and desktop platforms.
How to interpret your LCP score :
| LCP time(seconds) | Performance and color-code |
|---|---|
| 0- 2.5 | Green(Fast) |
| 2.5 - 4.0 | Orange(Moderate) |
| 4 -more | Red(Slow) |
Elements to consider:
As currently specified in the LCP API, the types of elements considered for Largest Contentful Paint are:
<img>elements<image>elements inside an<svg>element<video>elements with a poster image (the poster image load time is used)- An element with a background image loaded via the
url()function (as opposed to a CSS gradient) - Block-level elements containing text nodes or other inline-level text elements children.
How to improve?
If LCP can be broken into four phases, getting to know which phase takes more time can help you optimise your LCP score.
| LCP phase | Description |
|---|---|
| Time to first byte (TTFB) | The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response. |
| Load delay | The delta between TTFB and when the browser starts loading the LCP resource. |
| Load time | The time it takes to load the LCP resource itself. |
| Render delay | Render delay |
First Input Delay(FID)
It’s the first impression that matters everywhere, even when the user first time interacts with the page. It can be in different forms like site design, visual appeal, speed, or responsiveness. This metric measures the interactivity of your web page. FID tells, how quickly the page responds to user input which means time to render the DOM content after the user navigates to your page.
Good score:
To provide a user good experience, FID value should occur within 100 milliseconds. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to interpret your FID score :
| FID time(milliseconds) | FID time(milliseconds) |
|---|---|
| 0- 100 | Green(Fast) |
| 100 - 300 | Orange(Moderate) |
| over 300 | Red(Slow) |
Elements to consider:
- Layout shift score -
The viewport size and the movement of unstable components in the viewport between two rendered frames are factors that the browser considers when calculating the layout shift score. The layout shift score is calculated by two measures of the movement that are - impact fraction and distance fraction.Layout shift score = Impact fraction * Distance fraction - Impact fraction -
This is the measure, of how unstable elements impact the viewport area between two frames. It is the fraction of the two viewports, as the union of the visible area of unstable elements of two frames - previous and current. - Distance fraction -
The distance fraction is calculated by dividing the longest distance any unstable element has moved in the frame (horizontally or vertically) by the viewport's largest dimension (width or height, whichever is greater).
Cumulative Layout Shifts(CLS)
This is the important metric that is user-centric and measures the visual stability of the page. CLS is a metric that measures the biggest burst of layout shift scores for each unexpected layout shift that occurs over the course of a page's existence.
If you are reading or browsing on a page and suddenly something happens that is any layout shift, will you continue on that page? No, very less probability, right? In the same way, if your web page has these kinds of sudden layout shifts then it shows the poor user experience of your page.
The Cumulative Layout Shift (CLS) measure helps you in addressing these kinds of issues by determining how frequently it occurs for end users.
Good score:
To provide a user good experience, CLS value should occur less than or equal to 0.1. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.
How to interpret your CLS score :
| CLS score | Performance and color-code |
|---|---|
| ≤0.1 | Green(Fast) |
| 0.1 - 0.25 | Orange(Moderate) |
| 0.25 -more | Red(Slow) |
Elements to consider:
Poor CLS is typically caused by the following:
- Dimensionless images
- Without-dimensions ads, embeds, and iframes
- iframes without dimensions, embeds, and other dynamically injected content
- Web fonts
Now, you know what matters to deliver a good user experience through your web page. So make sure you check the overall well-being of your site. Use the tools that will help you analyse core web vitals reports.
Need help to diagnose the well-being of your site or guide to improve? Connect with us.
Kumudini K is a content writer at Setoo.
