 So today we're going to talk about Lighthouse, a tool for auditing your progressive web apps and just your general web apps for performance best practices, general, you know, web dev best practices. I kind of think of it as like page speed insights, but the newer, more fanciful version. It's page speed insights on steroids. Yeah, that's a good way of doing it. But nice steroids. Okay, so the first thing we're going to do, we're going to dive right in. Here we have a progressive web app and we're going to use the Lighthouse Chrome extension on this. So as soon as you've got it installed, you can go and click on the extension and run generate report. And what this is going to do is it's going to run through a number of different gathering passes. I'm going to check a bunch of different audits out and it should hopefully generate you a nice, cool looking report like that right off the back. Now this is useful for a few different reasons. It'll check different features like, you know, do you have support for something meaningful when you're offline or on flaky network connections? You know, is your page load performance fast? It's got nice tracking for things like first meaningful paint, input latency, time-to-interactive. Interactivity is sort of really important these days because a lot of times when we're using libraries or frameworks to ship apps, we're shipping large JavaScript bundles down the line, perhaps not chunking those out as much as we can, meaning that, you know, you can render something on screen, but it's not going to be something the user can actually interact with. Yeah. And it's also got things like it checks whether you've got a web app manifest, whether you're defining certain parameters in there, which would allow people to add a time screen and stuff like that. One of the really nice things with this is as the web kind of grows and there's new APIs being added, Lighthouse is a nice way of keeping up to date with those because they'll actually add in checks for those things. And if obviously you haven't got them, it'll highlight it for you. So it's also, A, one way of just making sure that you're a good solid web app following best practices, but also helps you stay up to date with new things as they land. Exactly. So Lighthouse also tracks, you know, best practices, checks on accessibility, but it's also possible to write your own custom audits for checking, you know, your own best practices because your team might have some of those that they want to keep an eye on. But Lighthouse is super extensible, easy to write your own audits. Now, although we've been using it as a Chrome extension, it's totally also available as a CLI tool. So let's go and check that out. So here I've got something we're going to show you a little bit later. But first, we're going to run Lighthouse against, you know, basically the canonical airhorter.com. I think Paul Kinlan owes us some affiliate money for this now. But basically, we're running this at a CLI level. It's going and it's running the exact same tests. You can see Chrome running in the background. And off the bat, you have this like really nicely formatted report that has all the same info, tells us, you know, what are times interactive scores like, you know, do we have a service worker registered? Are we, you know, responding with the right responses when we're offline and so on. And this will also output the report to a file locally. So you can go and you can check that out if you want. Super duper nice. It's also possible to sort of use Lighthouse as a node module in case you want to write your own tools on top of it. And maybe, you know, one thing that is worth showing is another little tool that Paul Irish wrote that reuses Lighthouse's data called Progressive Web Metrics. So what we're going to do is I've pulled down the latest version of that. Just going to go and run it. Now this is running the exact same test that's spinning up Chrome in the background. But what should output here, hopefully, if everything goes OK, is a number of different, like, really nice, prettily formatted graphs that show you, you know, what does your first meaningful paint look like? When are you visually complete? What's your time and interactive score? And how long it's been since navigation started. So you just want to keep an eye on that because you don't want your users having to wait forever and ever and ever and ever and ever before they can see and interact with your experience. So the nice thing about this is it's just highlighting the fact that you can pull in Lighthouse as a node module yourself, run exactly the same test. But if there's particular rules that you care about, or like, for example, maybe your team is just working on service worker support and you just want to track offline over a period of time or other things around that nature, you can use Lighthouse and just rip out the particular rules that you care about and show it in any way that works for you. Yeah, totally. So another thing I'm going to show you. So let's open up Lighthouse really, really quickly once again. I'm going to open up AirHorner.com. And I'm going to use a little flag called Save Assets on that. So we're going to go and we're going to do another one of these gathering runs, collect all the data, all this stuff. OK, so it's done. And now if I open up this directory, I probably shouldn't have been using that directory for it. I can go into Chrome. I can open up a brand new timeline. I can go and I can load my timeline data, just need to pull up my projects. Or what I can do here, because surely Chrome supports this, is I can go over to here and drag this into timeline. Oh, it's so good. Thank you. OK, so what you can see here is that the trace generated by Lighthouse is totally openable by timeline in case you want to go and inspect this further. Super duper nice. Lighthouse can also be used as sort of a post processor for any of your traces. So super useful for making the best use of this data. Yeah, the thing I like about this, if you've got a CI, you might want to save some of these assets over a period of time. So if anything does happen or start going wrong, you've actually got the traces to go with it as well so you can start debugging straight away. Airhorn was doing amazingly looking at this timeline just because there's basically nothing in the app other than like one button. Yeah, which surprisingly has had a number of bugs over a long period of time. What are you talking about? It just does one thing. It's great. So we've talked about using Lighthouse as a node module. But we've been talking also lately about the importance of testing on real world devices, focusing on interactivity, focusing on network connections like 3G where that's probably what people are using out in the wild. Matt is going to show you what this looks like on a real device when you're trying it out with Lighthouse. So if you go to Lighthouse, read me, there's a small section like Lighthouse with mobile devices. And the real important command is this ADB forward TCP in there. Basically all that's doing when you run it is it opens up a socket between your device and your laptop. So once I've done that, I can just go ahead and run Lighthouse with dash dash mobile. And once I run that, I'm just going to stick it on my site. You're going to start seeing exactly the same thing as you've seen on desktop where the website is reloading. It's doing all of its auditing. We've got the CLI going crazy, pulling in a load of random bits of information. But at the end, we end up with the same report as we saw from Addy before in the CLI that you'd also get from the Chrome extension. So we start seeing scores. I'm not doing great in some aspects, but others are fine. But yeah, it's super handy because it means if the device is on 3G, the tests will actually be running on 3G. And if you've got a slow device, if anything like the scrolling tests that I think they're looking at, that's probably going to be affected by the performance of the actual device itself. So you can start getting regular testing of these kind of aspects. Cool. So Matt's not doing great in some aspects, but his Lighthouse scores are also all over the place. And on that note, we just released a case, just released a brand new guide on auditing web apps with Lighthouse over on developers.google.com. Please feel free to check it out. It's using the canonical. Here. Of course, go check that out. Try out Lighthouse. Let us know what you think. If you have any feedback at all, please feel free to file issues. But yeah, that was Lighthouse. Yeah, check out the links in the description. Bye.