core web vitals

What Are Core Web Vitals? A Comprehensive Guide

Three things are certain in life: death, taxes… and Google updates. This blog is about the third thing. Yes, a new update is about to take place. It is called Core Web Vitals.

 Google makes thousands of changes to its ranking factors around the year. They don’t even announce them all. They announce when they feel the changes would heavily impact the SERP results. One of the ranking factor changes they recently announced is ‘core web vitals’.

These core web vitals are a part of bigger page experience metrics that Google tracks to analyze how “users perceive the experience of interacting with a web page beyond its pure information value.”

These page experience signals include Core web vitals (which we will discuss in this blog) and existing search signals: mobile-friendliness, safe-browsing, HTTPS, and intrusive interstitial guidelines.

Google said that once the core web vital updates are out, it will affect all regular search results on mobile and desktops.

So, to break it down: Google wants you to improve your page experience signals so that users don’t find your website a nightmare to scroll. But, even in these page ranking signals, there are core web vitals.

So, let’s talk about them.

What are Core Web Vitals?

What are Core Web Vitals

Core web vitals are the subset of web vital metrics that Google believes are most important for websites to track. These core web vitals track user experience’s natural aspects, like how fast a page loading is and how soon users can interact with it.

Three signals for Core Web Vitals

The core web vitals focus on three aspects:

  1. How quickly the page loads
  2. How soon users can interact with it
  3. How stable the page is as it is loading and as the user is interacting with it.

So, core web vitals come down to three things:

  1. Largest contentful paint
  2. First input delay
  3. Cumulative layout shift
page experience

If these terms are making your head spin, sit down. These are not terms imported from a manual of a rocket ship. These are just an added perspective to look at things we already know about.

Largest Contentful Paint:

You must have heard about first contentful paint (FCP). You didn’t? Ok, here’s to jog your memory:

FCP measures when a webpage starts loading to the first content that appears on users’ screens.

largest-contentful-paint-example

The largest contentful paint (LCP) is slightly different from it as it deals with the appearance of first ‘meaningful content’.

Basically, it is the time between the user clicking the link and the first most significant element on the webpage appearing on the screen. The largest element could be anything. It could be an image, text, or a form.

LCP accounts for 25% of the performance score as a web vital metric. Other page speed elements such as load time, FCP, and Time-to-First-Byte (TTFB) are still relevant in improving user experience on a website.

According to Google, to measure page experience, LCP is divided into three parts:

LCP
  • Good
  • Needs improvements
  • Poor

LCP less than 2 seconds is good. LCP between 2 to 4 seconds is workable, but it needs to be improved. However, LCP more than 4 seconds is downright poor and should be improved.

So, your webpage could load fast, but if it isn’t loading meaningful content fast, you have a problem at your hands.

Ok, but who decides what’s ‘meaningful content’ and what ‘just content’?

It is mainly the largest content on your page.

