Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Ways to Improve Core Web Vitals of Your Website


Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

 
 

Ways_to_Improve_Core_Web_Vitals_of_Your_Website

Table of Content

What are the Core Web Vitals?

Core Web Vitals are a set of essential factors specifically observed by Google to check the global user experience of a web page. Core Web Vitals are formed with four measurements related to the page speed and user interaction. These include: First Contentful Paint, Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

To reflect real-time user experience, Core Web Vitals are applied to all web pages. These must be measured by all site owners and will be surfaced in all Google tools. Each Core Web Vital indicates a distinct side of the user experience.

Core Web Vitals do not work alone, as there are many other measures. After making a lot of research, Google determined a new set called Web Vitals. It is a combination of existing and a new set of measures. The three Core Web Vitals are highly important, and Google specifically asks website owners to keep an eye out for these scores and improve them where they can.

CoreWebVitalsData

Figure: Core Web Vitals Data
 

When you click on the open report in Mobile or Desktop, you can see the issues which caused a bad URL. And resolving those factors can lead you to the improvement of your URL.

CoreWebVitalsData1

There are two types of errors generated in Core Web Vitals

  1. CLS issue more than 0.1s (desktop)
  2. LCP issue longer than 2.5s (desktop)

CoreWebVitalsData2

You can see only 20 URLs in the Core Web Vitals report.

After clicking on the “CLS issue more than 0.1s (desktop)”, then you can see which URL affected the CLS issue. We can discuss these issues in FCP, LCP, CLS, and FID section.

You can see the issues that caused a bad URL by clicking on the open report in Mobile or Desktop. And resolving those issues can lead to an increase in the quality of your URL.

   

Tools

There are two tools used for URL improvements

  1. Page Speed Insights
  2. GT Metrix
Page Speed Insights

You can write this URL https://developers.google.com/speed/pagespeed/insights/ in your address bar

CoreWebVitalsData3

 

Once you enter your URL in the textbox, click on the Analyze.

CoreWebVitalsData4

After click on analyze, your report would get generated and you can simply check your URL if it is poor or good and where it needs an improvement.

CoreWebVitalsData5

CoreWebVitalsData6

Here, this URL has turned out to be a good one.

However, on the flip side, you can improve your URL considering the steps of the FCP, LCP, FID, and CLS sections.

GTmetrix

The GTmetrix works as similar as page speed insights but GTmetrix follows different algorithms for Core Web Vitals.

You can write this URL https://gtmetrix.com/ in your address bar

CoreWebVitalsData7

If you log in to the GTmetrix, you can compare your previous URL performance with recent URL performance.

Now, enter that URL in the textbox and click on Analyze.

CoreWebVitalsData8

You can see a generated report with various grades such as A, B, C, D, E.

CoreWebVitalsData9

Here, this URL is on A-grade, which steps we can follow for the improvement for our URL, you can be following in the FCP, LCP, FID, and CLS section.

As we can see this URL is of A grade. Now let’s discuss in detail the four improvement steps of Core Web Vitals i.e.,

  1. First Contentful Paint (FCP)
  2. Largest Contentful Paint (LCP)
  3. First Input Delay (FID)
  4. Cumulative Layout Shift (CLS)

First Contentful Paint (FCP)

FCP means First Contentful Paint. FCP measures the browser's time to release the first piece of DOM content after a user navigates to your page. To improve speed and user-experience of the website, you have to work on CSS, JS, and HTML files. In simple terms, that's how long it takes for the browser to display any content to the user.


How to improve FCP?

Eliminate render-blocking CSS and JavaScript

A web page is rendered by the browser after setting up many elements such as HTML, CSS, JavaScript, and HTML imports. The browser will first download all the elements from the web page, analyze them all, and then make the web page.

The browser would have received the HTML content when the user requests for a web page, but will always be waiting for any other resources to load before rendering the page. It is called render-blocking resources.

When a script or CSS file from an external source cannot be loaded, your page will stay blank and will not continue to load. Therefore, always ensure that decrepit sources are on your own domain and defer loading non-essential sources as much as possible.

