• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Startup Hero

The Official Blog Of Name Hero

Learn To Fly Above The Competition Get Started
  • HomeWelcome
  • CoursesVideo Training Center
  • About UsWhat is StartupHero?
  • BlogGet the latest
  • Start HereStartup 101
  • SpeakingPodcast & Media
  • ResourcesTools to help You
    • Reselling WordPress Hosting
    • Resell Hero
    • How To Start A Blog
  • NameHeroCloud Web Hosting

How To Get Core Web Vitals Field Data

By Bhagwad Park on November 11, 2020 0

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:

Get an API Key for CrUX
Get an API Key for CrUX

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:

Insert your API Key
Insert your 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:

Open the JavaScript in a JS Fiddle
Open the JavaScript in a JS Fiddle

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:

Replace the Domain Name in the JS Fiddle
Replace the Domain Name in the JS Fiddle

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

Run the JS Fiddle
Run the JS Fiddle

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

Final Core Web Vitals Field Data Report
Final Core Web Vitals Field Data Report

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!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Connect With Us!

Superhero Resources

Fix Common Issues

  • How To Setup Free And Automatic SSL Certificates
  • How To Setup Cloudflare With Railgun
  • How To Fix Memory Exhausted Errors In WordPress
  • How To Edit PHP Version/Upload Limit/Add Extensions
  • How To Move/Migrate Your Business To Name Hero

Free Guides

  • How To Setup NameHero Hosting
  • How To Create A Web Hosting Business With WordPress
  • How To Start A WordPress Blog
  • How To Migrate WordPress To A VPS
  • How To Speed Test And Optimize Your WordPress Website
  • Magento 2.X Installation Guide
  • How To Clean Up A WordPress Hack

Training

Recent Posts

  • Preventing Malware With WordPress Plugin Updates
  • How To Add A Subdomain In Cloudflare
  • WordPress Should Do More For Core Web Vitals
  • Is it Time to Disable Your RSS Feeds?
  • The Dangers Of FTP – Use With Extreme Care (Or Avoid)!
  • 3 Great Reasons To Use Subdomains
Subscribe in a reader
  • Web Hosting
  • WordPress Hosting
  • Reseller Hosting
  • VPS Hosting
  • Twitter
  • Facebook
  • LinkedIn
  • YouTube
  • FTC Disclosure
  • Earnings Disclosure
  • Privacy Policy

Copyright © 2021 · Smart Passive Income Pro on Genesis Framework · WordPress · Log in