Using WebPageTest.org

[00:00:00]
>> Todd Gardner: The last tool that we're gonna talk about, that gets talked about a lot, is WebPageTest, which is webpagetest.org. Now, this is not Google affiliated. This is owned by another company called Catchpoint. But it's just so ubiquitously used in web perf discussions that I wanna talk about it.

[00:00:18]
And it gives you a little bit more control of how things work. It's not just PageSpeed Insights is like, hey, run this test from somewhere and gimme some data. This lets us do a little bit more. So here if I test target.com, I have some controls on what I wanna do.

[00:00:34]
Like not only do I have mobile and desktop, but I can choose what kind of connection and where I want the test run from. So I could say, here's all the places they have data centers from. I could say, hey, run this test from Ireland. And maybe I don't want it from Chrome.

[00:00:53]
Maybe I want it from edge. Run the test on edge, and here's I want it connected via a LTE device that's running that run how many tests at this particular screen size, let's say 1024, by 768 start. Now, this is gonna spin up. We have a lot more control here, because we're spinning up a robot in a specific place with a specific connection string, which is some control the PageSpeed Insights did not give us.

[00:01:22]
Now, this could take a little while, so we're gonna have to cut out my banter here while we let this thing run, cuz the engineering behind this is actually quite impressive. I set this thing up, and now a call just went out to a data center that's spinning up like a container that's running a real browser, orchestrated with Selenium or something like that, that is then gathering performance metrics and gonna stream the whole thing back to me.

[00:01:50]
And they did this all for free because I didn't pay anything for this. Any one of you could go and do a WebPageTest thing right now. The only downside is that there's ads all over the place, please subscribe to Catchpoint. But I mean, unless you're a giant enterprise company, you're probably not gonna subscribe to Catchpoint cuz it's a lot of money.

[00:02:08]
And it's depending on how many other people are running tests right now. So if a lot of people are doing stuff right now, it might take just a minute.
>> Learner: That's running, someone asked referred to a little earlier about when you enable throttling in your browser's dev tools.

[00:02:26]
Does that affect the web vitals extension?
>> Todd Gardner: Yeah, if you turn on something in Chrome, everything else in Chrome will be affected. So all the web vitals extension is doing is basically injecting web vitals.js into the page and listening to those events and giving you some nice rendering around it.

[00:02:47]
So if you throttled it, it will absolutely affect the results that you get back in web vitals.js. It's done, okay, great. So here's the results. We get a little screenshot of what the site looked like. And we have a summary information, we see like a bunch of the different metrics.

[00:03:07]
It's time to first bite when rendering started first contentful paint speed index, LCP, CLS, total blocking time, page size, and a full interactive waterfall about what happened. This is what's really cool about WebPageTests over PageSpeed Insights. In addition to like, not like having some control about where the test is run from, I also have a lot more interactivity.

[00:03:33]
So I can see, hey, here's actually what's loading. So I can click on things. I can say this particular request for this SVG file. Here's what was going on. It was made over this particular protocol request. It took this long and I can really try and troubleshoot a specific request that's happening from a remote user that I might not have been able to do otherwise.

[00:03:55]
That's where WebPageTest its value really shines, is you wanna test something. You don't necessarily have control of it. It might not be your website but you wanna test it for whatever reason. You can run this from somewhere else and get all of these details.
>> Todd Gardner: Yeah, that's the big benefits of webpagetest.org