[MUSIC PLAYING] JECELYN YEEN: Hello, Barry. You got here fast. BARRY POLLARD: Speed's my thing, Jecelyn.
If it ain't fast, I want to know why. JECELYN YEEN: Then maybe you could help to explain how to use the DevTools Performance panel to measure and improve your website speed. BARRY POLLARD: Excellent idea.
JECELYN YEEN: Great. So where do we start? BARRY POLLARD: Today, let's go through the live metrics functionality in the Performance panel.
When you first open the Performance Panel, we'll show you the current Core Web Vitals scores for your local session. JECELYN YEEN: Nice. And you don't need to start recording or anything?
BARRY POLLARD: Nope. It'll show you the latest info as soon as you open the screen. JECELYN YEEN: Very cool.
It seems like there's a lot going on on this screen. Can you explain some of the many features? BARRY POLLARD: Of course.
That's literally what I'm here for. You can think of the Core Web Vitals as three essential metrics for a healthy website. They're the foundation for a great user experience, which is key to keep your visitors engaged and coming back for more.
JECELYN YEEN: Right. I remember now. LCP, or the Largest Contentful Paint, measures how long it takes for the main content of the page to load, right?
We definitely want that to be snappy. BARRY POLLARD: Spot on. I'm looking at your current score, there's room for improvement, but don't worry, we can start investigating right here.
We can see the LCP time and even the LCP element. If you hover over it, you'll see exactly which part of your page is causing the delay. And if you click on it, we'll jump right over to the Elements panel where you can dig into the details.
JECELYN YEEN: Nice. What else can we use these live metrics for? BARRY POLLARD: Well, another concern we hear is whether your developer setup is reflective of how your typical user experiences your site.
JECELYN YEEN: I thought developers usually just say, well, it works on my computer. BARRY POLLARD: Yes, we have been known to say that, haven't we? But again, it would be nice if there was a better way.
JECELYN YEEN: OK, you are teeing us up again for the next segment, aren't you? BARRY POLLARD: How did you guess? If you click this blue button in the field data panel on the right, you'll get a pop-up asking you if it's OK to fetch data from Google's Chrome User Experience report, or CrUX for short.
This is the same real user data that powers PageSpeed Insights, Google Search Console, and many other tools. In the Advanced section of this dialogue, you can restrict this CrUX lookup to only a single URL or even match your development server to a production origin. We'll accept all origins, and when we do, DevTools tries to fetch the CrUX data for the current URL.
And if that URL is in CrUX, then it displays the field data alongside your local metrics. This allows us to compare what we're seeing in our DevTools with field data as experienced by our real users. Here you can see how your local experience is a good bit faster than what most users experience.
Hovering over the figures also shows you more information, including the percentage of page views in each category. You can also flip to see the data for the whole origin, just like you can in PageSpeed Insights. You might also have to do this if CrUX doesn't have URL level data for the page you're investigating, but does have origin level data.
JECELYN YEEN: Well, that's pretty nice. I think this is the first time we brought actual field data into DevTools. BARRY POLLARD: Yes, it is.
It allows you to compare your results and tweak network throttling or CPU throttling to try to more closely match your users' experience, which can help debugging. JECELYN YEEN: I see. But Barry, when I change my query parameters to something slower, the field metric doesn't seem to reflect that.
Hmm. BARRY POLLARD: Yes, sometimes query parameters do change the page, like in your example here, but in many cases, they do not. Think UTM params and other client side only query params that don't change the contents of the page.
Because of this, and because we want to increase the chances of a URL being made available in CrUX, we aggregate the data across query parameters and CrUX, meaning you won't see a change in the field data in this case. JECELYN YEEN: OK, so setting up your developer tools, similar to what most of your users see, sounds like a good thing to do. BARRY POLLARD: Yep.
Just remember, there might also be other factors that are influencing these numbers. For example, redirects and cookie banner pop-ups are some of the things we often don't experience in our development environments. So the field scores are useful, but they may not tell you why the scores are the way they are.
JECELYN YEEN: All right. We've probably got time for you to show us one more thing. BARRY POLLARD: Great, because as it so happens, I have only one more thing to show you.
Another common use case is to try to identify slow interactions affecting INP. You can quickly identify slow interactions and only then record a full trace on them. You can see as we click and type to interact with the page, we're logging all the interactions.
Hey, this Add to Cart action looks a little slow. That might warrant some further investigation. I think it's time to dive into a full trace using the Record button on the right or on the top left.
You click Record, repeat the slow interactions you want to investigate, and then click Stop to load the trace data and start digging in. JECELYN YEEN: OK, but I think we've run out of time on this video. So maybe we'll go through the full trace in a future video?
BARRY POLLARD: Sure. Sure. JECELYN YEEN: I think we've lost Barry.
BARRY POLLARD: Sorry what? Did you say something? JECELYN YEEN: Yes, just saying, thank you for showing us this new live metrics in the Performance panel.
It's a nice introduction to performance measuring in DevTools. BARRY POLLARD: Yep. And it sets you up nicely for a full performance trace.
There's a lot of info in the full trace covering lots of aspects of performance, and it can be a little intimidating. So it's nice to get a bit of context in this landing screen before diving into that. JECELYN YEEN: Thanks, Barry.
Looking forward to digging into that in the next step DevTool Tips. But for now, ciao.
