Core Web Vitals: Everything You Need to Know About

Google aims to provide the World’s information well organized, easy to access, and useful for everyone. So, to make this possible, they always come up with new strategies and algorithms that refine their search engine., Since Google’s main business is completely focused on advertising from websites.

In the year 2020, Google introduced a standardized metric system called Core Web Vitals, which adds a new ranking factor “website performance ” in determining a website’s position in search results, apart from the search term keywords and backlinks that you have created.



So, let’s get deeper into this concept and see what you can do from your end to bring the best results.


What are Core Web Vitals?

Google’s Core Web Vitals is a standardized set of metrics for users that help them optimize their website performance so that it can provide the best user experience in terms of loading time, interactivity, and visual stability.

Understanding Core Web Vitals will help you retain users on your webpage and also let you achieve Google’s standards.

To make this possible, the first thing you need to do is to learn What are the different metrics of Core Web Vitals. Here are some of the main Core Web Vitals Metrics.

  • LCP or Largest Contentful Paint: It measures the time taken by the main content to be loaded in the viewpoint of users. As per Google’s recommendation, an LCP score below 2.5 seconds is Good.
  • CLS or Cumulative Layout Shift: It measures the visual stability of the webpage, i.e. How much the web page layout shifts unexpectedly during the loading. Its score ranges between 0 to Positive, where a “0” score means no layout shifting and a positive score means layout shits. Google recommends a CLS score below 0.1 is Good.
  • FID or First Input Delay: It measures the responsiveness of the webpage as per the user’s first interaction. i.e. the whole time between the user’s interaction such as clicking on the button or link on the webpage and the browser’s response. Google recommends FID below 100 milli seconds is Good for about 75% of the webpage load.
  • INP or Interaction to Next Paint: It measures the overall responsiveness of the webpage. i.e. How fast the webpage reacts when a user interacts with it. This interaction can be anything like, clicking on the button, typing in a form or even scrolling the webpage. Google recommends below or equal to 200 milliseconds is good.

If all the metrics score well, the better will be user experience and hence better chances in the SERP rankings.


Why Core Web Vitals are so Important?

As mentioned earlier, Core Web Vitals are indicators of page experience. A good Core Web Vitals score shows that the website provides a smooth, fast, and stable user experience. On top of that, it helps to boost your SEO.

Website visitors are more likely to stay and convert to websites that perform well, are quite responsive, and have quality content.

If a website loads faster and can deliver content quickly, users are less likely to leave the webpage out of frustration, resulting in a lower bounce rate.

Not only do these metrics help enhance your website’s performance and user experience, but they can also boost traffic to your website.

Where Core Web Vitals plays a major chunk, you should not forget to consider also these factors to boost to page experience :

  • Mobile ready
  • HTTPS
  • Safe and Secure Webpage (No malware or Misleading content)
  • No irritating popups while navigating and browsing

One thing you should make clear in your mind is that excelling in page experience won’t guarantee you the number one ranking in SERPs. To achieve this spot, you have to fulfill Google’s various other factors (approximately more than 200).


How to check your Website’s Core Web Vitals?

There are plenty of Free tools available, but one that is Free and preferably great to use is Google Page Speed Insights.

The Google Page Speed Insight tool lets you evaluate any webpage for both mobile and desktop versions. Based on the test results, it also provides you suggestions on How you can improve your website performance and user experience.

Testing using Google Page Speed Insight

To test a Website’s Core Web Vitals, Visit Page Speed Insight, and enter the URL of the page.

Once the test has been conducted and analyzed, you will see a detailed breakdown of all the performance issues along with different metrics.

Page SPeed Insight result
Google Page Speed Insight Report

When you further scroll down, a Diagnostics section with all the suggestions and areas of improvement will be mentioned.

Google Page Speed Insight Diagnostics Report
Google Page Speed Insight Diagnostics Report

Apart from the Core Web Vitals Score, it also provides you additional insights into your website’s SEO, Performance, accessibility, and Best Practices under 100.

Alternatively, you can also use GSC or Google Search Console.

Testing using Google Search Console

The best thing about using GSC is that it provides real-world data from Chrome user experience reports.

While considering Core Web Vitals, GSC provides a complete diagnostic of your website’s performance and groups together the pages that have similar issues.

Unlike PageSpeed Insight, where you have to analyze pages randomly, one by one, which is quite a tedious and time-consuming process.

To analyze the performance and check the Core Web Vitals Report, Sign in to Google Search Console and Select “Core Web Vitals” from the side menu bar as shown.

Google Search Console Diagnostics
Google Search Console Diagnostics

The report will be immediately generated and you will find an overview of the total number of pages Google considers need improvement, Poor and Good. (Report is available for both Mobile and Desktop)

Google Search Console Core Web Vitals Report
Google Search Console Core Web Vitals Report

If you want to go in-depth into the report and click on the “Open Report” button, it will show a bar graph showing how many pages or URLs cannot meet the core web vitals score standards.

Google Search Console Report
Google Search Console Report

To investigate how many pages require improvement, scroll down to the “Why URLs aren’t considered good” section.

For further details, you can click on the particular issue and viola it will provide you with a list of suggestions and areas of improvement.


How to Improve Your Core Web Vitals Score?

Improving your Core Web Vitals Score should also Boost your website performance and page experience and it should not be a critical task.

