Google Lighthouse

[00:00:00]
>> Todd Gardner: So we talked about the three different methods of testing, lab data, synthetic data, and field data. And we talked about statistics. So let's bring this down to like reality. We've been very theoretical up until now. Let's talk about real tools and what they mean and how they translate back to these things.

[00:00:22]
So web performance tooling. The first thing is all the different tools that are available to us in Google Chrome. Now again, I'm using Google Chrome Dev, which is like the next version right now. I'm running 131. If you're running exactly 131, you should see what I'm doing. But chances are you're running either a couple of versions behind or maybe a couple of versions ahead because you're watching this in the future.

[00:00:49]
All these things are very likely to change because all the Chrome developer tools are under active development to make them better. So things shift and rearrange. So the little disclaimer here in this demo. So let's pop out and understand a few things. So, we're gonna do a little demo of a couple of things in Google Chrome.

[00:01:08]
And we're gonna start with lighthouse. So, I'm actually going to pop out my DevTools. And the reason why I'm gonna pop out my DevTools is because right now with the dev tools open on the bottom here, I'm shrinking the size of the viewport. My viewport is only this big.

[00:01:29]
And so all kinds of things that could happen on the page that are tied to the viewport, I'm going to be kind of affecting them because DevTools is in the way. So instead, I'm gonna pop them out into a separate window, which I encourage you to do, especially if you're doing performance testing.

[00:01:47]
So I'm gonna pop the Chrome tools out into its own window so that we can interact with them separately. And so that the size of our DevTools doesn't interact with the size of the view port.
>> Todd Gardner: So under DevTools, the first tool I want to show you is Lighthouse, which is one of the top panels.

[00:02:07]
And the Lighthouse report is the first thing that a lot of people will do when getting into performance. It enables you to generate the really common Lighthouse score, which is like that big green or orange or red circle, that I've shown in slides a few times. You'll see it shared online.

[00:02:22]
People will brag about their score. There's a couple of things that we wanna do here because we want to simulate a real user. If you just pop open Lighthouse and you don't do anything, it's gonna generate a score that's like based on your computer. Which isn't relevant. It's almost never relevant.

[00:02:43]
It doesn't do you any good, it's noise. Instead, you need to try and generate something as close to reality as you can. And so the first thing to do is to turn on responsive mode, which is this little icon up here in the upper left corner of Lighthouse.

[00:03:00]
Now, if you guys want to do this alongside on either Developer Stickers Online or another site, you can follow along and we can do this together. So I'm going to turn on responsive mode, which you see back in Chrome has kind of changed the frame a little bit.

[00:03:14]
We now have this header that allows you to set screen sizes and some other things. There's a default set of options here, which probably by default comes into responsive mode that lets you dynamically change the size of things. Which is interesting if you're doing responsive design and actively doing stuff like that.

[00:03:33]
It's less valuable for performance testing. Usually for performance testing, we wanna set this to the kind of user that we want to test. There's a lot of different mobile devices built in. I tend to use iPhone 12 Pro a lot as a very common screen size of a few generations old mobile device.

[00:03:56]
I also have one that I built myself called small laptop, which I think is really valuable. You can create these yourself. Going into dimensions edit, and you can create your own. So for example, small laptop has the display resolution of 1366 by 768 at 1 device or Per pixel density ratio.

[00:04:20]
So not a Retina display, there's one display pixel to whatever. So I just built this to kind of represent a common user for me. So I'm going to set this to iPhone 12 pro. Now, that sets the screen size. Now, there's a couple of other things we should also do.

[00:04:44]
We should kind of maybe change how we're connected to the network. Because right now I'm testing this thing locally. I don't have any network hop that I need to make. So we should introduce one. So under the network tab, there's this option here called throttling. Under throttling, we have some other options that we can automatically tell Chrome to pretend that we're on a slower network than we are.

[00:05:11]
There's some default ones that are interesting. I tend to add my own honestly, so I can be a little bit more controlling about it. So I have this one here, you set up your own throttling profiles. I have this one called USA Coffee Shop WiFi. Then I just tried to emulate, hey, this was a real experience that I had when I was working from a coffee shop once.

[00:05:34]
I ran a speed test and it showed that I had about ten megabit down, four megabit up, and 50 milliseconds of latency. It's just something that I use, base your data on what you think your real users have. So I'm going to change my throttling profile to USA Coffee Shop WIFI.

[00:05:59]
And then I'm going to go to the performance tab and there's one other thing that we can do here. If we open up the gear in the upper right, we have some options on CPU throttling. Now I have a MacBook Pro. MacBook Pro with the M whatever chip it's super fast, not anything like what my users have, probably.

[00:06:21]
And so I need to slow it down. Now this isn't super accurate, this is like an approximation. But you can try and get a little closer to what your users have. So if I wanna slow this down say six times, and limit how many concurrent processors I have to ten, I can turn that on here.

[00:06:42]
Now notice when I turned on these throttling options, I got these big warnings up here. It's just so you know when throttling is in effect. So as you do things, you'll notice the web page is significantly slower than it would be normally. And saying, hey this is why you told me to slow down.

[00:06:59]
So, I turned to both of those things on, and now I'm gonna go back to Lighthouse. And Lighthouse, there's this option here of how to do throttling. I've turned on DevTools throttling, and that let me control this. So now it's going to honor the network throttling and the performance throttling that I just set up.

[00:07:18]
So now I can run a page load, and I would pretend to be a mobile device, and I wanna test performance. Lighthouse is good for a lot of different things. It can test SEO practices, it can test accessibility. That's out of scope of this course, we're gonna focus on performance.

[00:07:33]
And we're gonna run a page load. Now, this takes a little bit. Because in the background, it's re rendering the page. You can see it like trying to reload it and do some stuff as a performance optimization. It shows us these little messages that change along the way, so that we don't feel like this is taking nearly as long as it does.

[00:07:56]
It shows you various statistics from Google data. Because sometimes Lighthouse can be quite slow, especially if you're testing a slow site like our example right now.
>> Todd Gardner: If a site takes greater than one second, it becomes interactive users. We'll cut this all out of the video so that people aren't watching as this slowly loads.

[00:08:23]
Great, we got a report, and it's not good. It's so bad, it didn't even give us a score. It is not even a one. It is negative, bad. Error, we couldn't even load the page. The largest contentful paint did not even happen in the time of this thing.

[00:08:46]
So, what this thing generated for us is it tries to surface the First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift. And then some other scores that it pulls out of Pulls out of the inner workings of Chrome that we didn't really talk about because they're really only unique to lab testing.

[00:09:05]
Now, what this does not give us, it didn't give us any INP score because there was no interaction. It can't click on something for us, It doesn't know how to do that. And it gives us a film stream strip of here's what the page looked like and then a bunch of diagnostics.

[00:09:22]
It's saying, here's some things that I found that statistically might be interesting for you to look at. And that can all be super interesting. What this also lets us do is it lets us view a trace. Which it jumps over here into the performance tab, which is the next thing I wanna talk about.

[00:09:39]
Because this is the actual details of getting into performance. And this is why we spent time talking about waterfall charts and fame charts.