Originally posted on my personal blog
Web vitals is a guidance for developers to provide their users great web experience. What I mean by guidance is that the core rules for creating a better website or web application.
We all want our users to engage with our website. In order to achieve that we have to follow some rules. Let's check out what these rules are.
Largest contentful paint is the largest image or text block visible in the viewport. LCP is the measure of the render time of this content. According to the Google Core Web Vitals guidance, 2.5 seconds or less is a good time. Be sure that 75% of your users hit under this time when they load your site for the first time.
This measure is about the time of interactivity. Whenever your website is loaded, your users should be able to click on a button or type something into input fields after less then 100ms. As we all know that, interactivity is one of the main bits of the modern web. So remember, your users want to click!
I bet you have clicked on an advertisement unintentionally because the page layout has changed after a few seconds of the initial load. This is called cumulative layout shift. You want your website's layout is stable. The acceptable measure of CLS is less then 0.1 so be sure that your images have explicit width and height attributes.
These three measurements are crucial for user experience. And user experience matters when it comes to SEO and user engagement with your website. In coming articles, I will try to explain how to improve UX of your website with following core web vitals.
If you find this article helpful, please consider following me on twitter where I share daily content about web development. Have a nice day!