There are mainly 3 aspects when it comes to Web Vitals. If you can improve those aspects, your websites will be fast, improve user experience and it will improve SEO.

WEB VITALS

There are mainly 3 matric criteria to measure Web Vitals which are used by Google.

• LCP (Largest Contentful Paint)

• FID (First Input Delay)

• CLS (Cumulative Layout Shift)

We will talk about those measures in detail.

LCP (Largest Contentful Paint)

As the name suggests, It is that time when your webpage loads and the first largest element gets displayed, the amount of time it took usually gets measured.

Matrics:

How to improve this?

• Image should be optimised, Less use of png, jpeg or jpg as they tend to be larger. Webp is better to use as it is usually more optimised.

• Minified HTML, CSS and JS files will help browsers run those files and it will bring down the LCP time.

• Invest in a better hosting service, as it will help.

• Use CDN which is closer destination hosted.

FID (First Input Delay)

The first Input Delay (FID) is the time after your webpage is fully loaded and the user interacts with your webpage (i.e. clicks a button).

Matrics:

How to improve this?

• Always try to clear the main thread of your Javascript.

• Remove unused javascript code and use smaller chunks of code,

• Use SSR (server-side rendering) when possible,

• Optimise your application's bundle size,

• When possible use static rendering, an example framework will be Gatsby,

• Where possible use Web Workers.

CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) is nothing but the layout shift just after your web page gets loaded. It creates a bad user experience. For example, you are purchasing anything from any eCommerce website and you want to cancel your order and suddenly some layout shifts instead of clicking cancel that button shifts and you click the purchase button and the order is created, this sudden layout shifts are measured by CLS.

Matrics:

How to improve this?

• First, try to use your application as a user and identify the component that creates the shift. You can try tools like Chrome dev tools to identify.

• You can use static fonts to tackle text-related issues.

• you can define the width or height for iframes, img tags and define the aspect ratio.

• Try to avoid animation of box-sizing, box-shadow,

• Avoid using font-swap when you are defining some unusual fonts.

These are the practical ideas you can use to improve LCP, FID and CLS to optimise performances of your web pages.