Lighthouse

[00:00:00]
>> Here I have Google Chrome open to a website and I've opened up the Dev tools. Now when you're gonna run lighthouse it's generally best to detached your dev tools. And that's because we're gonna be taking a metric about how well things are rendered into the window. If you have dev tools occupying the bottom third of your screen or the right half of your screen or whatever, you've changed the size of the window.

[00:00:29]
And now you're measuring something that isn't really realistic. Not many real users run their browsers in a window this big. They render it in a normal screen size. So my actual chrome window is a normal size for a laptop user. And I've detached the dev tools somewhere else.

[00:00:53]
Now lighthouse is just a top level tab. Usually it's last but you can kind of drag these around to be in whatever order you want them to be. I tend to use lighthouse, more so than many others. There's some configuration options available to us. What lighthouse is going to do is it's gonna generate a performance report for us.

[00:01:15]
It's gonna tell us how well does this page perform by all of the various metrics that google cares about in order to do that effectively should really clear out the storage of the browser. It shouldn't like pull stuff from cache, and so on. It shouldn't rely on cookies it should say it.

[00:01:31]
What would a first time user experience be? And so we want to leave clear storage on simulated throttling. We probably want to leave that on as well. Chances are the devices that we use as developers are probably a little bit better. A little bit faster than our average user.

[00:01:50]
And so we can simulate some of what that user would see, by turning this on, and it will basically throttle your device in about half it's gonna do a 1x turndown of your current hardware. Now lighthouse can do a bunch of other things. For the purpose of this course route.

[00:02:09]
We're only talking about performance, but it can do a whole bunch of other useful things. If you'd like to see more of that, there is a whole course here on front end masters about those chrome developer tools and all the different things you can use for it. I encourage you to check that out.

[00:02:30]
The final option that we care about here is what device we're gonna run on. Now, the desktop we're going to run it on the chrome web browser that we have open right now. If we want to run this on mobile, it's gonna do the simulation, right? It's going to create a screen size that's only the size of a mobile device, and it's going to run the report then.

[00:02:49]
So I'm gonna go ahead and run this report. And it takes, 30 seconds or so to run, it's gonna like reload chrome in the background, and it's gonna wipe out all the cookies and it's gonna clear out the storage and then it's gonna produce a report. That looks like this, it gives you a top level score, which they calculate out but it also gives you all of these core web vitals metrics that we talked about.

[00:03:14]
So in this case, it took 1.3 seconds to show the first bit of data on this page, which isn't so good. And so it's red. The largest contentful paint was after that the largest contentful paint will always be after the first and it took 1.6 seconds. And the community layout shift, which isn't a time it's like a score.

[00:03:36]
It's like how much of a percentage of the page has been shifted around. The score's actually much more complicated than that and they show the calculations of how they get to that on their website. You can turn on these other option for more details with links out to how they calculate each of these scores, if you're interested in the nuts and bolts.

[00:03:59]
There's a whole bunch of other things interesting on here that we'll talk about more in a minute. But for now, you know enough to run a performance report. If you wanna run multiple performance reports, this little plus up here in the corner we'll just create a new one that you can run.

[00:04:15]
You can visit any of the previous reports that you've run within this instance of chrome. So you can try multiple things and see how you got better. There's some quirks that we should know about. The chrome lighthouse report is relative to your machine. So you're measuring performance from your machine or a throttled version of your machine.

[00:04:38]
So it's not necessarily gonna reflect what the end user sees. But something that the user that is kind of similar to you would see interacting with the pitch. It's also showing the performance relative to the current size of the chrome window. So if the window is really small, and in the background and not at all relevant, well, those scores aren't gonna be right.

[00:05:04]
They're gonna be like, hey, how much does the layout shift if my window is only this big? Who cares nobody would ever look at it like that. A third kind of, Interesting gotcha is that make sure chrome stays in the foreground. If you put chrome into a background if you like, go off and do other things while your lighthouse is running.

[00:05:26]
Well, everything just kind of gets throttle down and sometimes crumble like stop executing JavaScript because it's in the background. And your lighthouse report will be all weird and different. So keep it in the foreground while you're running it. We already mentioned this sort, of course, it's really good, I took a look at it.

[00:05:44]
You should totally check it out for a lot more details into the Chrome Dev Tools and all of the other tabs and how to use them.