Understanding Core Web Vitals | How to Improve it?

Posted On January 11, 2023

What Are Core Web Vitals?

Core web vitals are a set of metrics that are considered while assessing a website’s user experience. 

Google is improving its core algorithm almost every year to provide more specific and top-quality content to users. 

Core web vitals are now an important  part of the new updated algorithm that marketers should care about. They help to analyze the minute details of a content. 

In short, Google determines the UX (user experience) of your website by analyzing your core web vital score. 

However, according to Google, an excellent UX score won’t shoot your website to the top. Rather, it is a part of the 200 Google algorithm ranking factors

Why Are Core Web Vitals Important?

 In June 2021, Google announced page experience as a vital parameter of Google’s official ranking parameter. 

Earlier, to have a good user experience, a few website essentials were:

• HTTPS URL
• Minimal ad pop-ups/Non-Intrusive Interstitials 
• Safe browsing
• Mobile friendliness

However, now, according to Google, to deliver a positive overall page experience, a website should have:

• Uninterrupted interaction 
• Visual Stability
• Quick loading time 

So, improving the core web vitals score of your website will help you to improve user experience and search engine ranking. 

What is Included in Core Web Vitals?

Core web vitals contain three elemts, that are:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Now that you know about core vitals and why they are important, let’s have a look at the tips for improving core web vitals. 

Though, the amount of control you have over your core web vitals is also dependent on the type of CMS/platform you are using for your website, such as WordPress, Shopify, etc., apart from the web hosting company you are using. 

 

• Largest Contentful Paint (LCP)

   

             

The time taken for a website to load from a user’s point of view is known as Largest Contentful Paint. 

In short, it is the time taken by your website to display the major on-screen content after a user has clicked on the respective link.

What is LCP ?

What can be worse than having no website at all? 

A slow website. 

Trust me on this. If your page’s loading speed is slow, it is utterly frustrating for users. They would avoid visiting your page and land up on the competitor’s page instead. 

However, optimizing site speed for improving on-page experience is somewhat technical, but it is completely worth it. 

LCP is different from the other pagespeed measurements, that are TTFB and First Contextual Paint. 

TTFB and First Contextual Paint don’t measure the experience from a real user’s point of view. 

On the other hand, Largest Contentful Paint focuses on what a real user will experience when they click on a link. 

LCP focuses on the content that matters the most. The elements that are considered for the Largest Contentful Paint are:

• <video> elements
• <img> elements
• <image> within <svg> element
• Block-level elements
• Background image element

To improve your page experience, you need to regularly check your LCP score and optimize your page accordingly. 

According to Google, sites should have a LCP score of less than 2.5 seconds. 

How to check LCP Score?

You can use Google PageSpeed Insights to check your site’s LCP score.

You can also check your LCP data on your Google Search Console. 

The data stored in the GSC is extracted from the Chrome User Experience Report. 

In Google PageSpeed Insights, you can view the report of a single page whereas, in GSC, you can view LCP data of your entire site. 

So, instead of checking manually, you will get a holistic report for your overall site with a list of URLs that are good, bad, and ugly. 

Though that’s how we name it. Google segregates the LCP score into three sections, that are: Good, Needs Improvement, and Poor. 

To get a good LCP score, make sure all the pages of your site maintain an LCP score of not more than 2.5 seconds. 

Good	Bad	Ugly
<=2.5s	2.5s – 4s	>4s

It is not easy for large web pages to maintain an ideal LCP score. Moreover, installing a CDN won’t improve your LCP. 

From cleaning the code to removing images from your page, there’s a lot of hard work involved in improving a site’s LCP score, and each ounce of effort is worth it.

How to Improve the LCP Score?

Google offers endless tips to improve the LCP metric of your web pages. From changing your web hoster to removing unused plugins, to improve your site’s LCP score, here are a few things you can start practicing on your website. 

• Remove extra third party scripts

Users cannot interact with a web page when the browser is still loading the Java Script. 

SEO experts suggest having minimum java scripts on your website to improve the LCP score of your website. 

You can use Google Chrome DevTools’s Coverage feature that analyzes and assess the JavaScript and CSS of a website that can be removed or disable without affecting the tech stack. 

According to the study conducted by backlinko, it suggests that a third party script can cause 34 milliseconds delay on your loading time. 

So, remove the unnecessary JavaScripts and render-blocking CSS to improve your LCP score.

 

• Set up lazy loading 

Have you ever visited a website where the images appeared or disappeared when you scrolled the website? 

Well, that is lazy loading. 

Lazy loading can help you to improve your LCP score as the images are only displayed when users scroll down to that section.

• Upgrade your web host

Your web host and slow server response time can have a massive impact on your LCP. You can use the TTFB (Time to First Byte) to analyze your website’s service response speed. 

If your TTFB is more than 200 milliseconds (ms), then it is advised to tweak your servers a little. 

For example, if your website is running on a single server, then you can use a CDN to route users. 

You can also server cache first content and the HTML pages.

 

• Remove large page elements

When you analyze your website in Google PageSpeed Insights, you will find a report of the pages with large elements that are slowing down your loading time. 

You can compress or optimize images, text files, block elements, and videos on your website. 

While optimizing your site to improve your LCP score, you need to consider the image used in the design elements or background of your theme file or CSS, along with the images inserted in HTML.

 

First Input Delay (FID)

FID is Google’s second core web vital. FID analyzes how easy it is for users to interact with your webpage. 

Like LCP calculates the time taken by your website to display the content, FID measures the time taken for your website to respond to a user’s interaction. 