The scripts in the page header are by default read and executed before the page is constructed. It takes a lot of time and is often of no use at all. You can also delay the execution of these scripts to prevent them from blocking page loading. After that, you can easily pass the attribute 'defer' or 'async' to a script. Note that you only delay scripts that are not necessary to load the page.

Reduce TTFB

Time to first byte (TTFB) or server response time occurs between the server and the browser. It is the time it takes for the browser to receive the information requested by the server.

It is divided into three stages: the request, the processing of the request, and the response.

To reduce your TTFB, you can choose a fast hosting provider, using quality CDNs like Cloudflare, and enabling a cache at the website level.

Minify CSS / JS

If your CSS and JS are unminfied, your webpage performance would get decreased and also create a bad impact on your LCP.

UnminifiedCSS

Figure: Unminified CSS
 

When your page reloads and your CSS and JS are minified then it efficiently reduces your execution time and improves performance. When you have minified JS and CSS, you would observe reduced execution time with improved performance while page reloading.

MinifiedCSS

Figure: Minified CSS
 

Here is the link to minify your Unminified CSS and JS. https://unminify.com/

Largest Contentful Paint (LCP)

Largest Contentful Paint is the measure of how long it takes a website to show the user the most comprehensive and interactive on-screen content.

This metric, according to Google, only considers content above the fold, or everything that appears without scrolling.

There's one more thing to consider, and it has to do with the type of content that's being considered. The metric tracks a variety of content types, including images, videos, and text

  1. images;
  2. image tags;
  3. video thumbnails;
  4. background images with CSS;
  5. paragraph and heading text
 

Looking for Trusted Custom Website Development Company ?

Your Search ends here.

 


How do images impact LCP?

Images are typically the largest elements to load on a page, which is why they deserve special attention.

This is also why you have just seen some optimization tips for pictures. After all, they demand many browsers, which can sometimes lead to delays.

You can use webp images instead of jpeg, jpg, png. If you are using webp so you can improve your LCP.

Quick sites are unlikely to provide a poor user experience. LCP is the most important of the many concerns in this regard, according to Core Web Vitals. As a result, continue to monitor and focus on optimizations as needed.


How to optimize LCP?

It’s possible to optimize the Largest Contentful Paint. Tracking is a key part of the routine, but the improvements are working. Frequent tracking is important to make improvements. Take a look at some significant aspects of LCP

Optimize image sizes

Always use images with the right sizing. You can set specific dimensions for the image, either for the desktop or mobile version. Overloading, which can result in a high LCP, is avoided by using the recommended size.

Use an image CDN

A CDN service can make images load faster. ImageEngine is a tool that does all the image matching work, taking into consideration factors like device access, file size, and user location.

Avoid JavaScript to load images

If you load the images through JavaScript, you can remove this script. That helps to prevent any delay, keeping the LCP within the recommended average.

First Input Delay (FID)

First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are two measures of how long it takes to visually paint content on a page. While important, paint times do not consider the responsiveness of the load: or the speed with which a page reacts to user interaction.

First Input Delay (FID) is a Core Web Vitals setting that captures a user's first impression of a website's interactivity and responsiveness. It is the time between when a user interacts with a page for the first time and when the browser is capable of responding to that interaction. FID is a field measure that cannot be simulated in the lab. Actual user interaction is necessary to measure response time.

The FID is recommended by Total Blocking Time (TBT) in the Page Speed Insights. The FID measures different things, if your TBT improves, your FID would also improve.

The primary cause of a Poor FID is heavy JavaScript performance. Optimize the way JavaScript analyzes, compiles, and runs on your webpage will directly reduce FID.

Heavy JavaScript execution

The browser cannot respond to most user entries while it performs JavaScript on the main thread. In other words, the browser cannot respond to user interactions while the primary thread is occupied. This can be improved by:

  1. Break up Long Tasks
  2. Use a web worker
  3. Reduce JS execution time

Cumulative Layout Shift (CLS)

Cumulative Layout Shift or CLS is Google's Core Web Vitals page speed measure. CLS scores measure the visual stability of a webpage. A layout shift occurs each time a visible item changes position between rendered frames.


How to improve CLS?

