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, Web Vitals 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
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