The A to Z guide on Core Web Vitals: Google’s Ranking Factor


Table of Contents

Google’s ranking factor is what almost all online businesses and websites are after.

Googles’ ranking factor is a paradox and continues to change its course continuously. 

Google’s ranking factor never pertained to a single factor and is a mixture of many factors. Most of the time, the SEO analysts apply a trial and error method in making the websites rank well on the search engine results page (SERP). 

Rarely only does google provides a heads up on the google ranking factor that they are about to update and this time core web vitals. 

Core web vitals are all set to take into account as a notable google ranking factor from 2021. It was expected that the core web vitals would come into play in 2020, but implementation was postponed because of the global pandemic. 

The pandemic has made many changes to the online world and has speeded up the online and digital world and its reach in multifold ways. What was expected to happen in another five or ten years has taken place within a matter of months in this pandemic.  

Core web vitals are the new ranking factor which determines the website rank on the SERP. 

Core web vitals is a measure of the actual user metrics as per certain entities like loading time of the page, first input delay, and cumulative layout shift. 

Core web vitals is implemented to improve the user experience while browsing. 

Search engine optimized pages and strong content are indispensable, but the user experience is vital, and that is what core web vitals are directed towards. 

Core web vitals are measured by three entities called Largest contentful paint (LCP), First input delay (FID), Cumulative layout shift (CLS)

1. Largest contentful paint (LCP)

How often do you end up waiting for the pages to load after you try clicking on sites?

It is estimated that websites end up losing almost 20% of the users because of the loading time it takes to produce the contents of the page. 

The largest contentful paint measures the loading speed or time of all the pages on a site. 

Although there have been various existing metrics that measured the loading time of the page, nothing was user-centric. 

The LCP is completely focused on the user’s side of the loading of the page. 

The LCP of the website is expected to be around 2.5 seconds or less. This means the page needs to be loaded within the range of 2.5 seconds, and that is the ideal LCP range. 

If the LCP takes around 3 seconds or more, then that is a poor LCP range, and it requires improvement. 

Google breaks down LCP into three categories. The LCP range from within 2 seconds is good, around 4 seconds needs improvement, and around six and more is poor. 

LCP is largely influenced by the usage of vectors on the page. Vectors like images, videos, and text influence the loading time of the page and if the vectors are consistently proportioned with the pixel, then the loading time would occur evenly and faster. 

These largest contents of the page and their loading can be influenced by the CSS, the Javascript, and the client-side rendering. 

These highly influence how long does it take for a page to load up. 

So how exactly do you fix the large contentful paint of your site?

  1. Ensure that the Javascript and CSS you use are less render-blocking. 
  2. Try to limit the usage of the larger page elements which might slow up the loading time of the page. 
  3. Upgrade the web hosting, URL of the page and optimize the content. 
  4. Analyze the server response and lags in it and try correcting the glitches. 
  5. Use effective tools like Google page speed insights to keep track of the loading time of the page. 

2. FID(First Input Delay)

First Input Delay is the concept of measuring the interactiveness between the user and the website. 

It is basically the measurement of the time taken for the website to receive the first input after the site gets loaded.

The inputs referred to here mean the user’s navigating through the page to scroll down, choose a widget menu, enter their information in the chatbot, etc. 

Thus, FID required actual user input, unlike LCP, which is just a measurement of the page’s functioning. 

A good FID range of a site would be around 100ms, around 300 needs improvement and around 500 ms or more would indicate a poor FID. 

Pages with pure content like blogs and articles, there is not much scope for interaction from the user’s side, and the maximum that you could expect is scrolling down the page to read further content of the blog. 

For pages that have a login and sign-in options, the FID range is substantially higher than those without it. The first page of the website with different menus to choose from also has a significant FID range. 

So how do you improve the FID for your website?

  1. Minimize the influence of the third-party code.
  2. Include chatbots to receive a quicker user response.
  3. Remove unnecessary javascript to ensure a faster loading time. 
  4. With the use of a browser cache, the content might end uploading faster, thereby acquiring a quicker user input. 
  5. Optimize your website in such a way that it renders quicker interaction from the site. 

3. CLS(Cumulative Layout Shift)

CLS is a major entity which allows you to calculate the stability of the page. 

Have you noticed that you give a specific input to the website you are using and the page keeps loading continuously without a pause? 

And then it ends up getting loaded, you hit some options or touch upon click baits by mistake, then it starts loading again, and it goes on for god knows how long. 

Cumulative layout shift is also referred to as layout junk for the fact that it inhibits the user to surf along with the page because of the layout shift in the page.

Cumulative layout shift of the core web vitals is aimed towards measuring the time taken for the pages on the website to reach stability after a certain input is given.

A website is supposed to reach stability within 500ms of receiving the first input.  

A layout shift of the page generally happens because the dimensions of the content in the pages are uncertain and the server spends substantial time calculating and analyzing the dimensions of the contents in the page before it ends loading. 

Well, with the content of different dimensions, the server keeps interpreting the dimension for a long period of time. More often than not, the user decides to quit surfing the website than to prevail the trouble in waiting for the website to reach stability. 

Because then again after it does, the website might start loading again on the input the user gives subsequently. 

The CLS of the website should be less than 0.1

The measurement of the CLS score is calculated by multiplying the area of the screen affected that is which keeps shifting unexpectedly with the distance traveled. 

So how do you work on the CLS for your website?

  1. Ensure that the dimensions of the vectors are consistent so that the server doesn’t take up much time in loading. 
  2. Reserve a specific space to insert ad elements and avoid jamming of ads on the content.
  3. Avoid using new content on top of the existing ones. 
  4. Incase of using animation of properties prefer using transformational animations to ensure continuity. 
  5. Allocate a specific space for inserting ads elements to ensure jamming. 

Tools that can be used to measure the core web vitals in optimizing your website 

a. Chrome DevTools 

Site optimization can be done using PSI data, web. dev/measure which measures the page, and provides with a set of guides and code labs. 

b. Chrome UX reports 

Real-word user metrics and site functioning can be calculated, and reports are generated on the same. 

c. Search console 

Using the search console, you can identify the website pages that need optimization. These field data are generated in a report and are useful tools to optimize the pages of the website. 

d. Page speed insights 

The lab and field issues on a page can be diagnosed using the page speed insights. 

Pagespeed insights in power with Lighthouse and Chrome UX reports are the apt choice to use and diagnose field issues of the page. 

e. Lighthouse

This you can make use to look for backlogs in the core web vitals after you have optimized the website and are ready to deploy the changes. 

f. Web vital extensions 

You can make use of the extension from the Chrome web store to gain real-time desktop metrics of the website which you can make use of to identify issues in the performance of the website. You can also get insights into the workflow of the website using the web vital extensions. 


Core web vitals are not only a major ranking factor that will help you rank at the top of the SERP but will also help you to optimize your website performance. 

Get ready to analyze and make use of the Core web vitals and optimize your website.
Digital Scholar- favicon

Written By
Digital Scholar

Digital Scholar is a premier agency-styled digital marketing institute in India. Which offers an online digital marketing course and a free digital marketing course worldwide to elevate their digital skills and become industry experts. Digital Scholar is headed by Sorav Jain and co-founder Rishi Jain, who are pioneers in the field of digital marketing. Digital Scholar’s blogs touch upon numerous aspects of digital marketing and help you get intensive ideas of different domains of digital marketing.

Leave a Reply

Your email address will not be published. Required fields are marked *

Schedule 1:1 free counselling