This guide shows you how to track your website's Core Web Vitals on Layer0 in real time using real user monitoring (RUM).

As of May 2021, Google will begin ranking websites based on a set of performance metrics called Core Web Vitals. This change effectively makes site performance an SEO ranking factor. Websites with good Core Web Vitals may be placed higher in search results, while those with poor Core Web Vitals may be placed lower.

Unlike Lighthouse performance scores which are based on synthetic tests, Core Web Vitals scores are based on measurements from real users of Chrome as reported in the Chrome User Experience Report. Core Web Vitals can be tracked via Google Search Console and PageSpeed Insights. Optimizing Core Web Vitals using the official tools presents a number of challenges:

  • It can take days to weeks to see the affect that changes to your site have on Core Web Vitals.
  • It's hard to diagnose Core Web Vitals by page type or URL.
  • It's impossible to A/B test the impact of site optimizations on Core Web Vitals. Note that to effectively A/B test performance optimizations you need both a RUM measurement tool and split testing at the edge, both of which Layer0 provides.

Instead of relying solely on Google Search Console, we recommend tracking Core Web Vitals using Layer0 so that you can:

  • See how changes to your site impact Core Web Vitals in real time
  • Correlate web vitals to your application's routes
  • Analyze score across a number of dimensions such as country, device, and connection type
  • Identify which pages are most negatively impacting your search ranking.
  • Use Layer0's Edge based split testing to A/B test the impact of performance optimizations on Core Web Vitals.

In order to start tracking Core Web Vitals on Layer0, you need add the @layer0/rum client library to your application. There are a number of ways to do this:

To add Core Web Vitals tracking via a script tag, add the following to each page in your application:

<script defer>
  function initRum() {
    new Layer0.Metrics({
      token: 'your-token-here', // get this from https://app.layer0.co
    }).collect()
  }
</script>
<script src="https://rum.layer0.co/latest.js" defer onload="initRum()"></script>

<script>
  function initMetrics() {
    new Layer0.Metrics({
      token: 'your-token-here', // get this from https://app.layer0.co
    }).collect()
  }
  var rumScriptTag = document.createElement('script')
  rumScriptTag.src = 'https://rum.layer0.co/latest.js'
  rumScriptTag.setAttribute('defer', '')
  rumScriptTag.type = 'text/javascript'
  rumScriptTag.onload = initMetrics
  document.body.appendChild(rumScriptTag)
</script>

To install the Core Web Vitals library using npm, run:

npm install --save @layer0/rum

Or, using yarn:

yarn add @layer0/rum

Then, add the following to your application's browser bundle:

import { Metrics } from '@layer0/rum'

new Metrics({
  token: 'your-token-here', // get this from https://app.layer0.co
}).collect()

You can tie URLs to pages templates by providing an optional router parameter to Metrics.

When installing @layer0/rum using a script tag, use:

new Layer0.Metrics({
  // get this from https://app.layer0.co
  token: 'your-token-here',

  // assign a page label for each route:
  router: new Layer0.Router()
    .match('/', ({ setPageLabel }) => setPageLabel('home'))
    .match('/p/:id', ({ setPageLabel }) => setPageLabel('product'))
    .match('/c/:id', ({ setPageLabel }) => setPageLabel('category')),
}).collect()

When installing @layer0/rum via NPM or Yarn use:

import { Router } from '@layer0/rum/Router'
import { Metrics } from '@layer0/rum'

new Metrics({
  // get this from https://app.layer0.co
  token: 'your-token-here',

  // assign a page label for each route:
  router: new Router()
    .match('/', ({ setPageLabel }) => setPageLabel('home'))
    .match('/p/:id', ({ setPageLabel }) => setPageLabel('product'))
    .match('/c/:id', ({ setPageLabel }) => setPageLabel('category')),
}).collect()

The router supports the same pattern syntax as Express. More information on routing syntax.

For non single page applications (e.g. traditional "multi-page apps"), you can also explicitly set the page label by passing a pageLabel property during initialization. An example is shown below where the pageLabel is pulled from document.title:

<script>
  function initMetrics() {
    new Layer0.Metrics({
      token: 'your-token-here',
      pageLabel: document.title ? document.title : "(No title)",
    }).collect();
  }
  var rumScriptTag = document.createElement('script');
  rumScriptTag.src = "https://rum.layer0.co/latest.js";
  rumScriptTag.setAttribute("defer", "");
  rumScriptTag.type = "text/javascript";
  rumScriptTag.onload = initMetrics;
  document.body.appendChild(rumScriptTag);
</script>

Additionally, you can tie the following data to Core Web Vitals:

new Layer0.Metrics({
  // Rather than providing a router, you can also define the page label for each page explicitly.
  // Use this option if it is more convenient to add the script tag to each page template individually
  // rather than adding it to the main application template.
  pageLabel: 'home',

  // When running a split test, use this field to specify which variant is active.
  // This is automatically set for sites that are deployed on Layer0.
  splitTestVariant: 'name-of-variant',

  // The version of your application that is running.
  appVersion: 'v1.0.0',

  // Whether or not the page was served from the CDN cache, if this is known.
  // This is automatically set for sites that are deployed on Layer0.
  cacheHit: true | false,

  // The country code in which the browser is running. This is often provided by CDNs
  // as a request header that can be embedded in your script tab by your application code.
  // This is automatically set for sites that are deployed on Layer0.
  country: 'US',
})