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?

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. Google has provided a number of tools over the years to measure and report on performance.

~ Web Vitals (web.dev)

  • What is FCP? 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.
  • What is FID? 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.
  • What is LCP? Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.
  • What is TTFB? Time to First Byte (TTFB) is the time that it takes for a user's browser to receive the first byte of page content.
  • What is CLS? 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 Analyze Page Experience with Lighthouse, CrUX and Foo

Foo provides Lighthouse as a service with automated monitoring and exposes Web Vitals data via Chrome User Experience Report (CrUX). You can checkout demos and register for an account here.

Lighthouse + Web Vitals

How to Analyze Web Vitals With Foo

For a wider range of Web Vitals data provided in real time, Foo offers a service. This could be helpful if your URLs are not included in the CrUX dataset or you want to see a fresh, full representation.

To get started follow the steps below:

  1. Register for a Web Vitals account on Foo.
  2. Once registered, and logged in, add URLs in the dashboard to be included in Web Vitals reporting.
  3. In the navigation, click into your account page and retrieve the account ID.
  4. Add the Web Vitals library in your website's JavaScript code and functions to collect data similar to what is documented here, but replace the endpoint with Foo's API endpoint path (https://www.foo.software/api/vitals) and your account ID. Below is a full example of a JavaScript snippet to embed on your web page... just make sure to replace YOUR_ACCOUNT_ID with your account ID.
<script defer src="https://unpkg.com/web-vitals"></script>
<script>
const YOUR_ACCOUNT_ID = 'abcdefg';
const VITALS_URL = 'https://www.foo.software/api/vitals';

function postVitals(metric) {
  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',
      },
    })
  );
};

addEventListener('DOMContentLoaded', function() {
  webVitals.getCLS(postVitals);
  webVitals.getFCP(postVitals);
  webVitals.getFID(postVitals);
  webVitals.getLCP(postVitals);
  webVitals.getTTFB(postVitals);
});
</script>

5. Within a few minutes you should see Web Vitals data in your dashboard! Navigate to your dashboard and click on the "Web Vitals" button for a given URL (screenshot below).

Foo URL dashboard
Foo Web Vitals dashboard

Visualizing Web Vitals Metrics in Data Studio

Foo's dashboard might be sufficient for viewing Web Vitals data, but if you or your team prefers presenting and sharing data in Google Slides and / or Data Studio, you can utilize our Web Vitals Data Studio Connector!

Web Vitals Data Studio Connector: View and Analyze Web Vitals Charts
A guide to use Data Studio for visualizing Web Vitals data. Get started with our Data Studio connector to view and analyze beautiful charts.
automated website Lighthouse testing
Automate Website Quality Testing
Run Lighthouse automatically to test and monitor web page experience with Foo. With our monitoring solutions, create a history of reporting to stay on top of website performance and SEO. Learn more