Core Web Vitals – A Definitive Guide

Core web vitals are a set specific set of factors that Google considers to be extremely important for a web page's overall user experience. These user-facing metrics are often associated with speed, responsiveness, and visual stability. The core web vitals aim to help the site owner focus on an important matter: the positive interaction between user and website.

Web vitals are made up of three specific metrics designed to measure the core experience of whether the website is fast or slow and give a good response and better experience. And the three metrics are:

1) Largest Contentful Paint (LCP)

2) First Input Delay (FID)

3) Cumulative Layout Shift (CLS)

Keeping in mind while you can keep track of the core web vitals for both desktop and mobile, only mobile signals can be used for ranking pages. And if you want your core web vitals metrics to work perfectly, your pages should meet the maximum score of at least 75% of page visits.

Largest Contentful Paint (LCP)

LCP is a user-centered metric that estimates the page's performance and the time it takes to load. It measures how long the website takes to load the main context.

Usually, the LCP element is your site's hero section that features an image, or a text paragraph. And contrary to the first contentful paint (FCP) that is only used to load the content LCP targets the main and meaningful context.

It’s been shown through multiple studies that the essential element on a web page that users mostly want to see first is usually the largest one, like pictures or big bold headings and attractive. But short paragraphs, like Margin, padding, etc., don’t affect the element size or proportion. Note that Your LCP elements may be different for desktop(image) and mobile(text).

Good LCP scores:

Here’s how google evaluates LCP scores according to your website.

2.5 sec or less is a good score. Scores less than or equal to 4.0 mean it needs improvement, and scores more than 4 sec and poor and needs fixing right away.

For your website to pass, you LCP score needs to be of 2.5 seconds/less than 75% of all your page to view. A large LCP score suggests that your user is waiting too much on your webpage and the largest and important content takes too much time to load. The 3 most usual factors that hinder the negative effect on LCP are: 1) Inefficient media 2) render-blocking JavaScript 3) slow resource load time

First Input Delay (FID)

It is a real user web performance metric. It measures the interactivity and responsiveness of the webpage.

FID measures the time delay between when the user first interacts with your sites and the time the browser took to respond to you and start its necessary processing.

Note that Fid only measures first user interaction: It doesn’t consider zooming and scrolling.

Good FID score:

FID scores evaluate by google according to your website:

Good scores are considered to be less than or equal to 100 milliseconds. Less than 300 milliseconds need improvement while more than 300 milliseconds are poor & need instant fixing.

Cumulative Layout Shift (CLS)

CLS is a user experience metric that measures web perceivable stability. Suppose the size and position change and affect the content on the visible page, which is considered a layout shift. CLS sums all layout shift scores for every unexpected layout shift.

Good CLS score:

Here is how google evaluates the CLS scores according to your website:

Good scores are considered as less than or equal to 0.1 seconds.  A score less than 0.1 means that everything is working smoothly and page contents are fully static during their life-cycle.

How to Test Core Web Vitals

The new page experience signal, Core Web vital, will influence both phone and desktop original results. It doesn’t matter if your site is at the top or not.

Understanding the new metric and making it your priority is very important for your site's overall result output. Here is the list of some useful tools to evaluate your web’s core web vitals score.

Field Tool

This tool is also known as real user monitoring (RUM). It takes into account real users, various devices, etc., and the data is accumulated for the entire domain or per URL. Google also uses RUM to rank your site. So it’s helpful for you if you want to take a look at your real user experience use field tool

Google Search Console (GSC)

GSC has launched a core vital report that helps you identify the group of pages with similar issues. It will break down the core web by its three metrics for both mobile and desktop, but it requires DNS verification to view your web report.

By its new page experience report, the report includes web vitals report and existing page experience signals: mobile-friendliness, HTTPS, safe browsing status, and more.

PageSpeed Insights

It is a browser form page speed testing tool, and it concludes the web vital scores in their reports. Here, you can evaluate your performance page-to-page.

Also, PageSpeed insights provide the user with some actionable recommendations to remedy any faults or mistakes and improve their website.

Lab Tools

The lab tools operate to conduct the necessary test in secure conditions and figure out how a potential user will view your website. 

Lighthouse

Lighthouse is an open-source and free auditing website tool that further helps the developer or owner to figure out the core issue with the sites and eventually improve the quality of the webpage.  The latest lighthouse version includes three new metrics to the reports which are LCP, CLS, total blocking time (TBT).

Do you have any questions about Core Web Vitals? Please let me know in the comments below.