What is FID?

First Input Delay is a performance metric that calculates the time between a user interacting with your website and the time taken by your website to process the interaction. 

FID includes the time taken by your webpage:

• to open an element from the menu section, 
• responding to a query that the user has entered in the search box, 
• to open the respective link that the user has clicked on your site’s navigation

Now you might wonder why FID is important for your website to rank?

Google is prioritizing real-life user experience. FID is a metric to determine how easy it is for real-life users to interact with your website. 

FID is not that important for content-centric websites such as blogs or news articles. In such websites, users can simply scroll down the website to read the content. 

However, if your page has any type of interaction element, such as a login page, sign up page, or where the user needs to enter their credentials, FID plays a huge factor. 

FID is calculated in milliseconds (ms). According to Google, an FID score of less than 100 ms is considered good. Here’s the FID threshold set by PSI

Good	Bad	Ugly
0ms-100ms	100ms-300ms	>300ms

 

How To Check FID Score?

You can use the Chrome User Experience Report to view your website’s FID score. Apart from that, you can use:

• Google Search Console Core Web Vitals Report
• PageSpeed Insights
• Web Vitals JavaScript Library
• DevTools Lighthouse

 

How to improve FID Score?

If your website’s FID score is not good, you need to take care of it immediately. 

There is not one but several factors that you can work on to improve your FID. Here are a few of them. 

• Optimize Third-Party Scripts

Third-party script includes analytics, social media buttons, advertisement etc. All these increase your website’s loading time. Optimize these third-party scripts to boost your website loading time.

• Optimize CSS code

Remove, compress, or minify the unused CSS

• Optimize Images

Images don’t directly affect your website’s response time. However, using lazy-loading, you can free-up valuable bandwidth and use it for code transferring. 

Remove out-of-use polyfills

• Use Good Quality WP plugins and Themes

If your website is running on WordPress, then it is advised to use top quality plugins and themes. Delete unnecessary plugins as they can hamper your FID score. 

• Skip Unused JavaScript

Modify your javascript download configuration to download only the JavaScripts that are important for your website. 

• Caching

Caching is useful for storing previously downloaded content so that when a user visits your website again, the content need not to be redownloaded. Loading content from caches improves website’s performance and minimizes server load. 

Why Does FID Score Matters?

FID score determines how easily users can interact with your website. The lower the FID score is, the better is the page experience. 

To be at the top of your Core Web Vitals score, it is important to optimize and improve your FID score.

• Cumulative Layout Shift (CLS)

Last but not the least of Google’s Core Web Vitals is CLS. 

The CLS metric measures the visual stability of your website while it is loading. By visual stability, it means the clickable and visible elements. 

If these elements start shifting like crazy when the page is being loaded, your website has a high CLS which will have a negative impact on your core web vital score. 

What is CLS?

We all have visited a website where the page elements start shifting like crazy when the page is loading. 

One minute the search box is in the middle, the next moment it moves up the top and the previous space is replaced by some other element. As a result, mostly when you are in a hurry, you end up clicking the wrong option/element. 

What did you do? I guess you abandoned the website and moved on to some other website in the SERP. 

Moving elements in a website are frustrating for users. They have to find where all the elements, pages, and fields are located, Again!

Improving your CLS is a major part of the UX optimization as it will prevent users from accidental clicks. 

Visual stability drastically improves the user experience of your page and supports your overall SEO performance. 

If your CLS score is 0/less than .25, it means that your website is optimally CLS optimized. The more the numbers are, more are the shifting elements on your website. 

 

Good	Bad	Ugly
<=0.1	0.1-0.25	>0.25

 

How to check CLS?’

Since CLS is now Google’s top-ranking factor, you need to care about it. 

CLS is measured in two different metrics, that are: Impact Fraction and Distance Fraction. 

Impact Fraction measures the space a moving element occupies in the viewport. It adds up the shifting amount of the element in percentage from the start to final. 

For example, when a page is loading, the element occupies 50% of the screen/viewport. After the page is loaded, it shifts another 30%. So, the total amount sums up to be 50% + 30 % =80% or 0.80. 

Distance Fraction measures the distance of an element from its original position to the final position. From the previous calculation, the distance fraction was 30%. 

To find the final CLS score, multiple Impact Fraction X Distance Fraction. 

According to the previous sum, that would be 0.80 X 0.30, i.e., 0.24, which is your final CLS score. 

Apart from the manual process, the best field tools to check CLS Score are:

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals Report)
• Chrome DevTools
• Lighthouse
• EXPERTE Page Speed Test

How to improve CLS Score?

A good CLS score can help your website to offer consistent user experience which eventually means better ranking. To improve your website’s CLS, here is what you can do. 

• Set Size Attribute Dimension for All Media on Your WebPage

Setting up a size attribute for images, videos, GIFs, banners, ads, infographics, etc., will help users to understand how much space an element covers and won’t change when the page is loaded. 

• Have Dedicated Space for Ads Elements

Ads elements can suddenly pop up anywhere on the page and shift your content down if they don’t have any reserved space. 

• Have On-Page Indicators For Shifting Elements

Having an on-page indicator for elements that will shift after a real-life user has interacted with the page will help users to understand that the page is still loading and the element will shift. It will also prevent them from clicking on wrong elements/links. 

Conclusion 

Google algorithm is approaching a more user-centric delivery. According to the new updated Core Web Vitals, websites that have a good UX in terms for content loading, FID, and visual stability will be prioritized in the SERP.

So, the sooner you start improving your website’s UX, the better it will perform against your competitors.