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.
<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
If using Next.js, you'll most likely want to utilize the
reportWebVitals function as documented in the post linked below.
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.
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.
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.
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: 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: 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.
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.
I hope this tutorial was helpful. For more tidbits about using our services, checkout the tutorial page.