 Hello, I'm Adi Osmani. And I'm Matt Gorn. OK, so Web Page Test is this great tool for testing the performance of your site from multiple locations around the world. We use it a lot when we're building progressive web apps at the moment. So this is like the interface to Web Page Test, the basic idea is you just go in and you fill out the site you want to test out. What we usually do is we go to Advanced Settings, and we first of all set the number of tests to run. Because these can vary, because Web Page Test often runs on actual devices, and you can set the location that you want to test from around the world, we set three so that you get a relatively decent set of different pieces of data, and it's just going to average them out for you. So when you go and you run your test, it's going to look a little bit like this. So this is testing Paul Lewis's Voice Memos app out. And you get this nice little table at the very top that's got data like load time, start render, and the speed index. Matt, what's the speed index? I believe the speed index is basically the visual completeness of the page relative to all the pages on the internet. You were right, sir. You were right. And it also includes the timeline breakdown and screenshots, just showing you all that nice stuff. But for speed index, you basically want to try getting for at least cable as close to 1,000 as possible. And if you're targeting 3G, you're looking at maybe around 3,000. And I'd also argue on the repeat view, you should basically be getting as close to zero as humanly possible. Repeat view is basically like the page, everything's loaded once, everything should be in the cache. So you should literally be pulling everything from the HTTP cache, and it should be super fast. And in this case, Paul Lewis is using Service Worker. So you'll see that he's getting a pretty decent speed index, which is good. So just try to get that as low down as possible. When you're in your advanced settings page, you'll also notice that there's a section called connection. Because a lot of the time, your users might be on the go. They might be on the train or running away from the cops or something, I don't know. You should probably also try out the 3G settings and see how well you're doing there. So just select Mobile 3G, go and run your test again. That will look a little bit like this. So very similar to the page we had before. You'll notice that the speed index score is now changed. So this is still under 3,000. It's doing pretty well. Speed index for repeat view is also gone up. It should probably be a little bit lower. I think it's nice, basically, to get something that is out of your control. I think that's the main reason why I use this, is it's something like my environment, where I'm running these tests, can't be affected. It's just web page test is an independent party. So it's good. It's good. It's solid. So another thing that we usually check is the capture video option. So capture video is also in advanced settings. Just capture, start the test. And when you do that, you'll get this video. So on that tab that we were on before, you'll notice that there's this little link called Film Strip View. Click that. It'll actually give you a film strip showing you all of the frames that were captured over time. And this is super useful for actually getting to see things like first meaningful paint. So here we can see it around two seconds. We actually got some of the top toolbar being drawn and the Material Design Fab icon. We have some text. We've got a loader showing. And you can see the progression through to, I would say, four seconds is about when you get your proper first meaningful paint in place. Some members of the Chrome team say first meaningful paint is when you've got actual text showing up on the screen. So four seconds is how long that took. And this is 3G as well. Paul Luister's really well on the cable scores for this stuff. You can also get a video view. So remember, we captured video. If we go to the video view here, you can actually see, OK, well, all these frames are playing back. And it shows you the progression through to four seconds until we've actually got visual completeness. So that's useful as well. Back on web page test. If you go to Chrome, so there's a dedicated Chrome tab here with a few extra options in there. One of them is Capture DevTools Timeline. Now, if you check that and you go and you do recording, you'll actually get this little timeline option in the very left in a column. You can download a Chrome DevTools Timeline there. And then you can open up in DevTools. You can just go to your Timeline view, load the JSON file, and load that in there. You can also just click View. And it'll show you that timeline in a tab. There's another tab on web page test here called Visual Comparison. Now, this is super useful for, let's say you've got some assumptions you want to check out. You've got a new UI that you want to ship and you want to see how well it compares performance-wise to your old one, or you want to see what the impact of ads are on your page and stuff like that. Like it's good if you had light staging versus release and you've downloaded performance work. You want to make sure that you are actually doing well. Because I'm a jerk, I'm just going to use this to compare the performance of some of the apps our team have been building. And it looks a little bit like this. So I've got Paul Lewis, Jake, Kinlan, and me. And you can see the progression of visual completeness here. Half a second, we still have a white screen. Then around 0.7. Oh, look, Jake's got some content loading up. And Paul Kinlan's Air Horner app, which basically has nothing, but it's the fastest thing there is there. I do like how it loads, and then it's just done. But you can see the progression. Like around one second, I've actually got some content here. Jake's already got all those texts and everything going. I think he's using streams and other. You had to say it, didn't you? Streams. Streams and other magic. And this is just really nice for being able to compare visual completeness across a few different builds of things. Another option on web page test under Advanced is the ability to disable JavaScript, which is useful if you want to check out the impact of third party resources and ads and stuff like that. It's also useful if you just want to see what happens if you're in a browser where, let's say, apathetically, your JavaScript failed and you were relying heavily, you could find out. Yeah. If you need even more granular control over this type of thing, you can also block requests to specific resources over any block tab. You talked about test history. So I had no idea that this was a thing. Yeah. So I think what I was doing was I was changing my website and I actually wanted to retroactively compare new and old runs of my site. And it turns out web page test actually logs a lot of this information. So you can literally select runs from the past year from any user that's just stuffed your site through web page test and actually get access to those test results. So if you wanted to compare really old builds versus new, you can totally do that through web page test. It's all just there, which is awesome. One last thing. This is something I only recently discovered. So web page test also has this JPEG info tool. So webpagetest.org slash JPEG info. You can just add in a URL to any image here and analyze it. And what it'll actually do is it'll show you what compression savings you can get by going for lossless compression or changing up the image quality to something a little bit different to what you've got right now, like size 85 in this case, which is still saving you bytes on the original 140K image. But it's just a nice little extra thing web page test does. Not a lot of people use this. No, this still exists. But it's kind of neat. No, it's pretty cool because it also gives you a score of image compression on your runs and everything. So it's nice to be able to do that. There's a ton of other options on webpagetest.org. You can keep your tests private, set labels. You can set custom user timings. So if visual completeness requires better markings up in the waterfall view that they've got, you can check that stuff out. It supports authentication and a ton of other stuff. So webpagetest.org is awesome. Go check it out. Yes, use it every day.