What Are Core Web Vitals? and how can we improve Core Web Vitals Scores?

Core Web Vitals are a set of specific factors that Google considers important in a webpage’s overall user experience. Core Web Vitals are made up of three specific page speed and user interaction measurements: largest contentful paint, first input delay, and cumulative layout shift.

* there’s no need to freak out. Google said that you have until next year to improve your site’s Core Web Vital scores.

1.) Largest Contentful Paint (LCP):

LCP is how long it takes a page to load from the point of view of an actual user. An ideal LCP measurement is 2.5 seconds or faster.

here are some things you can do to improve your site’s LCP:

=> Remove any unnecessarily third-party scripts

=> Upgrade your web host: Better hosting=faster load times overall (including LCP).

=> Set up lazy loading: Lazy loading makes it so images only load when someone scrolls down your page. Which means that you can achieve LCP significantly faster.

=> Remove large page elements:

=> Minify your CSS: Bulky CSS can significantly delay LCP times.

2.) First Input Delay (FID):

FID technically measures how long it takes something to happen on a page. So in that sense it’s a page speed score. But it goes one step beyond that and measures the time it takes for users to actually do something on your page. An ideal measurement is less than 100 ms.

here are some things you can do to improve your site’s FID scores:

=> Minimize (or defer) JavaScript

=> Remove any non-critical third-party scripts: Just like with FCP, third-party scripts (like Google Analytics, heatmaps etc.) can negatively impact FID.

=> Use a browser cache

3.) Cumulative Layout Shift (CLS):

Cumulative Layout Shift (CLS) is how stable a page is as it loads (“visual stability”). An ideal measurement is less than 0.1.

Here are some simple things you can do to minimize CLS:

=> Use set size attribute dimensions for any media (video, images, GIFs, infographics etc.)

=> Make sure ads elements have a reserved space

=> Add new UI elements below the fold