Core Web Vitals for JavaScript Developers – 2021

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.

In this article we will learn about a very important thing called web vitals from Google. So what these core web vitals are what you should know as a JavaScript developer.

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.

Core Web Vitals for JavaScript Developers

So let’s take a look at all of these metrics one by one starting from cumulative layout shift.

1. 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.

2. Largest Contentful Paint

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.

3. First Input Delay

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.

So what this means is, let’s say when your page is loading, it’s receiving the first thing it receives is indexed on HTML. Then this index will also download certain assets. It could be a JavaScript file, more JavaScript files, an image, pretty much x y z. Lots of assets.

So what happens is with the web, you have a single thread known as the UI thread responsible for rendering this page and also running the JavaScript. This is also called the main thread sometimes. So we don’t want your JavaScript is running. It blocks this thread right now whenever it runs for a very synchronous code or a very small piece of code, it just blocks probably a few milliseconds, which is not visible to the end-user.

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.

Conclusion

Now, of course, the score for a lot of different features can be improved, and you don’t have to aim to go ahead and do a score of 100 on every single page of yours. I mean, you can pretty much get some slack on basic, you know heavy pages, which required a lot of JavaScript. So that’s fine. But it should not be like you’re getting a score of 10 or 20.

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?