Web Vitals • 4 min read

How to Monitor Page Experience with Web Vitals

How to Monitor Page Experience with Web Vitals

As Google search becomes more reliant on page experience, Foo can help ensure best SEO results by monitoring your websites automatically all day. This post explains how to monitor page experience utilizing the Web Vitals library to gather metrics and Foo as a service to receive metric data and surface in a UI. Foo surfaces all Web Vitals metrics; Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), First Contentful Paint (FCP), First Input Delay, and Time to First Byte (TTI).

The below assumes you've created an account on www.foo.software that supports Web Vitals and are logged in.

Add the JavaScript Snippet to Your Website

Navigate to the API tab in your account where you will find a JavaScript snippet to add to your website. Typically, you'll want to add this snippet in the <head /> block of the document. This snippet loads the Web Vitals library and adds a function to send Web Vitals data to Foo's API via sendBeacon method if supported, otherwise falls back to fetch.

If using Next.js, you'll most likely want to utilize the reportWebVitals function as documented in the post linked below.

How to Collect and Analyze Web Vitals from Next.js for Page Experience
This post illustrates how to collect and analyze Web Vitals metrics from Next.js. If you use Next.js and care about page experience, this post is for you.

Adding Pages to Collect Web Vitals Metrics

In order to enable pages to have metrics collected, they need to be explicitly added on Foo. We do this to avoid storing an infinitely high volume of pages that may be irrelevant. In the "Account" dropdown of the top main navigation, choose "Page Management" or navigate directly to https://www.foo.software/dashboard/pages/manage.

Page Management Dashboard

Note: the example above illustrates an account with both Lighthouse and Web Vitals enabled, hence the fields unrelated to Lighthouse.

By default, page URLs will be loosely matched during data collection. For example, if you define a URL like https://www.foo.software/web-vitals, and a user navigates to https://www.foo.software/web-vitals?foo=bar&hello=world - Web Vitals data will be stored for the https://www.foo.software/web-vitals URL defined page. By toggling on the "only track exact URL", Web Vitals data will only be collected on requests to URLs that strictly match what is defined.

Managing Pages to Collect Web Vitals Metrics

In the manage section at the bottom of page management you can edit or delete pages via pencil icon (edit) and trash icon (delete) respectively. By populating the search bar, you can filter pages by URL or name.

Managing Pages on Foo

Viewing Web Vitals in the Page Dashboard

In the account dropdown menu from the main navigation at the top, choose "Pages" or navigate directly to https://www.foo.software/dashboard/pages.

Viewing Pages on Foo

The pages dashboard is the entry point to view Web Vitals results of pages you've added on Foo. By default we show the "primary" page (as configured in the above sections).

At the top we display basic info about the page. From the sub-navigation at the top right, you can switch device to show results for ("desktop" or "mobile"), add pages, edit the current page, or search for other pages.

Page Dashboard - Sub-navigation

Page Dashboard: CrUX Section

The CrUX section displays data Google has gathered from website pages it determines to have significant traffic. At the time of this writing it's unclear how Google makes this determination, but it is clear that not all pages will have data. www.foo.software hasn't made the cut yet apparently 🥺. Data is based on the 75th percentile of page loads. Refer to Chrome User Experience Report (CrUX) documentation to learn more.

Page Dashboard - CrUX Section

Page Dashboard: Web Vitals

The Web Vitals section displays the most recent 2 weeks of Web Vitals data. To see a more detailed view, with the ability to change the timeframe or view detailed reports, click the chart icon at the top right of this section. Units are in milliseconds with the exception of CLS which doesn't have a unit.

Page Dashboard - Web Vitals Section

Viewing Detailed Web Vitals

Going back to the Web Vitals section of the page dashboard described above, you can drill into a detailed view for a page and device by clicking the chart icon. Upon clicking the icon button, you'll find a detailed view of Web Vitals metrics for the corresponding page and device. You can always toggle devices from the icon on the top right. You can change the timeframe of chart data via the calendar widget as seen below.

Web Vitals Detailed View

Conclusion

I hope this tutorial was helpful. For more tidbits about using our services, checkout the tutorial page.