Introducing Edgio Applications v7. Find out what's new.
Edgio
Edgio

Core Web Vitals

This guide shows you how to track your website’s Core Web Vitals on Edgio in real time using real user monitoring (RUM).
Edgio tracks Core Web Vitals for Chromium-based browsers and Firefox.

What are Core Web Vitals?

In May of 2021, Google began ranking websites based on a set of performance metrics called Core Web Vitals. This change effectively made 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 effect of changes to your site on Core Web Vitals.
  • It’s hard to diagnose Core Web Vitals by page type or URL.

Why use Edgio to track Core Web Vitals?

The benefits of using Edgio instead of Google Search Console to track Core Web Vitals are that it allows you to:
  • 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.

Installing Real User Monitoring (RUM)

Tracking Core Web Vitals on Edgio requires adding the @edgio/rum client library to your application. The Edgio Console provides information on how to install this library using a script tag, Google tag manager, npm, and yarn.
To view @edgio/rum installation instructions
  1. Load the Core Web Vitals page.
    1. From the Edgio Console, select the desired private or team space.
    2. Select the desired property.
    3. From the left-hand pane, select the desired environment from under the Environments section.
    4. From the left-hand pane, select Core Web Vitals.
  2. Click on the tab for the desired installation method.
    RUM Package Installation
    The Edgio Console provides installation instructions that contain a token that is specific to your property.

Script Tag and Google Tag Manager

Add Core Web Vitals tracking by adding the following code to each page in your application:
Script
1<script defer>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>' // Get your token from the Edgio Console
5    }).collect()
6  }
7</script>
8<script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>

NPM or Yarn

Install the Core Web Vitals library using npm or yarn by running the following command:
Bash
1npm install --save @edgio/rum
Add the following code to your application’s browser bundle:
JavaScript
1import {Metrics} from '@edgio/rum';
2

3new Metrics({
4  token: '<TOKEN>', // Get your token from the Edgio Console
5}).collect();

Tie URLs to Page Templates

Tie URLs to page templates by passing an optional router parameter to Metrics.
Define page labels by adding a route for each page template:
Bash
1<script defer>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>', // Get your token from the Edgio Console
5

6      // assign a page label for each route
7      router: new Edgio.Router()
8        .match('/', ({ setPageLabel }) => setPageLabel('home'))
9        .match('/p/:id', ({ setPageLabel }) => setPageLabel('product'))
10        .match('/c/:id', ({ setPageLabel }) => setPageLabel('category'))
11    }).collect()
12  }
13</script>
14<script src="https://rum.edgio.net/latest.js" defer onload="initEdgioRum()"></script>
Learn more about route 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:
JavaScript
1<script>
2  function initEdgioRum() {
3    new Edgio.Metrics({
4      token: '<TOKEN>', // Get your token from the Edgio Console
5      pageLabel: document.title ? document.title : "(No title)",
6    }).collect()
7  }
8  var rumScriptTag = document.createElement('script')
9  rumScriptTag.src = 'https://rum.edgio.net/latest.js'
10  rumScriptTag.setAttribute('defer', '')
11  rumScriptTag.type = 'text/javascript'
12  rumScriptTag.onload = initEdgioRum
13  document.body.appendChild(rumScriptTag)
14</script>

Track Additional Data

You can tie the following data to Core Web Vitals:
JavaScript
1new Edgio.Metrics({
2  // Rather than providing a router, you can also define the page label for each page explicitly.
3  // Use this option if it is more convenient to add the script tag to each page template individually
4  // rather than adding it to the main application template.
5  pageLabel: 'home',
6

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

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

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