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
Once the server responds with the necessary file to load your website, the first page that your web browser renders is the index.html page, and this HTML page might need some resources like CSS files, JavaScript files, or .wasm in some cases. If you are not familiar with how the HTML document is mounted on the browser, it is done by a single thread, and this thread is often referred to as UI thread or the main thread of the website. So, when the additional resources are fetched from the network, the process is asynchronous, which means the UI thread is not blocked. But once the downloading of the JavaScript files is completed, it must be executed. The execution of JavaScript blocks the main thread of the website.
The longer the JavaScript takes to complete its execution, the longer your page will be unresponsive and the larger the penalty you face for more prolonged inactivity. The phase of the loading is measured as the first input delay by google. It's measured in seconds as it's a time metric. This is the most important metric of all the three that we have discussed because the whole interactivity of the page depends on the output reaction of your application. The FID value should be under 100 ms to maintain better responsiveness of your website.
Conclusion
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.
Top comments (0)