How To Get Core Web Vitals Field Data

I’ve written before about Google’s Core Web Vitals and how I dropped my CLS to zero. The problem is there’s a big difference between measuring these metrics using lab tools like Google Lighthouse and PageSpeed Insights, and actual measurements taken by users in the field. The differences can be enormous. What shows up as an “OK” metric in lab tools, can be experienced very differently by someone using a different device with a wonky network connection. Luckily, Google has given us access to the real-world dataset as well. Here’s how to get the field data for Core Web Vitals.

Google Reports Metrics from Real-World Users

When you use a Chrome browser, you’re asked to verify if you have usage statistics reports enabled. Most of us leave the box checked, and allow Google to sync our histories without a passphrase. As a result, Google has access to a ton of real-world data about how we experience web pages, and it uses these metrics to generate the search console reports on core web vitals.

Now you too can access this data for individual pages thanks to the Chrome User Experience Report (CrUX). In this article, I’ll walk you through a few steps to get started in the easiest way possible without needing to use the command line and without curl.

Getting Data from CrUX Using JS Fiddle

Building a CrUX report from scratch is complicated. That’s why I don’t bother doing it myself! Rather, I take the sample report created by Google and modify it for my own needs. They’ve made this easy with this starting guide. Navigate to this URL, and then click the button saying “Get a Key” as shown here:

You have to choose or create a project and then get a key from there. Once you’re done and you have your key, keep scrolling down. Go past the section labeled “cURL”, because we’re not interested in the command line. You’ll see a section marked “JavaScript”, and in the box below, click the dotted outline of the box labeled API_KEY:

This will allow you to select the API key that you just obtained in the previous set and fill it into the space. Once your key is visible, go down to the larger box with a bunch of JavaScript inside it, and click the “<>” brackets in the top-right corner:

This will open the code in a new JS Fiddle window with your API key already filled in. We’re almost done! Now you just need to change the “example.com” URL in the fiddle to whatever URL you’re trying to see. Here’s the location:

Once that’s done, go to the top left of the page and click the “Run” button as shown here:

This will bring up the final Core Web Vitals report that we’re looking for:

You can see the exact percentages of visits that are “good”, “problematic”, and “poor”. This should help give you a breakdown to see if it’s just one page on your site that’s experiencing an issue, or if it’s a bunch of pages instead. If you want to get an overview of your entire domain, then just replace “example.com” with your domain name and you’ll get all the URLs that fall underneath it.

Field Data is to the Only “Real” Data

What a lab tool shows you is less than half the picture. There’s such a wide variety of parameters in the real world, that there’s no substitute for actual user experience. Hopefully, having access to real-world data will give you the targeted information you need to make changes and improve your Core Web Vitals performance!