WebPageTest Performance Audit

[00:00:00]
>> What are the tools we use? I'm talking about free tools. WebPageTest, WebPageTest is a website, it's the bible of performance engineers. Now, it's owned by Catchpoint, but it's still free, the tool. It's open source, by the way. In WebPageTest, you can enter a website URL, firt.dev, pick a simple configuration, or you can select a lot of advanced parts, or you can, for example, select to run a Lighthouse audit or include a repeat view.

[00:00:39]
So it will actually make the analysis, then, Refresh and make another analysis with a cache inside. By the way, it's changing the color, right, the background color. We can start the site performance test, that's what I want. Only see Core Web Vitals. Visual comparison will let you have two versions of your website in case you have, I don't know, staging and development.

[00:01:11]
You can put two URLs and see the comparison. But let's start with just default, site performance. And here you can say, yeah, I want mobile, I want desktop. And this is going to use real devices on the. And because it's a real device, it's a limited resource, sometimes you need to wait, okay, for that resource to be free.

[00:01:33]
It will take some time, and then it will give me the answer. This is one of the most complete tools for free that we have for web performance. So it's a masked tool. So we have a summary, we have the performance metrics. By the way, this is not a real Chrome user metric ,this is right now.

[00:01:56]
So right now with one device, in one particular part of the world, this is what we got. The other one that we saw is the 75% of our user. So for some reason right now, I'm over 2.5 on Largest Contentful Paint. It can be the server, the CDN, something is taking more time.

[00:02:18]
And here, we can see the visual page loading process, if you click Explore. Remember I mentioned that this is how you can fill the paint. So this is the filmstrip view, okay? The filmstrip view, I can change the settings, and I can say I wanna see one screen every 100 milliseconds.

[00:02:45]
So now this is what you see, okay? Can you see white, white, white, white, white, white, white, white, white, and then something? So remember I said this is how you can fill the paint or you can show your managers that this is a flow over a timeline. And you can also view a video.

[00:03:08]
And if you want a slow motion, the video, but I don't think you need that, okay? But with the video, you can fill the paint. Yeah, my website is not so slow, but you can still fill the paint, the whites. So that's what you show to your managers to show you that 12 seconds is too much.

[00:03:29]
They can fill the paint in the video with the timer at the bottom, okay? Make sense? Let's go back. That's the video of the loading process. One important part that we have here, this is pretty cool, can you see that red line we have there? There is a red line here.

[00:03:51]
That red line continues here. So for example, let's say I wanna know what happened in the timeline when we see something, like here. It seems like here, there was something that happened that went from white to almost seeing the whole content at once. So what I'm going to do is I'm going to move the scroll, so I'm going to match that red line with this part.

[00:04:23]
So I will do this there, okay? Now, that red line I mentioned, it continues here. So now I can scroll down and try to understand what happened in the waterfall chart that my content appear at that point. So at this point, I can guess only, that all these CSS files were downloading.

[00:04:52]
You can see a font, font from Google APIs. I think that that's the only thing that I can get from here. So remember I mentioned that CSS should be an appetizer, remember that? Short and, well, that's because the browser will not render a big cell before having all the CSS file downloaded in part.

[00:05:13]
And we can see it in action here. We didn't see anything on the screen before the CSS files were downloaded. Does it makes sense? So getting a master of this tool will convert you into a master web performer. By the way, here, can you see there are some green lines?

[00:05:32]
Those are largest contentful paint or first paint. Those are the other metrics that we were mentioning. And what is this? Can you recognize this chart? We see here, this graph. This is the graph that makes speed index. So the speed index was the area above the curve. Then in my case it was 0.8, I think, which is good, because it's less than 2.5.

[00:06:04]
Maybe you're saying, well, but that doesn't feel good. Well, if your final value is still within two seconds, three seconds, it doesn't matter, because, remember, we are measuring how much blank the user has seen over time. You have another question, I think, no? Okay, it was just me.

[00:06:29]
And, well, more information will appear here for WebPageTest. So it's actually a great tool, and we will use this tool a lot for web performance analysis. The disadvantage of this tool is in the cloud, so your content should be public and accessible. It doesn't work local, with local content, unless you download WebPageTest and run it locally, that you can, because it's an open source tool.

[00:06:57]
So you can create your own local infrastructure for running your own WebPageTest solutions. I'm talking about companies that they don't wanna public their content or they don't wanna use a service that is from another company, in this case Catchpoint. So, well, that's okay, you can download and create your own instance of WebPageTest locally.

[00:07:20]
Does it make sense? So as advanced web performance engineers, we are not going to just rely on the score from Lighthouse. We are going to use tools such as WebPageTest to analyze the whole situation and try to find moments for improvement.