Google uses Core Web Vitals as one of the ranking factors in Google SEO, so make sure if you are running a startup or company, some product that requires SEO benefits that you focus on improving that loading speed.
Core Web Vitals
Core Web Vitals are as follows: CLS as cumulative layout shift, LCP as largest contentful paint, and FID as first input delay.
So as a user, what Google has given me the opportunity is to quantify my experience when i am on a website. What do I mean by that?
For example, let’s say you are going on a very clean website, which has a nice, fast loading time and the animations are smooth and you are scrolling smoothly, and so on.
On the other hand, there’s a small, sluggish website that loads slower, which has tons of ads coming up, and so on.
So what Google has done is that it has given certain guidelines on which it will evaluate. The website has the software. So Google is a software.
So it has to take a website, it runs it through the core Web Vitals it has designed and sees if a website passes that check or not. If it does well, that’s a thumbs up from Google. It does not. And so that’s a thumbs down.
So let’s take a look at all of these metrics one by one starting from cumulative layout shift.
If you go on a website and you want to place an order or if you wanted to go back, I by mistake clicked “Yes” some are in my order because of that mini notification, which appeared surprisingly on the top right. So you had a cumulative layout shift there.
Now that is bad in front of Google because if your layout is changing rapidly or even slowly, then it is unpredictable for the user to interact how the user could interact with their application.
So obviously, Google scores are set on a certain scale using certain techniques. But a CLS of zero means that once your page is loaded, it pretty much does not change without any user interaction. The layout of the page does not change. That means no pop-ups, no frames, nothing just popping in and out of existence, which should be the case for an ideal user experience.
The second Core Web Vitals, which Google considers its largest contentful paint, which means how fast the largest part on your page gets rendered.
For example, you have a website that has something like where you have a heading, then an image tag, then a video tag. And let’s say the video is the largest rate. So the time it takes for your page to render this area (video area) to make it visible that is known as the largest contentful painting. And according to Google, that should be less than 2.5 seconds for a nice LCP value for the end-user.
So the faster the user can see the largest piece of the website, the better experience they will have.
These things kind of rely on one another as well. Also, you can below given the image showing the largest contentful paint as one of the examples which Google has shown, where sometimes the LCP element is a text node, sometimes it is an image, sometimes it’s a video, sometimes it’s a logo, and so on.
Let’s finally talk about the first input delay, which is the third Core Web Vitals metric. One of the most important things you should optimize for.
But let’s say you are doing some heavy computation, which I was for, whether it’s just downloading a lot of CSS and executing it or doing something which blocks the main thread for a very long time. Now, this is a bad experience for the user. Why? Because in this time, let’s say the user tapped the button at a particular point.
So the user would still not get any response from the browser until this main thread is cleared. So let’s take a look at, for example, the user clicked your button here on the screen and they are blocked for two seconds. This is the one second, and this is a one-second render.
The second window refers to the amount of time which your function took to execute that click. So what if the first to input would give you the value of two seconds delay, which is “the time when somebody tapped on the button compared to the time when you are just actually started responding”.
So your job as a developer is not to write a long-running thread a blocking code, especially on the page load, because most of the time, let’s say your page immediately loads on the screen, but it’s still loading in the browser.
Somebody seeing some links and the user starts tapping on it but nothing happens because you have blocked the main page and the browser needs the main thread access to be performant. So FID if your score is lower then you would suffer a huge penalty.
Because that is bad for the user as well as for search engines, for indexing your stuff. With that being said, Google actually uses Core Web Vitals as one of the ranking factors in Google’s SEO.
So make sure if you are running a startup or company, some product that requires SEO benefits that you focus on improving that speed. Now, how do you improve your core web vitals? That depends on a lot of factors. Here is the Ultimate Checklist to Get the Best CWV Score.
So that is all for this article. Let me know if you learned about Core Web Vitals, what do you think? What is your score?