Waterfall Chart in Chrome Dev Tools

[00:00:00]
>> Now we've seen the metrics, so we know the metrics that we need to improve, and the balance sheets that we have, okay? Now let's talk a little bit about tools and charts. Most of the time you're going to work with, so our most important tool for web performance will be that chart.

[00:00:19]
That chart is a waterfall chart. That chart will show you, In y-axis from top to down, resources in the order that they were downloaded, and the x-axis time, from 0, that's from the navigation start. To typically, page loads can also be over page loads in case you have a client side application.

[00:00:46]
So each row is a different resource. What's a resource, a file? An HTML file, a CSS file, can also be a WebSocket request. It's a request, okay? We will use this chart a lot. These charts, typically they have on each bar, you will see a bar different colors.

[00:01:10]
Unfortunately, we don't have any standard for colors. So each tool will give you a different color for the same thing. Each bar so for example here we see green then orange, then violet, then another light green, and then blue, are showing me in the time, different parts of the loading process, okay?

[00:01:33]
We'll get into the details on that. For example, I'm requesting a page. The first step is the request, so I'm waiting for the server to respond, then the server responds, and then I'm downloading the file. Makes sense? I'm downloading the bytes over the bandwidth, and when I have the file, I need to parse the file.

[00:01:51]
Well, each step will be a different color in the bar. So you can recognize what's going on, and typically, waterfall charts, they look like this. They are much more complex than the simple one that you saw there. Now, we have two per URL, one for the first view, and another one for repeat view.

[00:02:17]
Because it's the first time you're accessing that website, you have never seen that website before on the browser, that's first view. You have a completely clear cache. Your computer doesn't know the IP address of the server, then we have repeat view. In that case, you're coming back. It can be one minute later, a week later, and the repeat view might take advantage of some things such as caching, okay?

[00:02:49]
Makes sense? So, different tools, as I mentioned, will give you the same information differently. And also you will find sometimes that there are some vertical bars or lines. Can you see those here? Here? Those are milestones over the timeline. Typically, the milestone from the metrics that we saw, such as time to first byte, first paint, largest contentful paint.

[00:03:20]
So you will see those vertical bars happening there. So then you understand what's going on, okay? Makes sense? We will see this in action now with our project. Anyway, another tool that it's actually pretty cool to see is called the filmstrip view. In this case, the filmstrip view is a list of screenshots that you can see in an array, it's an array of screenshots taken over time.

[00:03:56]
This is actually pretty good to actually feel the pain of your websites and actually how you can convince your managers that your website is slow. Because I'm pretty sure that some of you might go to your manager and say, hey, our websites are slow. It's taking 12 seconds to load.

[00:04:13]
And for your manager, 12 seconds it's actually pretty good, pretty fast. 12 seconds is nothing, okay? Well, the way to say the way you prove that that's a lot is to show the filmstrip view, okay? So I'm going to get out of here, and let's try to see the tools that we have to see this in action.

[00:04:36]
Well first, if I'm in Chrome, let me start closing some tabs that I'm not using. We can go to frontendmasters.com, I can open dev tools, and now we can go to Lighthouse, that's okay, but also there is a performance tab there as well. In the performance tab, you can start recording something.

[00:05:04]
You can record the session. You can enable web vitals. So you can actually see those metrics, the web vitals metrics, the most important metrics there. You can throttle the CPU, what is that? It will try to throttle to slow down your CPU to simulate a worse device. I have an M1 Max here.

[00:05:28]
Yeah, maybe that's not the CPU that everyone has. So you can try to slow it down, and I can also throttle the network. I can simulate the Fast 3G, or I can add here a custom profile. I can say Fast 5g, you set, download the upload and the latency, and he will simulate that latency as well. Does it makes sense? So, you can throttle the network.

[00:05:58]
This is not a real user metric, but you can simulate one. Okay, make sense? So, and then when you hit record, and then you can refresh the page. It was pretty fast anyway. [LAUGH] So then when you say stop and here you will see the timeline and what was happening.

[00:06:24]
The performance tab that we have here is not just for network requests, it will show you everything. It will show you also, for example, rendering process. So what was going on in the CPU. So, you can go over here and see how can you see that thing, that's a Layout shift.

[00:06:48]
If it's bad or not, it depends on the CLS value that you get, maybe it's not really bad and it's pretty good. So this is one tool. There are many tools available, actually. Another tool that we have is another tab, the network tab. This network tab is available on Firefox and Safari as well.

[00:07:11]
I'm using Chrome because it's the browser with more tools for web performance. Compared with Safari and Firefox, it's far beyond the other browsers in terms of tools available. So, If I refresh the page, what you see here, it's actually the waterfall chart. You are seeing it differently, but it's a waterfall chart anyway, and let me open this in a new window.

[00:07:42]
Maybe I'm going to decrease the font size a little bit to see the better, where is it? Here. Let me refresh. There we are. Let me change a little bit. You can see you can reorder. The network tab, I need to make the waterfall column larger. So what you see here, let me refresh again, is a waterfall chart.

[00:08:17]
By the way, if the website is still making requests as it is, is changing on the fly. So maybe what you want is refresh, and then pause here, the recording. So now it's not going to change. It's an a static analysis tool. So this is a waterfall chart.

[00:08:36]
You can see, Each request over time, okay? Over time with an each bar has different colors. We have a green, we have a blue. Maybe you don't have that priority column that I'm seeing here. So I'm going to disable that, and we're going back into it later. By the way, you can see I can right-click over the columns, and add or remove columns.

[00:09:04]
There are a lot of information you can get from here. Remember, I'm in the Network tab in Chrome DevTools, okay? So this is a waterfall chart and here you can see there is a blue line here and a red line here, the vertical line that does express at which moment something has happened.

[00:09:26]
Also, something that you can do from here is click Capture a screenshots. If you click Capture a screenshots, and then reload, Now, we are going to see what happened on the website at that particular moment in time. And by the way, FrontendMasters is pretty fast. So that's why we're not going to use it as an example of something that we can improve.

[00:09:58]
There's always room for improvement on every website, but it's better to try to find one sample that is not already optimized. But I'm just showing you how you can use DevTools to see the waterfall chart that we will see during the rest of the day, and how do you see themes review, okay?

[00:10:18]
So Chrome DevTools is the first tool that we typically use as performance engineers in the network tab, the performance tab, and also the lighthouse tab. I'm not sure if you know this, but you can drag the tabs as well there. So you can put them all together as a group of performance related tabs around Google Chrome.