Performance Q&A

[00:00:00]
>> Quick recap. The what we talked about here in part one is the psychology of performance, how you perceive performance and the different ways that can be affected. We talked about measuring performance in the lab synthetically and in the field and we looked at those numbers. And then we briefly talked about how you interpret that field performance data.

[00:00:22]
Now, before we go here on a break, I wanna open it up for questions and try and fill as many as we can. There's some questions about blink and chromium. They're kind of synonyms but not technically. Chromium is the overall project. Blink is the rendering engine in it.

[00:00:40]
It's technically blink is where the web vitals thing, the web vitals concepts are baked in, but it's essentially chromium. So any chromium based browser uses blink and would have this data.
>> I'm curious, you were saying we should open up the tools in a separate window photo I have done before, but I know what tests a lot of different sizes.

[00:01:09]
So if I have my browser set, say, I'm testing a large screen, the smaller screen is that applying to lighthouse want to run that?
>> Yes, absolutely. So, when you separate into the other screen, it allows you to test your performances, the performance is on that screen size.

[00:01:26]
So I have my Chrome window set here to 1150 by 720, which is just a common resolution that a lot of laptops and tablets would use. If I wanted to test what the performance was on a super big screen, I would need to make Chrome like as big as I want to test it on.

[00:01:44]
Technically, you can do that for applying to mobile as well if you made it really small, but a better way to do that is when you're running your lighthouse report. Just select that you wanna emulate a mobile device as automatically gonna put it inside of a small window when it renders.

[00:02:01]
So they'll use one of the chrome mobile emulation techniques before it runs lighthouse. I've just seen lots of people leave their DevTools attached and then have just 50 pixels of the screen at the top and run their lighthouse report, and it comes up and says everything is awesome, yeah.

[00:02:22]
Because browser rendered a hundred pixels, it didn't take anything to do it. It's not a real performance snapshot. How do we get field data? All right, so the field data that we captured is part of this exercise was the data that came from the Chrome user experience report, which is cool data, but it's flawed, right?

[00:02:43]
It is aggregated to the month, we don't get detailed data. What we're gonna do here, in part two is we're gonna build a small performance agents that's gonna pull data from your real users. And so we'll have a data point for every single user who loads your page, and that's gonna be how you can use it for both public sites and private sites.

[00:03:06]
You'll be able to pull data from anywhere that your users access your site from, and then figure out how to aggregate it. We're gonna talk about that a lot in part two. Lighthouse says that it cannot generate correctly due to Chrome extensions. Yes. Chrome extensions absolutely affect the performance of the page in all browsers.

[00:03:26]
And if you put extensions in your browser that's essentially a bit of code that's injecting itself into the loop. Extensions can read the entire structure of every page. They can monitor what you type into the browser. They have a alarming amount of access and so you should be very wary of the extensions you put in place.

[00:03:51]
And then when you run a lighthouse report, you should disable your extensions if possible, or run the ones that are most likely for your users. What you might notice is my Chrome right now I only have one extension running right now, which is my password manager, I disabled all the other ones for right now.

[00:04:10]
Especially if you have things like micro block or ad blockers or stuff like that. Turn those all off before you do performance testing, because you wanna see how those blocked things affect the performance of your page. Why are there differences in the results between the report metrics or between the lighthouse metrics and the web devs that thing.

[00:04:36]
Those are difference is in well, I'm not sure I understand the question. You might be asking why does one does lighthouse say this is orange, it needs improvement, but web dev says it's worse. Well, they change what the ratios are, what the recommendations were good, okay, bad are over time.

[00:04:57]
And they're not always in lock step, it's different teams were making those changes. If you're asking about why does crux data not match lighthouse, that's lab versus field, right? The lab data is lighthouse, lab data is what lighthouse is measuring, and it's what your machine rendered. Whereas the crux data is what real users on the Internet who visited that site experienced.