Core Web Vitals Guide

Google measures your vitals each time a Chrome user visits your site (via the User Experience Report).

The three main (or core) Web Vitals are:

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

These are user-centric metrics serve as Google's best attempt at finding metrics that convey a positive user experience.

How do I track Web Vitals?

In Next.js

If you're using Next.js to build your site, you have automatic Web Vitals tracking built in (on versions 9.4+).

To capture these vitals, it's as simple as adding this snippet to your `pages/_app.js`:

  export function reportWebVitals(metric) {
    // These metrics can be sent to any analytics service
    console.log(metric)
  }
  

This snippet will monitor real user data as they load your site. This is a somewhat new approach in the performance monitoring field called Real User Monitoring (RUM).

In Nuxt

There's a Nuxt build module that supports sending your vitals to Google Analytics as custom events. Simply install the plugin and add it to your `nuxt.config.js`. Note: the install instructions are different for versions < v2.9.

npm i --save-dev nuxt-vitals

Check out nuxt-vitals on GitHub.

In Gatsby

Gatsby has a great plugin ecosystem. There's a very similar plugin for sending vitals to Google Analytics. Simply install the plugin and modify your `gatsby-config.js`.

npm i gatsby-plugin-web-vitals

Check out gatsby-plugin-web-vitals on GitHub.

Everywhere else

Google is simplifying its metrics across the board. These new Core Web Vitals are in about every performance monitoring tool Google makes.

This means there are plenty of tracking options to choose from:

• Page audits (Lighthouse and PageSpeed Insights)
• A Chrome extension
• Google Search Console
• Manual tracking

I created a more detailed overview of these tracking options.

Why do Core Web Vitals matter?

Core Web Vitals were created with the intention to align user experience, performance monitoring, and search ranking.

Because Google is driving adoption of these metrics everywhere, expect your Lighthouse audit, search rank, and user experience to rely on Core Web Vitals.

Google stated in a blog post that Core Web Vitals won't play a part in Page Rank until early 2021.

While that does give you some time to prepare, really only CLS is a new metric.

LCP and FID are directly tied to other existing metrics Google uses for Page Rank already. LCP is very closely tied to First Contentful Paint (FCP). FID is very closely tied to Time to Interactive (TTI).

By improving your Core Web Vitals, you're improving your current UX while future-proofing your site's SEO.