Exploring a Lighthouse Audit

[00:00:00]
>> Jon Kuperman: So I'll go over to the lessons, and I will click on audits, feel free to follow along. And I'm gonna go ahead and open up the dev tools, go to lighthouse, and I'll just choose the fresh navigation, choose desktop app, and I'll choose all four categories, just so we can get a nice look at them together.

[00:00:16]
So I'll hit analyze here, and in the background, it's gonna go to a bunch of refreshes and implement all of its instrumentation, all that kind of stuff. And it'll take a couple of seconds to load, but it'll ultimately generate a really nice report for us. I like these little loading stats about performance, like most global users are on kind of interesting, or, like Pinterest made a bunch of success with this thing or whatever.

[00:00:39]
Anyway, so nice stuff to read, like a video game loading screen while you're waiting for this. But I do think some of this stuff is really helpful building empathy like when's last time you tested your app on a 2G connection? A lot of people, it's gonna be never, right?

[00:00:51]
How fast does it load? How slow is it really? All right, there were issues, the page did not present any context. I don't know what's going on here, hold on a second. Typical turn it off and on again, kind of thing. Okay, here we go. So we get this nice lighthouse audit, and we can see on this plain static HTML page where not much is going on, we did very well for ourselves, which is great, but on real applications that run JavaScript or have lots of images, you'll probably get differing scores.

[00:01:16]
So I wanted to point out a few things so it breaks down into the categories that we covered above performance, accessibility, best practices and SEO. And then we can kind of dive into each one. And you can see like performance, it gives you the actual numbers from your web core vitals metrics like it took 0.2 seconds.

[00:01:33]
There is no blocking time. You can view the screenshots as the page loads, which is very nice. You can view all audits. So you can look for just certain ones, like time to first byte and you get all these recommendations. So basically what you will see on a real website when you load one and it has a score is you'll see all these different diagnostic suggestions.

[00:01:53]
If you were to minify your JavaScript, you could potentially say 56 kilobytes. If you were to enable text compression on the server side, you could save an additional 5 kilobytes. Your static assets don't have cash policies, all this different stuff. And the great thing here is that for any rule that you're unsure about, you can click on it and they will always have links to a really nice documentation section on their website explaining why this flags and what you could do about it.

[00:02:19]
Some of these will be client side only. Like, hey, your HTML needs a meta tag. Other ones might be server side as well, like, hey, this asset's being sent down, but it doesn't have a cache head or something like that. So they won't all be fixable for you if you're a front end engineer, but they are all suggestions that you should at least kind of read through, understand where they're coming from and what could be done to fix them.

[00:02:40]
So we'll go through kind of that performance section, which is great. Then we can also look at all the past audits, like all these things that worked well and they didn't feel any to warn us about our images are the right size, blah, blah, blah, we've minified our CSS, things like that.

[00:02:54]
We'll scroll down a little bit further into accessibility, and we'll see things like, we passed our accessibility audit for 100 but they have some suggestions. These are things that you should manually check that they're not able to check with Lighthouse Audit. So, can controls be keyboard focusable? Are interactive elements, do they clearly state their purpose and state?

[00:03:13]
A lot of this stuff I'll cover in my other course, but it's good to know here that they are not only giving you a score on the stuff they can test, but they're giving you a really concise list of stuff that they could not test here. So I'll go ahead and hide that.

[00:03:24]
Move into best practices. So again, we saw this warning earlier. This page doesn't have an HTML doc type, which triggers Quirks mode. And so if we wanted to, we could add that doc type HTML at the very top. Similarly, we don't have CSP, or we could use these different policies, all these different things, they're really nice.

[00:03:42]
A lot of these are going to be server side, but you can see that we passed all these audits. We have three not applicable, and then we've got some manual ones to suggest to try out. And then SEO, we can see that the document doesn't have a meta description.

[00:03:55]
If we're curious about that, again, we can deep link to their documentation and see that they recommend us adding this meta description tag, which would be what shows up in the search results page for Google. Yeah, so we can kind of click through here. This one not super exciting.

[00:04:08]
The exercise that we'll go into in a minute here should be a lot more exciting. But the basic idea is that this is a great starting place when you're doing performance analysis. You just come here, you run a Lighthouse Audit, you see kind of your scores and things that you care about, and you can at least get a good idea of where to start off, like what things are slow, what things need attention.

[00:04:27]
I think with that, we will turn it over to the exercise, and we can all take some time running these Lighthouse audits together. Unless anybody has any questions before we start on that.
>> Speaker 2: Is the lighthouse, online or offline, is it just looking at what's been downloaded?
>> Jon Kuperman: It does a full, this is a great question for the navigation type, right, which is this one, it will do a full online fetch.

[00:04:48]
And what I mean by that is if you were to say, turn your Wi-Fi off and hit this, that would be the way you would simulate your service workers and things like that. So it will go out and it will fetch all these things for the snapshot. It doesn't need to because it won't fetch any additional stuff, so it'll work offline.

[00:05:03]
But either way, it will attempt a full organic refresh with navigation and do what it can do with that kind of stuff.