Crystallize logo

Measuring Core Web Vitals

Google has just released the core web vitals which is a set of metrics to measure the quality of user experience on a website by quantifying the core web vital metrics. This is yet another move from Google that focuses on website performance and user experience.

Measuring core web vitals Crystallize

What are Core Web Vitals?

The core metrics used to measure the quality of the user experience include loading experience, interactivity, and visual stability of page content are the core web vitals. These are the core metrics that make out the new web vitals metrics.

To keep good metrics on the combined core web vitals you should stay within 75 percentile of page loads on desktop and mobile on the following three metrics: 

  • Largest Contentful Paint, LCP: measures loading performance with the perceived time the main content of the page is likely loaded content. Should be less than 2.5s
  • First Input Delay, FID: measures interactivity. The time it takes before the user can provide input. Should be under 100ms.
  • Cumulative Layout Shift, CLS: measures visual stability. The layout should be as visually stable and keep a CLS of less than 0.1.

Measuring Core Web Vitals

You can measure the core web vitals using the web vitals open source library or you can use the Chrome web vitals browser extension which requires no coding from your side.

The web vitals extension is super useful to monitor the health of your website and you can easily include this in your automatic testing to ensure metrics are always in the 75 percentile at least. You get a green or red square next to the location bar. When you click on it you also see the details of the core web vitals instantly. Super nice.

Core web vitals browser extension