 All right, welcome to TTT. Today, we're going to talk about Lighthouse and Lighthouse NCI. With us today is our special guest, Eric Bederman. What's up? So Eric. Eric hacks on Lighthouse. What is Lighthouse? Why should we care about it? Yeah, so Lighthouse is a tool that we've been developing on the Chrome team for about a year and a half now. And it's a tool for web developers to audit their sites. It tells you things about best practices. It gives you performance scores. It tells you if your site's a progressive web app or not and lists off the things you need to do in order to make it better. Yeah, and you've been working on this for quite a while now. I think it started off as sort of a node CLI. And then there was the Chrome extension, which kind of has been super popular. But you've been moving it around since then, right? Yeah, it's kind of grown up over time. It started off as the node module so you can programmatically run this thing against your site if you're a node. And then we developed the Chrome extension because people just really want to press a button against a URL and get some numbers and a score. And over time, as the open source project has kind of grown up, we've released it to other places like DevTools. So now in Chrome Stable, if you open the DevTools, you can basically go to the new Audits panel. And voila, instead of the old-school Audits panel that we have for many, many moons, you have the new version, which includes Lighthouse. So you can go to the site, you can run, you can choose which performance categories, progressive web app categories you want. You run against your site, we'll emulate a mobile device, throttle down the connection to make sure your performance numbers are realistic to the real world if somebody's viewing your site on a mobile device. And we run a bunch of stuff, so you'll see the page reload a couple times, and that's just because we have to test for things like, is your site working offline? We want to shut the network connection off, make sure you're using a service worker, your PWA, run performance audits, some accessibility audits, and eventually we'll get this really nice report that basically shows you what you're doing great at. Here we go. And what you could improve upon. So Chrome Status is a good example of PWA. I spent some time making it a PWA. I was going to say, who built Chrome Status, Eric? Yeah, so there is that. We have 100 out of 100 for the PWA score. And you can see in here all the different kind of things we test for. So there's a lot of stuff in here I highly recommend checking out, diving in. Really good, interesting performance section. Some newer metrics, like first meaningful paint, time to interactive, probably things you guys have covered extensively on the show here. No, no, first time we're ever covering this. Yeah. Ever in history. But there's new stuff happening all the time. We're adding new audits, so as new best practices emerge or the requirements for being a progressive web app change, we're going to add that stuff and just make the whole tool better. And the nice thing with this is as new web standards kind of land, you can start seeing people basically add audits. And then it's instantly going to start pairing in Lighthouse. And it's kind of a nice way of keeping up to date with newer web standards, right? Yeah. And that's one of the goals is there's all these best practices you learn over time. But some are kind of outdated. You don't know what's relevant or not in 2017. And so we just want to add this to a tool that's open source, it's on GitHub. And now it's built into the browser itself. So you can use it basically anywhere you want. That's awesome. I love that it's got those modern loading metrics in there. And it's also got this section for your critical network request chains. Really useful to look at. So Lighthouse is great for your local dev workflow, checking your own performance on your local machine. But it's important to be continuously testing this stuff out. Does Lighthouse work in continuous integration with things like Travis? And if so, can we have it now, please? Eric, how? Well, I'm glad you asked that. Indeed, we can. Something we showed at Google I.O. is the ability to basically just hook up Headless Chrome and Lighthouse to GitHub. So someone submits a pull request to you. You want to know if that pull request is going to hurt your performance, accessibility, best practices, or if it's going to make it better or not. So yeah, you can totally do that. I've actually been experimenting with that over on GitHub. You can check it out at some github.com slash eBitle, LighthouseCI. And basically what this is, it's just a Docker image that we've put on Google Cloud. So it's on App Engine. It runs Docker, runs Headless Chrome. And it basically sends off your GitHub pull request as they come into this rest endpoint, stages and tests, and then gives you your Lighthouse score. So that's pretty nice because you can basically have this little Lighthouse filing wherever you go. And this is an example of what this tool actually does. So it'll report on your pull request. It'll comment saying, hey, this pull request is going to be 100 out of 100 now. No worries. You're safe to merge. So do you have to stage your site and then tell the CI, like this is URL I want to run this pull request? You do. You basically, I'll just show you right here, it's just Travis. So you drop in a Travis YAML file, and you run this little script that I created. And that script called Run Lighthouse just handles the details of commenting on your pull request and sending the pull request to this Docker image in the cloud. And then all you do in your Travis files is just have your usual install handler, your MPM or whatever you have to do to kind of test your site. And then in after success, the step you mentioned, which is deploy your site, we want actually folks to deploy their pull request changes to a staging URL because we think it'll get more realistic performance numbers. If you run locally on local hosting, you don't have things like SSL, for instance, you don't have an H2 push. So there's going to be different performance characteristics if you don't send it to a staging server. But it's basically just drop in. And you call this little Run Lighthouse script. You give it the URL you want to test against your staging server URL. And then Lighthouse Bot will do the hard work of reporting back the new scores, commenting on your pull requests, and letting you know what's up. So because it's running in headless Chrome, does that affect the performance scores and stuff? And is there any way of basically getting around that? So it's a bit more realistic? Yeah. So right now, actually, and I'm glad you asked that because it's a real important point, inside of this repo, it's a tool we have online that people can just kind of drop in to GitHub. But it's also kind of a reference server and a Docker image that people can run their own setup if they wanted to. But I have two different Docker files here. One is for headless Chrome. So test my site using headless Chrome and also using full Chrome, so non-headless version of Chrome. And so the CI is actually using the non-headless one right now because there's some bugs with headless Chrome on, basically, you can't do throttling and network emulation in headless right now. So it's not going to be entirely. You're basically going to get better scores than you'd expect. And we want the most realistic ones possible. Yeah. So yeah, a couple of options, though. Nice. So you can use it as a Chrome extension, but there's no real need for that because you've got it in DevTools now. Is there any other way you can use it after the CI as well? National Knowledge web page test. Web page test, yes. And actually, we've integrated, we've worked with the folks at web page test to integrate Lighthouse. So if you're on web page test, you can pop over to Simple Testing. And inside of here, you can see there's a checkbox for run Lighthouse. And when you do this, you're going to get your typical web page test results, but you'll also have the Lighthouse report that you saw that we just saw in the DevTools show up. So you can kind of get all this information in a single place if you're already using this tool. And the benefit of this versus just running it locally is you can also run it on a real device, Moto G4, and get slightly more realistic performance numbers off the back of it. Definitely. One of the coolest things about just web page test in general is, as you said, there's all these other places you can test and a bunch of different versions of browsers and devices. So you get real, real realistic numbers. Awesome. So a plethora of options. Folks should check it out. Yep. I just get it in your CI so you don't trip up. That's what I've done on my site. But I've been customizing it like no end, so I'm glad that you've done this. So open source. You can do whatever you want. Customize the smile. So check out Lighthouse. Try it in CI. Thanks for dropping by, Eric. Thanks, guys. Appreciate it.