You can fix your CLS by the following:

Disable sticky headers that move content from top to bottom.

You can always add size attributes to your images and video elements. This approach ensures that the browser can allot the right amount of space in the document when the image is loaded.


<img alt="shopify solutions provider" class="lazy" data-src="&lt;?php echo assets_url(" title="shopify solutions provider" />&quot;/&gt;



Never place content over existing content, except in response to user interaction.


Generic Points

There are some common points to improve your Core Web Vitals

Lazy loading image

If you do not set your image as lazy loading, it could create a poor impact on your FCP and LCP.

The lazy loading image is the best feature to improve your FCP and LCP

In the below example, how to use lazy load image on a page

Example:


<script>
function logElementEvent(eventName, element) {
        console.log(Date.now(), eventName, element.getAttribute("data-src"));
      }
      var callback_enter = function (element) {
        logElementEvent(" ENTERED", element);
      };
      var callback_exit = function (element) {
        logElementEvent(" EXITED", element);
      };
      var callback_loading = function (element) {
        logElementEvent(" LOADING", element);
      };
      var callback_loaded = function (element) {
        logElementEvent(" LOADED", element);
      };
      var callback_error = function (element) {
        logElementEvent(" ERROR", element);
        element.src =
          "https://via.placeholder.com/440x560/?text=Error+Placeholder";
      };
      var callback_finish = function () {
        logElementEvent(" FINISHED", document.documentElement);
      };
      var callback_cancel = function (element) {
        logElementEvent(" CANCEL", element);
      };

      window.lazyLoadOptions = {
        threshold: 0,
        // Assign the callbacks defined above
        callback_enter: callback_enter,
        callback_exit: callback_exit,
        callback_cancel: callback_cancel,
        callback_loading: callback_loading,
        callback_loaded: callback_loaded,
        callback_error: callback_error,
        callback_finish: callback_finish
      };
      window.addEventListener(
        "LazyLoad::Initialized",
        
        function (e) {
            window.lazyLoadInstance = e.detail.instance;
        },
        false
      );
    </script>
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>


Example:

<li><div class="insidediv">
                                              
  <a href="shopify-ecommerce-solutions">
  </a>
<div><a href="shopify-ecommerce-solutions"><img alt="shopify solutions provider" class="lazy" data-src="&lt;?php echo assets_url(" title="shopify solutions provider" />&quot;/&gt;
                                                    </a></div><a href="shopify-ecommerce-solutions">
    Shopify eCommerce Solution
     </a></div></li>


Separate CSS/ JS

CSS

  1. If you have used common CSS for all pages then it creates a bad impact on your FCP and LCP. Therefore, separate CSS from all the pages to improve your FCP and LCP.
  2. PurifyCSS is the best tool for Unused CSS.

JavaScript

  1. If your JS is included in either the header page or footer page, it would create a bad impact on your FCP and LCP because some JS scripts are used for a specific page.

Example

  1. If you have added bxslider js in the footer page, the execution time would increase, and performance decrease. Therefore, remove it from the footer page and add this JS when you use image sliding.
Preload Stylesheet Links

To improve the loading speed for a website, you can eliminate element rendering-blocking resource problem just by using rel = “preload” link tag. Thus, your CSS gets minified, and removes errors from Page Speed Insights.

Example

<link as="style" href="&lt;?php echo assets_url(" rel="preload" />&quot; onload=&quot;this.rel=&#39;stylesheet&#39;&quot; /&gt;<link as="style" href="&lt;?php  echo assets_url(" rel="preload" />&quot; onload=&quot;this.rel=&#39;stylesheet&#39;&quot;/&gt;<link href="&lt;?php  echo assets_url(" rel="stylesheet" />&quot; type=&quot;text/css&quot;/&gt;<link as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" onload="this.rel='stylesheet'" rel="preload" /><link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect" /><link as="font" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&amp;display=swap" onload="this.rel='stylesheet'" rel="preload" />


Conclusion

In this blog, we have seen how to improve the Core Web Vitals of your website. In addition to the importance of Core Web Vitals, we have also discussed some generic points for improving the website performance.

