If you are a web developer, you should understand the concept of core web vitals very well because there are parameters that help make your website more performant and faster and all the best practices to optimize your website perfectly.
Google Web Vitals
There are many web vitals defined by google, and they have handpicked some of them and gave them the name core, and hence they are called core web vitals.
The three core web vitals are Cumulative Layout Shift, Largest Contentful Paint, and First Input Delay. These are mostly the guidelines that google follows to evaluate your website as software. And if the tests are passed then, that's a thumbs up from google.
1) Cumulative Layout Shift
Cumulative Layout Shift is the metric to measure the unexpected layout shifts within the viewport that occur during a page's entire lifecycle. This metric states the visual stability of the webpage as it also determines the User Experience for the most part.
It's essential to understand the metrics unit, the unit of CLS is not in seconds because it's not measured in time. It measures the change in the viewport size or the shift of elements on the page. The lower the value, the better the score for this web vital.
2) Largest Contentful Paint
This metric delivers the time. It says how fast the largest part of your page gets loaded. Let's say you have a small web page with a heading, paragraph, and an image that takes most of the web page. As the web page's largest part is the image, Google tracks the load of the image to determine the Largest Contentful Paint of the website. You can see in the below image what is the largest part of the web page in each loading phase.
Its best in the LCP is in the range from 0 - 2.5 seconds. Also, Largest Contentful Paint and Cumulative Layout shift are somewhat interconnected. If you add the image to the web page dynamically, which takes a lot more time to load than the static pages, it affects both the values. After all, there is a cumulative shift in the user interface without any user input, which is unexpected for the user. The user experience of the web page is torn apart at the start itself.
3) First Input Delay
As mentioned in the above image, our website passes the Core Web Vitals assessment from the data collected over the previous 28 days. Our website is well under the maximum value that google puts in. The core web vitals play an essential role in determining the overall score of the website. Well, there is room for improvement on each page of the website. If you are aiming for the highest score possible on your website's main pages, that's enough.
Google also uses the Core Web Vitals as one of the Ranking factors of the SEO of your website, so make sure if you have a website than to maximize your core web vitals till the possible extent. There are a lot of factors that might affect the core web vitals, but the most important being the code of your website, which should be properly maintained to score an extra mile in the Page insights meter.
You can watch the full YouTube video here.