Tracking and analyzing Web Vitals on Foo is very simple. All you'll need is access to the front-end code of your website. In this post I'll go over what Web Vitals are and how we can track these metrics with Foo.

What are Web Vitals?

The following metrics encompass Web Vitals as defined at the time of this writing.

  • First Contentful Paint (FCP) measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
  • First Input Delay (FID) measures the time from when a user first interacts with a page to the time when the browser is able to respond to that interaction.
  • Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.
  • Time to First Byte (TTFB) is the time that it takes for a user's browser to receive the first byte of page content.
  • Cumulative Layout Shift (CLS) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames.

Why are Web Vitals Important?

In recent years, Lighthouse, an open-source automated tool for improving the quality of web pages, became widely adopted as an industry standard.

Now another Google project called Web Vitals has emerged, deriving metrics from real users in a way that accurately matches how they're measured by Chrome and reported to other Google tools.

With it, we can establish page experience perspective from an SEO point of view, analyze, and adjust accordingly. 👌

Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools. Each of the Core Web Vitals represents a distinct facet of the user experience, is measurable in the field, and reflects the real-world experience of a critical user-centric outcome.
Web Vitals
Essential metrics for a healthy site

How to Collect and Analyze Web Vitals with Foo

To implement a Web Vitals integration you can follow the below steps.

  1. Choose a plan and register if you haven't already. You'll need to choose a plan with a "Web Vitals" badge. If you already have an account, you may need to upgrade to a plan that supports Web Vitals which you can do from the dashboard page.
  2. Retrieve your account ID from the account settings page.
  3. Follow the instructions in the Web Vitals GitHub project to setup the web-vitals library and send results to an analytics endpoint.
  4. Update the code example from above to send results to Automated Lighthouse Check's API as shown below. Replace ACCOUNT_ID should be your Automated Lighthouse Check account ID.
import {getCLS, getFID, getLCP} from 'web-vitals';

function collectVitals(metric) {
  fetch('https://www.foo.software/api/vitals', {
    body: JSON.stringify({
      accountId: ACCOUNT_ID,
      name: metric.name,
      url: window.location.href,
      value: metric.value
    }),
    keepalive: true,
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    }
  });
}

getCLS(collectVitals);
getFID(collectVitals);
getLCP(collectVitals);

How to View and Analyze Web Vitals as Chart Visualizations

Foo's Web Vitals API will collect data at a maximum rate of once per minute. Not only does the API collect Web Vitals data, but also operating system, browser, and device info. By logging into your account and navigating to the dashboard you'll be able to choose URLs to drill into and see charts for the metrics. You can filter results by OS, browser, and device. You'll be presented with a detailed chart of all results for a day and a chart showing daily averages for each metric.

Web Vitals dashboard