Core web vitals : Google's new page experience signal

Last modified on Mar 31, 2021

What is core web vitals?

Core web vitals collects page experience signals for page speed, interactivity and visual stability and send it to Google. These can affect as search results ranking. Google will collect all the core web vitals data displays it in a report within the search console. The report displays overall performance of the website. Failing to match core web vitals standards will generate poor reports in search console. This gives a chance to the webmaster to rectify the errors and improve page experience for the users.

What are the three core web vitals

The core web vitals is basically a combination of three metrics Largest contentful paint(LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS). The page speed is measured using LCP, that is defined as the time a page takes to load largest content element visible in the viewport.

The visual stability is measured using CLS. Google defines CLS as the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

First input delay measures the interactivity of a page. It is the time from when user start an event (clicking on a link or button ) to when the browser responds to that event.

Core web vitals becomes page experience signal for ranking

Google has announced that Page experience signal is going to be Google search ranking from May-2021. These signals actually measures the user experience for a webpage. The user experience is measured using three performance metrics page load time, visual stability and time to interactive. These metrics combinely called core web vitals are going to be major ranking factor. So, it is obvious that webpages failing to match these standards will rank down in the Google search results.

Understanding the Core web vitals report

The report measures the performance of a url. Every url in the website are categorized using status and three metric type. A url status can be Poor, Needs improvement, or Good. All Good urls are grouped together, url that needs improvement grouped separately and poor urls also makes a group.

A url which is not indexed will not appear in the report. If there is not enough real world data for any given url, no report will be generated. There will be separate section for mobile and desktop version. If a url performance is good for desktop but poor for mobile devices. whether a url is good or poor, that is determined by the standard value of the performance matrics defined in the table below.

Good Needs Improvement Poor
LCP <=2.5s <=4s >4s
FID <=100ms <300ms >300ms
CLS <=0.1 <=0.25 >0.25

Optimizing website for core web vitals

Since, core web vitals become Google's ranking signal for search results. It is important to optimize the website for the core web vitals performance metrics. Optimization starts from three main points Page load time, visual stability of the web design and Page interactivity. So, we will start with optimizing for the largest contentful paint.

Minimizing the time for Largest contentful paint(LCP)

The LCP metric measures the time a page takes to load the largest block of element (image or text or video) that is visible in the user's viewport. To provide a user good page experince recommended time time to load LCP is within 2.5 seconds. If the load time goes beyond 4 seconds, it is considered a bad user experince. Anything in between these two values can be improved.

What html elements are considered in the LCP

  • <img> element
  • <image> element inside an svg element
  • <video> element
  • background image loaded with css url() property

Why LCP time for mobile site goes high?

In general LCP time for the desktop website remains good, but LCP time for the mobile site goes high making it bad user experience. It happens because of the improper use of the image. One possible solution to this is use responsive images. Always use image in your website which adjust it self according to screen size. There are server side scripts which helps to achieve this. You can also use different sized images for different screen. You need to keep two copies of the same image of different size, one for larger screen and another for smaller screen.

Measuring visual stability with CLS

The layout of a webpage is said to be shifted when certain element of the page suddenly moves/shifts to a new position which makes the user lost in the page. It occurs because browser loads certaion resource of the page asynchronously. Elements which takes less time to load are rendered in the page instnatly while elements like images takes time to load.

Consider a case where there is an image between two text blocks, but image has not been rendered then two text blocks will be close to each other. When the image loads it comes between the two text block making the lower text block shift to next frame. This is the case of layout shift which generally happens because of the poor web design. Unexpected layout shift results into bad user experience in the page.

Being a web designer one should avoid such poor design. Though it is not a serious case but annoying to user. But in some cases it may create serious issue. Like what will happen if user is going to click on a link but suddenly because of layout shift the link moves down and another link comes in that place. User will ultimately end up clicking wrong link.

Reason behind layout shift

Unexpected movement of layout shift occurs because of two reason

  • Resources are loaded asynchronously.
  • DOM elements get dynamically added to the page above existing content like third party ads.

However, layout shift can be avoided to by declaring default height and width for the image and video. Because if size of the image or video element is known to browser in advance, frame equal to the height and width of the image will be to load.

Minimizing First input delay for page interactivity

While first two web vitals defines page speed and visual stability, first input delay defines the interactive nature of the page. The total time a browser takes to respond to an event started by the user is called First input delay. So, it is quite obvious that lesser the time taken by the browser to respond, higher is the responsive nature of the page. To provide a good user experience a overall respond time should be within 100 ms.

Now, the question comes why would browser takes time to respond? Why not the browser respond as soon as the user starts an event. The main reason is when browser starts loading a page, its main thread does a lots of background work. One of the main task is loading different resources asynchronously. In such cases if there are too many external requests are pending and at the same time if javascript files are too large , so it is obvious to take time to load, parse and execute.

So, to minimize the overall time to become interactive for a webpage, it is adviceable that a developer should keep the number of external request as low as possible.

Published on Mar 31, 2021

Get in Touch

Rank# SEO

With extensive two year research in Web designing , Development, SEO and Internet Marketing field, we are equipped with every latest web development technologies in our armoury. You can rely on us for making your business next big thing in the internet.

Contact us | About us | Policy Terms & Conditions

: +91 811 644 6262

All Rights reserved     Rank Hash SEO