Introducing the Core Web Vitals for a healthy website

by Marc Radziwill | May 29, 2020 | 3 minutes to read

Read all about the new Core Web Vitals in my blog post. What they are and why you should measure them. Measure them now >>


If you like this article, smile for a moment, please share it, follow me, check out my RSS feed and subscribe to my newsletter.


What are web vitals in why do we need them?

Web vitals is an initiative introduced by Google. It helps us to understand the vitality of our website and to optimize the user experience. The Latter is a crucial indicator of long-term success.

There are many tools for web performance experts, developers, business owners marketers to measure the performance of our websites with different metrics in the lab. Thus the measurement, the optimization and the mapping to business values are quite hard.

Site owners should have some insights into their core web vitals without being a web performance expert. The initiative tries to simplify the web performance area to three core metrics. As a web performance consultant, this might be a bit to too easy because a web performance audit for a company with individual business aims and different tech n*stacks is hard work and can not bis displayed in three metrics.

BUT I think it is essential to sensitize more users and website owner for performance. Introducing "core vitals" to check the core health of your site helps to do so! And the complex field of web performance should be accessible for the website owner.

Tl;dr

In this article, you read about the Core Web Vitals. They are a subset of performance metrics that should make it easier to check the health of your website.

Table of Contents

  1. What are the core web vitals?
  2. How to measure the Core Web Vitals
  3. Conclusion

What are the core web vitals?

Core Web Vitals are a subset of performance metrics that help to understand the performance of your website. These metrics apply to all websites, should be measured and are implemented in all standard performance tools.

Each of the metrics is measurable in the real world. Field measurement means that you collect real data from the users that visit your site. It is called Real User Measurement (RUM) and is a crucial indicator for collection performance information.

Currently, the core vitals contain three metrics, but we can expect that this changes in the future. Even the way the algorithms gather their metric values might change. This announcement is reason enough to measure the core vitals of your site continuously.

Which metrics belonged to the core vitals?

The Core Vitals subset cover three fields of web performance shown in three metrics and the web vitals metrics thresholds.

Largest Contentful Paint (LCP)

The LCP measures loading performance. YourLCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID)

FID measures interactivity. Pages should have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS)

CLS measures visual stability. Pages should maintain a CLS of less than 0.1.

Slow website and no clue why?

Get your free web performance checklist with personal feedback

Only until the end of July 2020!

Invest in your human capital and become a performance expert in only 7 modules.

What you get:

How to measure the Core Web Vitals?

Tools to measure

Google provide the reported metrics in all popular tools. Including the speed insights search console, the page speed insights See the table below:

FCLFIDCLS
WebPageTest.orgxxx
Chrome User Experience Reportxxx
PageSpeed Insightsxxx
Search Console (Core Web Vitals report)xxx

Web vitals from Webpagetest.org and web.dev

Webpagetest.org

Core Web Vitals from Webpagetest.org

web.dev

Core Web Vitals from web.dev/measure

Measure Core Web Vitals in JavaScript

The Google Chrome team published a JavaScript library which you can use a simple implement. It is production-ready, and you can connect it to your analytics.

Add web-vitals to your project

You can install this library from npm by running:

1npm install -S web-vitals

If you don't want to use npm you can install the script via a CDN. Please see the instructions.

You can test the script by logging the values to the console.

1import { getCLS, getFID, getLCP } from 'web-vitals';
2
3getCLS(console.log, true);
4getFID(console.log); // Does not take a `reportAllChanges` param.
5getLCP(console.log, true);

Send Core Vitals to custom analytics

Let's assume your analytics is running under the following endpoint: /analytics. You can send a beacon with this script:

1import { getCLS, getFID, getLCP } from 'web-vitals';
2
3function sendToAnalytics(metric) {
4 const body = JSON.stringify(metric);
5 // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
6 (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
7 fetch('/analytics', { body, method: 'POST', keepalive: true });
8}
9
10getCLS(sendToAnalytics);
11getFID(sendToAnalytics);
12getLCP(sendToAnalytics);

Send Core Vitals to Google Analytics

The following code examples show how to send your metrics to Google Analytics.

For analytics.js

1import { getCLS, getFID, getLCP } from 'web-vitals';
2
3function sendToGoogleAnalytics({ name, delta, id }) {
4 // Assumes the global `ga()` function exists, see:
5 // https://developers.google.com/analytics/devguides/collection/analyticsjs
6 ga('send', 'event', {
7 eventCategory: 'Web Vitals',
8 eventAction: name,
9 // Google Analytics metrics must be integers, so the value is rounded.
10 // For CLS the value is first multiplied by 1000 for greater precision
11 // (note: increase the multiplier for greater precision if needed).
12 eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
13 // The `id` value will be unique to the current page load. When sending
14 // multiple values from the same page (e.g. for CLS), Google Analytics can
15 // compute a total by grouping on this ID (note: requires `eventLabel` to
16 // be a dimension in your report).
17 eventLabel: id,
18 // Use a non-interaction event to avoid affecting bounce rate.
19 nonInteraction: true,
20 });
21}
22
23getCLS(sendToGoogleAnalytics);
24getFID(sendToGoogleAnalytics);
25getLCP(sendToGoogleAnalytics);

For gtag.js

1import { getCLS, getFID, getLCP } from 'web-vitals';
2
3function sendToGoogleAnalytics({ name, delta, id }) {
4 // Assumes the global `gtag()` function exists, see:
5 // https://developers.google.com/analytics/devguides/collection/gtagjs
6 gtag('event', name, {
7 event_category: 'Web Vitals',
8 // Google Analytics metrics must be integers, so the value is rounded.
9 // For CLS the value is first multiplied by 1000 for greater precision
10 // (note: increase the multiplier for greater precision if needed).
11 value: Math.round(name === 'CLS' ? delta * 1000 : delta),
12 // The `id` value will be unique to the current page load. When sending
13 // multiple values from the same page (e.g. for CLS), Google Analytics can
14 // compute a total by grouping on this ID (note: requires `eventLabel` to
15 // be a dimension in your report).
16 event_label: id,
17 // Use a non-interaction event to avoid affecting bounce rate.
18 non_interaction: true,
19 });
20}
21
22getCLS(sendToGoogleAnalytics);
23getFID(sendToGoogleAnalytics);
24getLCP(sendToGoogleAnalytics);

For Google Tag Manager

1import { getCLS, getFID, getLCP } from 'web-vitals';
2
3function sendToGTM({ name, delta, id }) {
4 // Assumes the global `dataLayer` array exists, see:
5 // https://developers.google.com/tag-manager/devguide
6 dataLayer.push({
7 event: 'web-vitals',
8 event_category: 'Web Vitals',
9 event_action: name,
10 // Google Analytics metrics must be integers, so the value is rounded.
11 // For CLS the value is first multiplied by 1000 for greater precision
12 // (note: increase the multiplier for greater precision if needed).
13 event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),
14 // The `id` value will be unique to the current page load. When sending
15 // multiple values from the same page (e.g. for CLS), Google Analytics can
16 // compute a total by grouping on this ID (note: requires `eventLabel` to
17 // be a dimension in your report).
18 event_label: id,
19 });
20}
21
22getCLS(sendToGTM);
23getFID(sendToGTM);
24getLCP(sendToGTM);

Conclusion

You find all examples of this article on the Github repository of web-vitals.

In this post, I explained the importance of the core web vitals, how you measure them in different ways and how you can send them to your custom reporting tool.

If you like this article, smile for a moment, share it, follow me, check out my RSS feed and subscribe to my newsletter.

Cheers Marc