Let’s see how you can improve each Core Web Vital metric by yourself or with the help of a developer.

1. Improving LCP Score

According to the Google LCP Guidelines, It has been divided into three performance benchmarks with their threshold values.

Larges Contentful Paint
Larges Contentful Paint
  • Good : 0 to less than 2.5 seconds
  • Needs Improvement: 2.5 seconds to 4.0 seconds
  • Poor: More than 4.0 seconds

It means to have a good LCP score, you need to hit every webpage of your website below 2.5 seconds, which can be very challenging for larger websites with multiple pages and complex features.

For example, if your webpage has plenty of high-resolution images, its LCP score could be more than 4.0 seconds, and trust me, it won’t improve even if you have installed a CDN alone.

For this particular case, you need to optimize each page or, if possible, remove some which are not important. Plus, also optimize the page code.

It might sound like a very daunting task, but it would be worth it, and you should see dramatic changes in performance.

Keeping this in mind, more things can be done from your end such as:

  • Upgrade or Migrate to Fast Managed Web Hosting: The earlier and better web hosting will improve the website performance and hence better LCP score.
  • Remove unwanted Scripts: Unwanted third-party scripts run in the background and unnecessarily delay the loading.
  • Enable Page caching: It will allow the page to be stored in the server after it is loaded for the first time and the website can be easily retrieved whenever the visitor requests a page.
  • Disable Lazy Loading Plugin: Although lazy loading is an inbuilt feature available from WordPress 5.5. If you are using one (Especially powered by JavaScript), reconfigure it to avoid lazy loading the main image on your page, or else prefer to disable lazy loading.

To learn more, You can check out our dedicated post on “Largest Contentful Paint (LCP): A Guide to Web Performance“.

2. Improve CLS

CLS or Cumulative Layout Shift measures the visual stability of the webpage. It means How many elements of a webpage are stable while the webpage is loading.

If the elements of a webpage such as images or buttons move around randomly while the webpage is still loading, it indicates a high CLS score which is bad.

After all, nobody wants their visitors or users to relearn where are the buttons, images, and links located after the web page loads completely and accidentally clicks on something else.

Cumulative Layout Shift
Cumulative Layout Shift

This is how Google measures the CLS score:

  • Good: Value below 0.1
  • Needs Improvement: 0.1 to 0.25
  • Poor: More than 0.25

Here are some simple tips for you to improve your CLS score:

  • Add Width and height size attributes to images and videos: This way, the browsers get to know how much space a specific element requires to load. So, everything will look well-structured, organized, and clean, and also doesn’t move around randomly while the webpage is loading.
  • Allocate space for Ads elements: Or else they will appear unexpectedly and push the content randomly in any direction.
  • Avoid using Web fonts: Since they need to be downloaded whenever the browser displays them. Better go for system fonts instead.

3. Improve FID

As of now, you have improved CLS and FCP, but the main question is whether visitors are interacting with the webpage.

Well, This is where FID comes into the picture: It basically measures the interaction time of users with the webpage.

The interaction can be anything, like clicking the button, filling up the form, clicking on an option in the menu, etc.

Due to this fact, Google considers it an important metric that provides information on how real-life users behave with the web page.

First Input Delay
First Input Delay

For this, Google measures FID as:

  • Good: Below 100 ms
  • Need Improvement: Between 100 ms to 300 ms
  • Bad: More than 300 ms

It might seem like exactly a page speed score and what exactly it means but a step further. It measures the time it takes for a user to do something on the webpage.

Every page might have a different FID score depending on the content and features it has.

For example, if the page consists only of content such as blogs, news, or articles, the FID will be calculated when the user scrolls or zooms in and out of the webpage, and it is not a big deal.

However, if it is a sign-up page, the FID might be huge, since it will be measured when the user starts typing the login details.

Keeping all these things in mind, here are some tips you can follow to improve your FID.

  • Defer JavaScript Functions: Heavy-coded Java scripts can sometimes block the rendering of a webpage, hence causing input delays. Deferring JavaScript can help you to make this process faster.
  • Enable Browser Cache: This helps in content loading faster on your webpage and reduces server response time and download times for resources.
  • Create Static Pages: A static HTML webpage is more stable and faster than a dynamic one. Their loading speed even boosted up when distributed through CDN.
  • Remove or Optimize Third-party Scripts: Third-party scripts, such as analytics or social media widgets, can significantly impact FID.

4. Improve INP

This metric is identical to FID but it is more specific to measure the overall responsiveness throughout the user’s interaction with the webpage.

Unlike FID, which focuses solely on the delay for the first user interaction, INP considers the latency for all user inputs and interactions on the webpage.

Interaction to Next Paint
Interaction to Next Paint

To improve INP, here are some of the tips you can follow:

  • Use CDN or Content Delivery Network
  • Remove third-party scripts
  • Enable Browser Caching
  • Optimize Images
  • minimize JavaScript loading time

Summary

The Core Web Vitals performance of your website is crucial in the context of how users experience your website.

An overall good Core Web Vitals score helps you achieve higher traffic, lower bounce rates, more conversions, and hence better ROI. It’s also worth mentioning that it can lead to better search rankings and brand reputation.

And there are various free tools available that can help you easily achieve these benchmarks.

If you find anything missing or like to discuss anything important please do let us know in the comment section below.


Leave a Reply

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