Web Performance Fundamentals, v2

Chrome User Experience Report

Todd Gardner

Todd Gardner

Request Metrics
Web Performance Fundamentals, v2

Check out a free preview of the full Web Performance Fundamentals, v2 course

The "Chrome User Experience Report" Lesson is part of the full, Web Performance Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Todd explains the Chrome User Experience Report (CrUX) and how it is used by Google to determine website performance and ranking. He also demonstrates how to access CrUX data using tools like SpeedCheck and PageSpeed Insights.

Preview
Close

Transcript from the "Chrome User Experience Report" Lesson

[00:00:00]
>> Todd Gardner: The Chrome user experience report. Now, I've alluded to this a few times so far. The Chrome user experience report, this is how Google knows what your website's performance is, so it can decide whether or not it wants to, penalize your ranking. So every user who uses blink, a blink browser is capable of capturing the Core Web Vitals, but not everybody who uses blink can necessarily send that data to Google.

[00:00:36]
That'd be kind of weird, but everybody who uses Chrome, which is Google's proprietary browser. Everybody who uses Chrome can send data, and if you've logged into your Chrome, you've signed into your Google account so that it remembers things, and you can sync your extensions somewhere in that giant terms of service that you signed you gave Google the ability to say.

[00:01:00]
Send your performance data back to Google, and that's what Crux is. It's every single logged in user who uses Chrome around the world, Chrome is measuring the Core Web Vitals and some other metrics about that user and sending it back to their system, which is the Chrome user experience report.

[00:01:21]
Now, this data represents field data, it's the real data from all of these users, from all of those logged in Chrome users. Now they don't care about every website if you visit localhost, if you visit intranet.yourcompany.com, they don't wanna capture that. They wanna capture the top million public websites.

[00:01:44]
Probably more than a million, I think that's what they say, but I think they're actually capturing more than a million for the purposes of deciding ranking. They're capturing all this data, then they anonymize the data. They put a bunch of fuzzing in it to round the numbers off a little bit and remove all the information about how many page views is actually being represented here, and then they publish this.

[00:02:09]
You can get the Crux data, the Chrome user experience data from any website, from your website, from your competitor's website, from my website, from anybody's website, this data is publicly available. It's given to you on a 28 day rolling average. So when you look at it, it's at your score from the Chrome user experience report on any given day, it doesn't actually measure what your site was doing that day, it measures the average of what the last 28 days have done.

[00:02:37]
And that's, again, to kind of fuzz everything and anonymize it so you can't, figure out the traffic patterns of your competitors based on this data. This data is all stored in Google BigQuery, which, if you are familiar with the Google Cloud System, and you're a developer, and you know how SQL works and BigQuery work, and you can do all that stuff.

[00:02:58]
You can go and query this, stated directly, caution if you do stupid queries it can cost you real amounts of money because it has lots and [LAUGH] lots of data in it, but the data is also available by an API, you can get this data in page speed insights and Google search console and a bunch of other tools.

[00:03:16]
One such tool the publishes the data is something that I wrote, called the speed check, the speed check is what we'll do next. If you go to request metrics, speed check, we can do a real-time query against the Chrome user experience report for any website. So for example, if I wanna see how target.com is rating right now I can go and do that, and here is the current Chrome user experience scores for target.com, their desktop score is they are failing LCP and CLS.

[00:03:54]
They are passing INP, so potentially they are getting SEO penalties depending on who they're competing with and what their scores are. For mobile, it's a little bit worse their CLS is better on mobile, but their INP is a lot worse. Mobile devices don't have as much processing power, JavaScript's gonna take longer, that's not an entirely surprising score.

[00:04:17]
We can also see TTFB and FCP, those metrics are also captured that we could report on, and you can do this for anything. So if you wanna check out what your site is doing right now, you can go out to the Speed Check tool, type in any domain you want.

[00:04:31]
Now if I was Target, let's say I am Target Let's say I'm a performance developer at Target, and I wanna make sure that my site is faster than my competitors. Well, I can look up my competitors I could go to walmart.com and I could see what Walmart is doing I'm, Walmart is having some CLS problems we can see in their recent data it's gotten a lot worse now it's still in the good range barely, but they're right at that edge, and they're failing LCP and INP.

[00:05:07]
On desktop, they're failing LCP, on mobile, they're failing the same ones. So, we can see are we faster or slower than our competitors, which is a really interesting side effect of the Chrome User Experience Report is not only do we know that Google has performance data about our website, but they have it for everybody.

[00:05:29]
And so this isn't like a secret, you know if your website is performing poorly. This tells you if your website's performing poorly, and you can look at the people who you compete with for search ranking, and make sure that your site is performing better than them, which is pretty cool.

[00:05:46]
Crux is a really powerful set of tools. Now, the Crux is revealed in a bunch of different places, Speed Check is something that I built because I thought a lot of them were really complicated to get. One of the other places that you can get it is inside a PageSpeed Insights report.

[00:06:01]
This is at pagespeed.web.dev, a lot of you might have used PageSpeed Insights before. PageSpeed Insights is basically Lighthouse run as a synthetic test. So rather than running Lighthouse on your browser, you're telling Google's data center to run it for you. Now you don't have a lot of control of it, but it at least has to do network hops.

[00:06:29]
So we typed in target.com, it's gonna go off and do something. Right off the bat, it's going to tell us, discover what your real users are experiencing right here at the top, this is Crux, it's basically that same data that I just pulled for the origin. So it captures it both for specific URLs or whole origins.

[00:06:56]
The Speed Check tool that I built, only does origin this one can you can do either, but it shows you the real user data first because it's still busy doing the actual test. So we can see, here's the Crux data, hopefully this loads here in a second, come on.

[00:07:17]
So behind the scenes, PageSpeed Insight does is it spun up like some server instance that ran a mobile version of Chrome, and it ran a Lighthouse report. This looks exactly like the Lighthouse report we ran locally, but it's packaged in here, and it shows us the performance score, the LCP, CLS, First Contentful Paint, some other stuff.

[00:07:38]
Again, it does not give us an INP, there's no user interaction. We couldn't instruct it to do anything for us, but we get some general information about it, as well as some recommendations for what it thinks we can improve. So this was actually a really big moment when page speed insights put Crux in here as well, because this data, art like not arguably this data is more relevant and meaningful than what came below it.

[00:08:03]
If this data says you're good, this number doesn't matter. If this data says you're failed, then if this number says 100% it also doesn't matter, your data is still bad, and it meant that this if your field data is failing, but this is passing, it means the robot's wrong.

[00:08:27]
The synthetic test is wrong, it doesn't represent the real users. So PageSpeed Insights, lets you get kind of compare both together.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now