Web Page Test, Totally Tooling Tips (S3 Mini Tip #3)

Key Takeaways

[Music] Hello, I'm Addi Osmani and I'm Matt G. Okay, so webpage test is this great tool um for testing the performance of your site from multiple locations around the world. We use it a lot when we're building um progressive web apps at the moment. Uh so this is like the interface to web page test. The basic idea is you just go in and you fill out um the site that you want to test out. Um what we usually do is we go to advanced settings and we first of all set the number of tests to run. Um because these can vary because webpage test often runs on actual devices. Um and you can set you know the location that you want to test from around the world. Um 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 um 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. Um, and it includes like the uh timeline breakdown and screenshots just showing you all that nice stuff. But uh for speed index, you basically want to try getting for for at least cable um as close to a thousand as possible. Yep. And if you're targeting like 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 like zero as humanly possible. Like 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 the HTTP cache and it should be super fast. And in this case, um, Paul Loose is using service worker. So you'll see that he's getting a pretty decent, um, speed index, which is good. Um, 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. Um, because a lot of the time your users might be on the go. They might be like on the train or like running away from the cops or something, I don't know. Um, 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. And 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 has now changed. So, this is still, you know, it's under 3,000. It's doing pretty well. Um, speed index for repeat views 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 it's a 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 webpage 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 um is also in advanced settings. Just capture uh start the test. And when you do that um you'll get this video. So on that tab that we were on before you'll notice there's this little link called filmrip view. Click that and it'll actually give you um a film strip showing you um all of the frames that were captured uh over time. And this is super useful for actually getting to see things like uh first meaningful paint. So here we can see at around 2 seconds we actually got like some of the uh top toolbar being drawn and the material design fab icon. We have some text. We've got a a loader showing. Um, and you can see the progression through to I would say I would say 4 seconds is about when you get your your proper first meaningful paint in place. Um, some members of the Chrome team say first meaningful paint is when you've got like actual text showing up on the screen. So 4 seconds um is is how long that took. And this is 3G as well. Um, Paul Loo does really well on on the cable scores for this stuff. You can also get a video view. So remember we captured video. Um, if we go to the video view here, you can actually see um, okay, well, all these frames are are playing back and it shows you the progression through to, you know, 4 seconds until we've actually got visual completeness. So, that's useful as well. Back on webpage 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 dev tools timeline. Now, if you check that and you go and you do recording, um you'll actually get this little timeline option um in the uh very left in a column um you can download a Chrome DevTools timeline there and then you can open up um in DevTools. You can just like go to your timeline view, load the JSON file and load that in there. You can also just click view and it will show you that timeline um in a tab. Um there's another tab on webpage test here called uh visual comparison. Now, this is super useful for like let's say you you've got some assumptions you want to check out like um you've got a new UI that you you want to ship and you want to see how much you know how well it compares performance-wise to your old one or like um you want to see you know what the impact of ads are on your page and and stuff like that. Like it's good if you had like staging versus release and you've done a load of 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 like some of the apps our team have been building. Um, and it looks a little bit like this. So, I've got Paul Lewis, Jake, Kinland, and me. Um, and you can see the progression um, of visual completeness here. You know, half a second, we still have a white screen. Then around 0.7, oh, look, Jake's got Jake's got some content loading up. And Paul Kinland's Airorner app, which is basically has nothing, but it's the fastest thing there is there. I do like how it loads and then it's just like done. Um, but you can see the the progression. Like around one second, I've actually got some content here. Jake's already got all this text and everything going. Um I think he's using streams and other You had to say it, didn't you? Streams. Streams and other magic. Um and this is this is just really nice for being able to compare um visual completeness across a few different uh builds of things. Another option on webpage test under advanced is the ability to disable JavaScript, which is useful if you want to like check out the impact of like third party resources and ads and stuff like that. It's also useful if you just want to see like what happens if you're in a browser where like let's say hypothetically your JavaScript failed and you relying it heavily, you can find out. Yeah. And if you need even more granular control over this um type of thing, you can also block re uh requests to specific resources over in the block tab. You wanted you 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 like new and old runs of my site. And it turns out Webpage Test actually logs a lot of this information. So, you can literally select like runs from the past year from any user that's just stuffed your site through webpage test and actually get access to those test results. So, if you wanted to compare like really old builds versus new, um, you can totally do that through webpage test. is all just there, which is awesome. Uh, one last thing, um, this is something I only recently discovered. So, Webpage Test also has this JPEG info tool. Um, so webpagetest.org/jpeg info. You can just add in, um, a URL to any image here and analyze it. And what it'll actually do is it'll show you like what um compression uh savings you can get by going for lossless compression um or changing up the image quality to something a little bit different to what you've got right now like size like 85 in this case which is still saving you bytes on the on the original 140k um image. But it's just just a nice little extra thing webpage test does. Not a lot of people use this like know this still exists but it's kind of neat. That's pretty cool because it also tells you like gives you a score of like image compression on your runs and everything. So, it's nice to be able to do that. There's a ton of other options um web page test have got. You can keep your test private, set labels, you can set um custom user timings. So, um if visual completeness requires um better markings up in the uh the waterfall view that they've got, you can check that stuff out. Supports authentication and a ton of other stuff. So, Webpage Test is awesome. Go check it out. Yes, use it every day. [Music]