Ways to Improve Core Web Vitals of Your Website

Ways_to_Improve_Core_Web_Vitals_of_Your_Website

Table of Content

What are the Core Web Vitals?

Core Web Vitals are a set of essential factors specifically observed by Google to check the global user experience of a web page. Core Web Vitals are formed with four measurements related to the page speed and user interaction. These include: First Contentful Paint, Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

To reflect real-time user experience, Core Web Vitals are applied to all web pages. These must be measured by all site owners and will be surfaced in all Google tools. Each Core Web Vital indicates a distinct side of the user experience.

Core Web Vitals do not work alone, as there are many other measures. After making a lot of research, Google determined a new set called Web Vitals. It is a combination of existing and a new set of measures. The three Core Web Vitals are highly important, and Google specifically asks website owners to keep an eye out for these scores and improve them where they can.

CoreWebVitalsData

Figure: Core Web Vitals Data
 

When you click on the open report in Mobile or Desktop, you can see the issues which caused a bad URL. And resolving those factors can lead you to the improvement of your URL.

CoreWebVitalsData1

There are two types of errors generated in Core Web Vitals

  1. CLS issue more than 0.1s (desktop)
  2. LCP issue longer than 2.5s (desktop)

CoreWebVitalsData2

You can see only 20 URLs in the Core Web Vitals report.

After clicking on the “CLS issue more than 0.1s (desktop)”, then you can see which URL affected the CLS issue. We can discuss these issues in FCP, LCP, CLS, and FID section.

You can see the issues that caused a bad URL by clicking on the open report in Mobile or Desktop. And resolving those issues can lead to an increase in the quality of your URL.

   

Tools

There are two tools used for URL improvements

  1. Page Speed Insights
  2. GT Metrix
Page Speed Insights

You can write this URL https://developers.google.com/speed/pagespeed/insights/ in your address bar

CoreWebVitalsData3

 

Once you enter your URL in the textbox, click on the Analyze.

CoreWebVitalsData4

After click on analyze, your report would get generated and you can simply check your URL if it is poor or good and where it needs an improvement.

CoreWebVitalsData5

CoreWebVitalsData6

Here, this URL has turned out to be a good one.

However, on the flip side, you can improve your URL considering the steps of the FCP, LCP, FID, and CLS sections.

GTmetrix

The GTmetrix works as similar as page speed insights but GTmetrix follows different algorithms for Core Web Vitals.

You can write this URL https://gtmetrix.com/ in your address bar

CoreWebVitalsData7

If you log in to the GTmetrix, you can compare your previous URL performance with recent URL performance.

Now, enter that URL in the textbox and click on Analyze.

CoreWebVitalsData8

You can see a generated report with various grades such as A, B, C, D, E.

CoreWebVitalsData9

Here, this URL is on A-grade, which steps we can follow for the improvement for our URL, you can be following in the FCP, LCP, FID, and CLS section.

As we can see this URL is of A grade. Now let’s discuss in detail the four improvement steps of Core Web Vitals i.e.,

  1. First Contentful Paint (FCP)
  2. Largest Contentful Paint (LCP)
  3. First Input Delay (FID)
  4. Cumulative Layout Shift (CLS)

First Contentful Paint (FCP)

FCP means First Contentful Paint. FCP measures the browser's time to release the first piece of DOM content after a user navigates to your page. To improve speed and user-experience of the website, you have to work on CSS, JS, and HTML files. In simple terms, that's how long it takes for the browser to display any content to the user.


How to improve FCP?

Eliminate render-blocking CSS and JavaScript

A web page is rendered by the browser after setting up many elements such as HTML, CSS, JavaScript, and HTML imports. The browser will first download all the elements from the web page, analyze them all, and then make the web page.

The browser would have received the HTML content when the user requests for a web page, but will always be waiting for any other resources to load before rendering the page. It is called render-blocking resources.

When a script or CSS file from an external source cannot be loaded, your page will stay blank and will not continue to load. Therefore, always ensure that decrepit sources are on your own domain and defer loading non-essential sources as much as possible.

