Core Web Vitals

"At the end of the day is how the user remembers the experience. Focus on user experiences" - By Shawn Borsky.

What is Core Web Vitals?

Every user desires to choose a site which is more user-friendly with an outstanding page-experience. To measure the user experience of a site on the web, Google announced Core Web Vitals in April 2020, the most trending website ranking signal.

With the existing metrics such as page loads, mobile-friendliness, security, rendering etc. they have added a variety of new metrics to measure the speed, responsiveness and visual stability of the site through which the web developers can optimize the user-experience.

Site managers need not check other metrics to really understand how their website is performing for their users, these new vital metrics could point them if their website is lagging through the reports provided by Google. Improving these metrics one could improve user experience and draw the attention of their users towards their site.

The insights used in Core Web Vitals and the report would be useful to developers to optimize the performance-related issues through which they can improve their ranking in the google search results.

Here are the three Web Vitals that are the measured as the Core Web Vitals for understanding performance of your site:

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

Largest Contentful Paint (LCP)
Every user would prefer a site which has been loaded quickly since they would like to see the content as quickly as possible. This is used to ascertain that the major elements have been rendered on the screen such as images, headings, videos etc. appropriately. The largest contentful element that is painted in the viewport is the primary element and the time it has taken to load from the DOM is the Largest Contentful Paint.

To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

(Loading)

First Input Delay (FID)
It is the length of the time measured in milliseconds between when the user first interacted with your site such as scrolling the page, clicking any buttons or links etc.. and the response time of the browser to that interaction. It captures the user's interactivity and responsiveness of any site and an actual user interaction must be necessary to measure the delay in the responses. FID varies based on the size and complexity of the JavaScript execution. The delay in browser responses worsens the user experience and to reduce them long-running tasks could be split into small tasks, reduce the bundle size and you can also use server-side rendering.

Some examples of the Input Delay are:

Scrolling through to the next section in your site
Opening the burger menu on mobile devices
Inputting a text field such as your email address
Navigating a site by clicking a link

To provide a good user experience, pages should have a FID of less than 100 milliseconds

(Interactivity)

Cumulative Layout Shift (CLS)
In simple words, CLS is nothing more than an interaction that has happened abruptly due to the instability of any web page. It measures the unexpected layout shift which occurs when any content on the page's action without any prior user interaction. The CLS score of a web page in every site is assessed from 0-1. This often happens by elements like embeds, ads, and iframes which don't have any dimensions.

CLS score is computed by multiplying the screen share that shifted out of the blue by the distance it travelled. (CLS = Impact Fraction x Distance Fraction)

To provide a good user experience, pages should maintain a CLS of less than 0.1.

(Visual Stability)

Collecting Core Web Vitals

Google has open sourced the JavaScript package to collect web vitals metrics. Github: https://github.com/GoogleChrome/web-vitals

Following snippet will get the web vitals metrics and send it to Google analytics.

import {getCLS, getFID, getLCP} from 'web-vitals';


function sendToGoogleAnalytics({name, delta, id}) {
  
  // Assumes the global `ga()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/analyticsjs
  ga('send', 'event', {
      
    eventCategory: 'Web Vitals',
      
    eventAction: name,
      
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
      
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    eventLabel: id,
      
    // Use a non-interaction event to avoid affecting bounce rate.
    nonInteraction: true,
      
    // Use `sendBeacon()` if the browser supports it.
    transport: 'beacon',
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

If you are looking for simpler solution, you can use Atatus to collect web vitals along with all other frontend metrics.

Improving Core Web Vitals

Find using Google Search Console the URLs which are in poor and needs improvement, as well as, you can do the same in Atatus too. Below are the few points which you can use to improve some of these vitals:

Improve your site’s LCP:

Unwanted Third-Party Scripts: From the sessions you should be able to find out unnecessary third party scripts that are loading and removing them will increase your overall LCP.
Serving Web Host: The server that is serving your web site matters a lot. A powerful server could improve your performance tremendously. Of course, for this to work, you first have to measure your server to see whether that is really the bottleneck. You can use Atatus APM & Infrastructure monitoring in this case.
Lazy Loading: Load the images only when someone scrolls down your page. This is called lazy loading and this will make sure that your server works to deliver the LCP first before the rest of the content.
Consuming Page Elements: Using Google Chrome Developer tools you can figure out which elements of your page are slowing down your website and see which can be optimized.

Improve your site’s FID scores:

Async Third-Party Scripts: Like LCP, FID also could be affected by Third-Party scripts. To improve this, you can load the scripts asynchronously, which you deem not so critical for the initial user interaction.
JavaScript Loading: A factor that could delay your FID is if the browser is still loading JS on your site, then the browser would not allow the user to interact while it is loading. Minimizing or deferring the javascript could pave way for the user to start interacting with your website.
Browser Local Storage: Loading from your local system could make your website load significantly faster compared to always loading from your server. Use caching as much as possible to improve this.

Minimizing CLS:

Keep below the fold: If we keep the UI elements such as buttons below the fold, then they do not move the content and the user can visualize the page as it should be.
Reserved space for ads elements: Reserving the space for the ads will avoid sudden page changes and pushing the the content aside.
Size attribute for media: Limit the size of the media attributes. By doing this, you can define how the page will look like. Doing so would render your page without changing it as the page loads.

Conclusion

A good SEO would increase traffic towards your site and ranking in google search results. With the search algorithm, Google has added Core Web Vitals with an outstanding metrics using which any organization can get to know the performance-related issues which could be optimized by the developers to deliver the best site for the users.

Since Google will be using the Core Web Vitals (CWV) also in their ranking system, it would be critical for all organizations to measure and optimize their site with the report generated using these web vitals.

Try Atatus for Free to monitor Core Web Vitals metrics - https://www.atatus.com/