Web Vitals • 3 min read

How to Collect and Analyze Web Vitals from Next.js for Page Experience

How to Collect and Analyze Web Vitals from Next.js for Page Experience

Google's Web Vitals project is becoming the standard for measuring page experience. As of version 9.4 of Next.js, the framework provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.

Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value. It includes Core Web Vitals, which is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

~ Understanding Google Page Experience | Google Search Central

Google has announced that page experience signals will be included in Google Search ranking, rolling out gradually in 2021.

Next.js is a framework for React, providing an awesome developer experience. It standardizes development and distribution of hybrid static sites and server side rendering. Version 9.4 and up offers exciting features including performance and page experience analytics outlined in this post.

Monitoring Web Vitals in Next.js

In the post linked below, you can find steps to setup an account with Foo and monitor Web Vitals. We'll take this further, specifically for Next.js.

How to Track and Analyze Web Vitals to Boost SEO: Getting Started
A guide for getting started with Web Vitals. With our simple integration you can collect, track and analyze Web Vitals data in charts with filtering options by OS, browser and device.

If your website is built with Next.js, the steps are even easier for collecting and analyzing Web Vitals. The Web Vitals library is included out of the box! Next.js exposes a new method called reportWebVitals that provides a designated part of code where we can collect Core Web Vitals metrics and do what we like with them, as explained in Next.js docs. By combining the solution from the docs with Foo's Web Vitals service, we can use code similar to the below to collect Web Vitals metrics and send them via Foo's REST API.

// pages/_app.js
const YOUR_ACCOUNT_ID = 'abcdefg';
const VITALS_URL = 'https://www.foo.software/api/vitals';

export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    const body = JSON.stringify({
      accountId: YOUR_ACCOUNT_ID,
      name: metric.name,
      url: window.location.href,
      value: metric.value,
    });
  
    return (
      (
        navigator.sendBeacon
        && navigator.sendBeacon(VITALS_URL, body)
      ) || fetch(VITALS_URL, {
        body,
        method: 'POST',
        keepalive: true,
        headers: {
          'Content-Type': 'application/json',
        },
      })
    );
  }
}

In the above code, you would simply replace YOUR_ACCOUNT_ID with your account ID on Foo per instructions in the this article. Note these points about the code above:

  1. Next.js provides Web Vitals metrics out of the box from the argument of the reportWebVitals method. It holds custom metrics, but at the moment we're only concerned about Web Vitals. We use metric.label === 'web-vital'  to validate.
  2. From within the if block noted above, we can do anything with the metric object. In this example we send the data to Foo's API to be stored and available in Foo's dashboard. You could replace this with a custom solution or send to a different service, but why would we recommend that :D
  3. We attempt to send the data with the browser navigator.sendBeacon method but fallback to fetch if sendBeacon isn't supported. With the sendBeacon method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. Read more about sendBeacon on MDN.

By adding the above code to your Next.js website, you can now analyze and monitor your Web Vitals metrics over time on Foo!

Web Vitals on Foo
Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed
Next.js

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed

With our website redesign we revamped our technology stack. This post reviews choices including Next.js, GraphQL, MUI (Material UI), and TypeScript.

Read more

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience
foo

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience

An overview of the newly released version of www.foo.software, a website leveraging Lighthouse, Web Vitals and Binoculars tools to provide page experience testing services.

Read more

A New Lighthouse REST API to Automate Testing for a New Day in SEO
REST

A New Lighthouse REST API to Automate Testing for a New Day in SEO

As Google continues steps towards a new search algorithm change focused on page experience, Foo has released version 2 of its REST API to automate Lighthouse testing. This post provides examples of how to use each of the new REST API endpoints to manage pages and Lighthouse audits on Foo.

Read more