It could be:

  • an image
  • a video
  • a block level element on your page (<p>, <h1>, <h2>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> are all block level elements.

Improving the LCP:

Reduce your server response time: faster response time means the resources on your page load faster.

To reduce the server response time, you can:

  • Use a CDN Content Delivery Network (CDN)
  • Use effective cache policy

Fix render-blocking behavior: By removing render-blocking resources, you can reduce the critical rendering path and ensure that your page loads faster.

Optimizing images and videos: smaller images take less time to load, and hence your page loads faster. You can:

  • Resize an image to load faster
  • Code the images efficiently
  • Uploading images in next-gen formats

First input delay

First Input Delay (FID) is a measure of the time from when users click, tap, or press the key and until the browser starts to process that input.

First input delay

According to Google, a good FID score for a website is less than 100 milliseconds. If FID is between 100 to 300 milliseconds, it should be improved. But, if it is taking more than 300 milliseconds, then FID is poor.

FID only measures clicks and taps. It doesn’t measure scrolls and zoom in/out. It only tracks the first impression and not the ones after it.

Fixing FID will mean your website won’t appear unresponsive or heavy. It is different from Time to Interactive (TTI).

TTI is the time a page takes to be fully interactive. While FID is the delay between the first tap and the page becoming fully interactive.

FDI is a Real User Metric and cannot be tested in the lab using Lighthouse or any other tool. It requires human interaction to have an event registered.

Here is how you can calculate the FID on your website:

  • Use Page Speed Insight: You can go to Page Speed Insights, enter your website’s URL, and it will show you a report of all three core web vitals.
Page Speed Insight
  • You can view the Chrome User Experience Report through BigQuery or the CrUX API
  • Core Web Vitals report on Google Search Console (GSC) can also be used to measure FID. The good thing about data is divided into mobile and desktop. So, it makes it easier to find what device has to most FID.

How to improve FID:

  • Optimize your CSS code: You can optimize your CSS code by compressing your files or removing unused CSS code.
  • Optimize your JavaScript code: Break up long tasks in your JavaScript code into short asynchronous tasks. Implement progressive loading of code to improve interaction readiness.
  • Add on-demand loading for third-party content.
  • Implement lazy evaluation

Cumulative layout shift

Cumulative layout shift

Have you ever confirmed an order when you only wanted to abandon your cart? Did the content on the page move suddenly without you doing anything?

This is called the layout shit.

Layout shift is the unexpected movement of page content, and this movement is caused by asynchronously loaded resources or DOM elements that get added to the page above existing content.

This layout shift could be due to an image or video with unknown dimensions, an ad that dynamically resizes itself, or a third-party widget that appears on the page.

Cumulative Layout Shift (CLS) measures how much the layout of your webpage shifts while the user is interacting with it. It scores for every unexpected shift that occurs during the users’ stay at the page.

Now, Google has made Cumulative Layout Shift (CLS) a core web vital.

cls

According to Google, a CLS score of 0.1 is ideal. A score between 0.1 to 0.25 should be improved, but a score above 0.25 is poor.

Your CLS score can also be 0, which means that your webpage is completely static with no erratic layout shifts.

How is CLS calculated?

There are two important factors that go into the calculation of CLS.

  1. Impact Fraction
  2. Distance Fraction

Impact fraction is calculated by dividing the impact region (area affected by layout shifts) by viewpoint area (the area of the page visible without the need to scroll down).

Distance fraction is calculated by dividing move distance (the distance element covered while moving) by the viewport height.

Now, you can calculate the CLS of your webpage by multiplying the impact fraction with the distance fraction.

The most common element causing high CLS, according to Google, are:

  1. Images, ads, embeds, iframes that are without any dimensions
  2. Dynamically injected content
  3. Web fonts causing FOIT/FOUT
  4. Actions are waiting for a network response before updating the DOM.

How to improve the CLS?

Font: If your site is using fonts that are hosted online, it might be causing an increase in your CLS score. To avoid this, you can preload the font files using <link rel=preload> for key fonts so that they are downloaded as a priority.

Fix image sizes: You can set the aspect ratio for the images on your webpage using JavaScript. In this way, the browser knows exactly how much your image/video will occupy. With fixed space, there will be no layout shift.

Ads: According to research, ads are the number one source for high layout shift. Ads appearing or moving dilute the user experience and make them dislike the website. To solve this, you can start by giving reserve space for ads. Also, don’t place non-sticky ads near the top of the viewport.

Final words

Google has reportedly said that core web vitals are no substitution of quality content, but the content is an important ranking factor that improves the user experience on a page.

Improving your website for these vitals can be tricky, especially if you don’t know how big a problem you have. So, the first step is to identify your core web vital source.

Use tools like Lighthouse, Google Webpage test, Chrome DevTools, and Chrome Web Vitals extension (even I use it). And you will be able to strategize to get rid of the problem and make your website keep up its excellent rank.

Leave a Comment

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