Web Vitals • 4 min read

How to Track and Analyze Web Vitals to Boost SEO: Getting Started

How to Track and Analyze Web Vitals to Boost SEO: Getting Started

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.
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

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

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

Google's Web Vitals is becoming the standard for measuring page experience. As of version 9.4 of Next.js, it 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.

Read more