The scripts in the page header are by default read and executed before the page is constructed. It takes a lot of time and is often of no use at all. You can also delay the execution of these scripts to prevent them from blocking page loading. After that, you can easily pass the attribute 'defer' or 'async' to a script. Note that you only delay scripts that are not necessary to load the page.

Reduce TTFB

Time to first byte (TTFB) or server response time occurs between the server and the browser. It is the time it takes for the browser to receive the information requested by the server.

It is divided into three stages: the request, the processing of the request, and the response.

To reduce your TTFB, you can choose a fast hosting provider, using quality CDNs like Cloudflare, and enabling a cache at the website level.

Minify CSS / JS

If your CSS and JS are unminfied, your webpage performance would get decreased and also create a bad impact on your LCP.

UnminifiedCSS

Figure: Unminified CSS
 

When your page reloads and your CSS and JS are minified then it efficiently reduces your execution time and improves performance. When you have minified JS and CSS, you would observe reduced execution time with improved performance while page reloading.

MinifiedCSS

Figure: Minified CSS
 

Here is the link to minify your Unminified CSS and JS. https://unminify.com/

Largest Contentful Paint (LCP)

Largest Contentful Paint is the measure of how long it takes a website to show the user the most comprehensive and interactive on-screen content.

This metric, according to Google, only considers content above the fold, or everything that appears without scrolling.

There's one more thing to consider, and it has to do with the type of content that's being considered. The metric tracks a variety of content types, including images, videos, and text

  1. images;
  2. image tags;
  3. video thumbnails;
  4. background images with CSS;
  5. paragraph and heading text
 

Looking for Trusted Custom Website Development Company ?

Your Search ends here.

 


How do images impact LCP?

Images are typically the largest elements to load on a page, which is why they deserve special attention.

This is also why you have just seen some optimization tips for pictures. After all, they demand many browsers, which can sometimes lead to delays.

You can use webp images instead of jpeg, jpg, png. If you are using webp so you can improve your LCP.

Quick sites are unlikely to provide a poor user experience. LCP is the most important of the many concerns in this regard, according to Core Web Vitals. As a result, continue to monitor and focus on optimizations as needed.


How to optimize LCP?

It’s possible to optimize the Largest Contentful Paint. Tracking is a key part of the routine, but the improvements are working. Frequent tracking is important to make improvements. Take a look at some significant aspects of LCP

Optimize image sizes

Always use images with the right sizing. You can set specific dimensions for the image, either for the desktop or mobile version. Overloading, which can result in a high LCP, is avoided by using the recommended size.

Use an image CDN

A CDN service can make images load faster. ImageEngine is a tool that does all the image matching work, taking into consideration factors like device access, file size, and user location.

Avoid JavaScript to load images

If you load the images through JavaScript, you can remove this script. That helps to prevent any delay, keeping the LCP within the recommended average.

First Input Delay (FID)

First Contentful Paint (FCP) and Largest Contentful Paint (LCP) are two measures of how long it takes to visually paint content on a page. While important, paint times do not consider the responsiveness of the load: or the speed with which a page reacts to user interaction.

First Input Delay (FID) is a Core Web Vitals setting that captures a user's first impression of a website's interactivity and responsiveness. It is the time between when a user interacts with a page for the first time and when the browser is capable of responding to that interaction. FID is a field measure that cannot be simulated in the lab. Actual user interaction is necessary to measure response time.

The FID is recommended by Total Blocking Time (TBT) in the Page Speed Insights. The FID measures different things, if your TBT improves, your FID would also improve.

The primary cause of a Poor FID is heavy JavaScript performance. Optimize the way JavaScript analyzes, compiles, and runs on your webpage will directly reduce FID.

Heavy JavaScript execution

The browser cannot respond to most user entries while it performs JavaScript on the main thread. In other words, the browser cannot respond to user interactions while the primary thread is occupied. This can be improved by:

  1. Break up Long Tasks
  2. Use a web worker
  3. Reduce JS execution time

Cumulative Layout Shift (CLS)

Cumulative Layout Shift or CLS is Google's Core Web Vitals page speed measure. CLS scores measure the visual stability of a webpage. A layout shift occurs each time a visible item changes position between rendered frames.


