Introduction to Dev Tools, v3 Network Performance Q&A
Transcript from the "Network Performance Q&A" Lesson
>> What is the correlation between priority and waterfall?
>> The waterfall will show the actual statistics for that particular request, right like that request. But the priority is how the browser chooses which order to fire things in. So if you have a lower priority item, you will see that it spends time either queueing or stalled.
[00:00:23] If you have more than six, both conditions have to be met. If you only have six total items, the lowest priority gets fetched at the exact same time as the highest priority. But if you have more than six requests, that's images, scripts, CSS, all that stuff, then you'll see lower priority items will spend time queuing whereas higher priority items will not spend time queuing cuz they'll go right away.
>> So for the waiting, that's specifically an issue with the server side code, or it could be like you said something with the database, that's it, and usually you have to look there to find a way to speed it up?
>> Yeah, that's a great question, so time to first byte and waiting, are those always server side issues or could they be front end issues?
[00:01:02] I mean, technically it could be front end if your connection is so bad that a byte takes a while, there could be some issue there, right? If you're on a really, really weak connection, your time to first byte will be slow as well.
>> But typically, since it's such a small amount of data, if you see a slow time to first byte, it usually means that between the server getting the request and giving the very first piece of data back is taking a long time, something in there, whether it's server processing the requests or something in the database or something like that.
[00:01:33] It could potentially be something's slow for you, but for example, if other websites are loading great for you and then your website has got a slow time to first byte, that's almost guaranteed to be a server issue.
>> And did any of these also take into consideration the user's machine?
>> So they don't normalize data, they won't say for you this is doing what, Lighthouse for the audits will do something kind of like that. They'll say, this is pretty good for a slow device, something like that. But these are just going to show simply the time taken.
[00:02:09] So if we do a refresh here, it's just gonna say, how many milliseconds it's spent at each phase. So it's spent six queueing, DNS lookup was four milliseconds, and then you can see that the time to first byte took 60, which is very fast, but you can see just pure milliseconds.
[00:02:26] So no, it doesn't normalize the data at all.
>> I have a question. What is the initiator columns about? Yep, so the initiator is who requested that. So if you think about you have an HTML file that has a script source main.js in it. So main.js' initiator would be index.html cuz index.html is what called that.
[00:02:52] And then if in that script source you did a fetch for food.jpg, then food.jpg's initiator would be main.js cuz that was who initiated it. So it's like, why did you call this thing? It's like, so it's like this one, we have this, give a refresh here, we have this network.html.
[00:03:14] So we have network.html, that was initiated just by the server, right? That's always the the main thing you get is an HTML file. But then if you look at all these, you can see the initiator network called the JS, network called the PNG, network called this CSS file.
[00:03:30] But the CSS file called these other two CSS files, so you can see the initiator is different for that.
>> I just had a question. So if we do a cmd F on the network panel, there is a drawer which opens up to the right. I was wondering how can we use that, this one, yeah.
>> So this one's kind of interesting. So you have kind of two options here, you have one is the option just to filter, to kind of filter this list down, right? And so you can do things like if you search for net, you can do something like that.
[00:04:03] You can also do, I think it'll support some amount of regular expressions or whatever. Yeah, the other option that you can do is you can do this kind of more advanced search by cmd+F or ctrl+F. And now when you search for things in here, it'll actually parse all the response data as well.
[00:04:21] So you can like a lot of these will have headers. So basically the filter here is gonna search your names, right? That's what it's gonna search. The search bar here is gonna search the names, all the response headers, all the request headers and the resulting response body itself.
[00:04:37] So you can really kind of filter through. We're almost done with the network, but I do have one call out that I like to do which is rightfully, we obsess about network performance. It's a good thing to obsess about. And the faster you get your site, the happier users will be.
[00:06:54] And you can do really cool things. You can asynchronously load bundles. There's a Webpack Frontend Masters course where Shawn shows how to split your bundles up and only load what you need at page load and bring stuff in. So there's a lot of different ways we can think about it.
[00:07:26] So just to call out on that stuff. Cool, any questions about that?
>> When you go to the size, right, when you're in your Network tab, you're looking at the size column. If I were to refresh this page right now, and not a hard refresh, but just a refresh, I don't see it on your screen, but I see some assets showing up as dis cache [CROSSTALK] memory cache?
>> Yeah, I have this cache disabled. So if I unclick that, yeah, so these are just things that the browser has been able to optimize for you. So these items that are just CSS file items that are just being cached on your disk, so they won't have to load.
[00:08:11] So you can see the page load time goes down to zero milliseconds. This is similarly true, you'll see it if you cache responses to yourself, right? So if you set cache headers on your network requests, then you'll see those reflected there as well.