This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Lighthouse & WebPageTest" Lesson
[00:00:00]
>> Mike North: So these are great, and there's a new player on the scene for measuring progressive web apps, and it is called Lighthouse. So, this is a Chrome extension that you can install if you haven't installed it yet, please go ahead and do so. And the idea is that it will audit your performance, and it will look for the presence of, metadata and the ability to go offline, and the ability to make sure that you're serving your app securely.
[00:00:28] And it boils that all down into a score out of a hundred and now I believe they give you four scores they separate out sort of performance and best practices and accessibility and then progressive web app specific stuff. So this is enough of an official tool that it ships with Chrome 61 for free.
[00:00:49] So if you have a Chrome Canary and you turn on like developer tool experiments it's a Chrome flag, you will see that in the Audit's tab, you can actually launch Lighthouse right from there. You don't have to install an extension anymore, so it is a big part of what we do, all the time, this is a very new tool.
[00:01:10] This is a very old tool that is still incredibly useful, webpagetest.org, and I think this is a Steve Soders project here. It's been around for minimum, ten years, the big benefit here, the reason why it is still incredibly relevant, other than really breaking down the order in which resources are loaded, and what's blocking, and all of the pitfalls of HTTP1 that we hit, and we'll talk about later?
[00:01:40] The main thing that it allows, is we can test under real network conditions, and with real devices in a device form. So you could say I wanna test with Motorola X phone and use this data center in Dallas Virginia. And you're not running everything on local host you're actually that real like SSL handshakes and real conditions that are much closer to what your users will experience.
[00:02:11] So, additionally you get the same kinda filmstrip and you can even turn this into an animated gif so you can sort of play a couple side by side, and see, periodically over time you might ship a change and then see, all right, is this making things better or is this making things worse.
[00:02:30] On the bottom you can see a big breakdown of exactly what's being downloaded, and these vertical lines here they represent important milestones like the DOM is ready. Right, you'll get a nice vertical line there, so this is a really nice visual way to track things and it is completely free.
[00:02:51] The only downside is you have to wait in line sometimes, for a couple minutes, you're sort of in the queue, and then your page is tested. And it must be a public URL, at least to use the one that's hosted on this domain if your working at an organization that has a firewall, and you're not allowed to have public URLs to hit your staging environment.
[00:03:12] It's open source you can host it yourself and you can setup a little virtual machine behind your firewall and it is yours to do with what you like. And ultimately at the end, you get a letter grade, which is even more course judgement than a score out of 100.
[00:03:33] You can see that Steve's dinosaur JS .org domain, that could use a little help when it comes to caching.
>> Steve: Little bit of caching.
>> Mike North: You gotta do better, Steve, better work on that. And then, looks like he's not using a CDN, again almost everyone's going to have problems here.
[00:03:53] If you get all As, it's because it's an example that is designed to get all As. LinkedIn.com is going to have issues here, Google's gonna have issues here.