You don’t need to be an expert in any area to understand Web Vitals. They are simple things like mobile-friendliness, browsing safety, HTTPS, interactivity, visual stability, loading time, etc.
Out of these Web Vitals, Google has identified three main measurements as Core Web Vitals common across all types of websites.
- Largest Contentful Paint (Loading Performance)
- First Input Delay (Interactivity)
- Cumulative Layout Shift (Visual Stability)
Let’s take a look at the Core Vitals in detail.
LCP – Largest Contentful Paint (Loading Performance)
LCP measures the loading speed of the web page from the point of view of a real user. It’s the time duration between the first point of page load and the point where the viewport’s largest content is rendered.
In other words, LCP measures the rendering time duration taken by the visible area on your web page.
Let’s compare the LCP of a medium article with and without images.
Article with the image took 3.57 seconds to lead, while the article without the image took only 2.32 seconds to load.
Google insists all developers and product owners measure those Core Web Vitals of their applications regularly and provided tools to assist the measurements.
FID – First Input Delay (Interactivity)
FID relates to the interactivity between user and web page. It measures the time duration, starting from the first user interaction until the point where the browser responds to that action. These user interactions can be a button click, link click, or any JavaScript-based custom control.
According to Google benchmarks, optimal time durations for interactivity should be below 100ms while anything above 300ms is considered poor.
One can argue that these time gaps are tiny and make no difference by adjusting a few hundred milliseconds. But in reality, these slight changes could significantly impact end-users.
CLS – Cumulative Layout Shift (Visual Stability)
Sometimes you may have noticed movements of elements in web pages when they load, and I’m sure that it’s not the best user experience you look for. CLS comes in handy in such scenarios to measure the performance of web pages.
CLS shows how many times the components moved here and there while the page loads. As you all can understand, CLS needs to be on the minimum side to achieve a good user experience.
The following image shows the CLS difference between medium.com and site, which is not visually stable.
In the above example, medium.com showed a CLS of 0.097.
Does that mean the medium.com home page shifted 0.097 times on load? → NO!!!
This value is calculated considering the viewport size and the movement of unstable elements in the viewport between two rendered frames.
layout shift score = impact fraction * distance fraction
CLS values (layout shift score) can easily be calculated using the above equation. The impact fraction in this equation refers to the impact of unstable elements on the viewport, while the distance fraction refers to the distance that unstable elements have moved.
For example, let’s assume that an unstable element covers 40% of the total viewport size, and it moves 20% down when the page loads. In this case, the impact fraction will be 0.6 since the unstable element has utilized 60% of the total viewport. The distance fraction will be 0.2 since the unstable element moved 20% downwards.
So, the final layout shift score = 0.6*0.2 = 0.12