How to improve CLS?

You can fix your CLS by the following:

Disable sticky headers that move content from top to bottom.

You can always add size attributes to your images and video elements. This approach ensures that the browser can allot the right amount of space in the document when the image is loaded.


<img alt="shopify solutions provider" class="lazy" data-src="&lt;?php echo assets_url(" title="shopify solutions provider" />&quot;/&gt;



Never place content over existing content, except in response to user interaction.


Generic Points

There are some common points to improve your Core Web Vitals

Lazy loading image

If you do not set your image as lazy loading, it could create a poor impact on your FCP and LCP.

The lazy loading image is the best feature to improve your FCP and LCP

In the below example, how to use lazy load image on a page

Example:


<script>
function logElementEvent(eventName, element) {
        console.log(Date.now(), eventName, element.getAttribute("data-src"));
      }
      var callback_enter = function (element) {
        logElementEvent(" ENTERED", element);
      };
      var callback_exit = function (element) {
        logElementEvent(" EXITED", element);
      };
      var callback_loading = function (element) {
        logElementEvent(" LOADING", element);
      };
      var callback_loaded = function (element) {
        logElementEvent(" LOADED", element);
      };
      var callback_error = function (element) {
        logElementEvent(" ERROR", element);
        element.src =
          "https://via.placeholder.com/440x560/?text=Error+Placeholder";
      };
      var callback_finish = function () {
        logElementEvent(" FINISHED", document.documentElement);
      };
      var callback_cancel = function (element) {
        logElementEvent(" CANCEL", element);
      };

      window.lazyLoadOptions = {
        threshold: 0,
        // Assign the callbacks defined above
        callback_enter: callback_enter,
        callback_exit: callback_exit,
        callback_cancel: callback_cancel,
        callback_loading: callback_loading,
        callback_loaded: callback_loaded,
        callback_error: callback_error,
        callback_finish: callback_finish
      };
      window.addEventListener(
        "LazyLoad::Initialized",
        
        function (e) {
            window.lazyLoadInstance = e.detail.instance;
        },
        false
      );
    </script>
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>


Example:

<li><div class="insidediv">
                                              
  <a href="shopify-ecommerce-solutions">
  </a>
<div><a href="shopify-ecommerce-solutions"><img alt="shopify solutions provider" class="lazy" data-src="&lt;?php echo assets_url(" title="shopify solutions provider" />&quot;/&gt;
                                                    </a></div><a href="shopify-ecommerce-solutions">
    Shopify eCommerce Solution
     </a></div></li>


Separate CSS/ JS

CSS

  1. If you have used common CSS for all pages then it creates a bad impact on your FCP and LCP. Therefore, separate CSS from all the pages to improve your FCP and LCP.
  2. PurifyCSS is the best tool for Unused CSS.

JavaScript

  1. If your JS is included in either the header page or footer page, it would create a bad impact on your FCP and LCP because some JS scripts are used for a specific page.

Example

  1. If you have added bxslider js in the footer page, the execution time would increase, and performance decrease. Therefore, remove it from the footer page and add this JS when you use image sliding.
Preload Stylesheet Links

To improve the loading speed for a website, you can eliminate element rendering-blocking resource problem just by using rel = “preload” link tag. Thus, your CSS gets minified, and removes errors from Page Speed Insights.

Example

<link as="style" href="&lt;?php echo assets_url(" rel="preload" />&quot; onload=&quot;this.rel=&#39;stylesheet&#39;&quot; /&gt;<link as="style" href="&lt;?php  echo assets_url(" rel="preload" />&quot; onload=&quot;this.rel=&#39;stylesheet&#39;&quot;/&gt;<link href="&lt;?php  echo assets_url(" rel="stylesheet" />&quot; type=&quot;text/css&quot;/&gt;<link as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" onload="this.rel='stylesheet'" rel="preload" /><link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect" /><link as="font" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&amp;display=swap" onload="this.rel='stylesheet'" rel="preload" />


Conclusion

In this blog, we have seen how to improve the Core Web Vitals of your website. In addition to the importance of Core Web Vitals, we have also discussed some generic points for improving the website performance.