This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.
Transcript from the "Color Codes" Lesson
[00:00:00]
>> Jon Kuperman: So, if we head back over to the slides, there's a lot of different colors here. So, what I've done is I've broken them out into their color codes and then what those things mean. So, the first one that we'll see is queuing, it's not all that common.
[00:00:12] For anybody that's familiar with it like HTTP 1 can only do a maximum, like browsers can only do six requests at most at one time. And so if you have more than six requests that need to go out, it just forms a simple queue for them. So, it dispatches those six requests, and then every other one gets put in a queue, and as soon as one of those six finishes, it queues up the next one, and it goes.
[00:00:32] So, you wouldn't see queueing if you only have a few files, like I do on my examples. But you might see it, for example, if you had like seven CSS requests sent. The first six would get fired, the seventh one would queue until one of the six was done.
[00:00:46] And so, yeah, so why its isn't all that common to see, but it is important if you aren't bundling your stuff. So this is why everyone suggests that you bundle your resources together into one JobDescriptor, one CSS file, as specifically to avoid this queuing. Because, otherwise, if you have an app that has like 30 CSS and 100 JavaScript files, and you just script source and link ref all of them.
[00:01:08] You're gonna spend a lot of time queuing that you could be spent downloading this stuff. The next color that we'll see is grey, stalled or blocking. So, this is like basically, they have specific colors, then they have kind of blankets over the top of them. So stalled or blocking is also waiting.
[00:01:28] So your request hasn't even been sent out yet. It's hasn't hit the server. It hasn't left your computer yet. So, this is kind of the blanket over queueing and any kind of proxy lookups, any kinda networking stuff like that that has to happen. Which we'll move into the next one.
[00:01:43] So, the next one is proxy negotiation. So, if it's hitting a proxy server to go out, it knows it hasn't hit the actual server that it's requesting yet. You might see, if you have a slow proxy server, you might spend time stuck in this gray area where you're waiting.
[00:01:58] The request is done queueing, you've sent it out, but it hasn't even reached the server yet. So, it's still sitting in this proxy server. The next one is DNS Lookup. DNS lookup is usually really quick, right? It's when you have a domain, like, okay, google.com/ads.js or whatever. When I send that request out, it has to act first, do a DNS lookup to see what IP address is behind that URL that I've just given it.
[00:02:22] The only thing to keep in mind here is that, similar to a lot of different files is, DNS lookups cached. So, if every single one of my requests is coming to my server, like local host or whatever, it only does one DNS lookup for the first file and then after that their all instant, it knows where to go.
[00:02:37] But if you start serving files from a bunch of different domains if you got some ad domains and some analytics stuff and this and that, it's gonna have to do with DNS lookup for each one of those. That being said, they're still relatively fast. It's not like I would avoid doing multiple domains.
[00:02:50] But just know that you'll see this cost every time it has to hit a new domain. The next one is the initial connection connecting. So, this is kind of getting into network stuff, but it's like, I have my stylesheet, it does the DNS lookup to find the actual IP address behind the URL I've given it.
[00:03:07] And before we can start moving data we have to do that TCP handshake, right? So like, SIN ACC, it's making sure that we have an established connection. This is also time negotiating, there's similar hand shake for SSL to be connected. Again, really fast on most always but it is a color that you'll see.
[00:03:24] And then subset of that is thid dark orange one. Which is just the time spent doing an SSL connection. All right, now we get into green which we see really common. Green is the request has been sent. So, we've gotten the first byte. How long did it actually take to send the network request?
[00:03:42] So, this one we'll see pretty often. And then the one that we'll see the most of is this waiting, right? So it's, again, kinda walking through the high-level networking thing, it's like, I have this URL, we do a DNS lookup to get the IP address. Then we do the kinda TCP connection, and the SSL, we get everything connected.
[00:04:01] And then you start the network request, we're good. Now we're ready and I'm ready to receive that CSS file or that Javascript. So now, this is the time, how long did it take for that first byte to come over the wire. And so starting to kind of glean information here.
[00:04:15] If we see big, long patterns of the colors we've covered so far, there's probably some kind of networking configuration issue going on. You can say, why is the DNS lookup taking so long? Or the SSL handshake is taking a really long time, kind of talk to the ops team about that.
[00:04:29] We start seeing this time to first byte, this green taking a really long time. Now we're looking at a slow application server, right? It's just one byte, so it's a consistent size. So, why is it taking so long for me to get this first byte? A good example here is if you're just doing a lot of work, right?
[00:04:44] So, if I hit your page for the index dot html before you send it down you have to do a database query, and that datbase query is really slow. It's gonna take a really long time between us accepting the connection and you fetching and then sending me that first byte of data.
[00:04:58] So this one kind of goes to the back end team. I'm going to be, hey, the first time to byte on this request is really slow. Can you help me out. Then we see content download, downloading. This is just the actual time. There's not a ton to be done here.
[00:05:12] The bigger your script and the slower your connection, the longer amount of time you're gona see. This is again though, were it's really good to use some benchmarks. Cuz it might be really fast for you doing local development or doing development on a high-speed connection. But you do want to keep in mind how big the script is even if it shows really small content download for you.
[00:05:31] Okay, cool. So, kind of going through all that, no exercise here, just a little bit of not even so much a Q and A, but I have some random examples that I've pulled from miscellaneous sites. So, somebody's like this is really slow, it's taking, you can see a the bottom, almost 2 seconds or a second and a half.
[00:05:48] Why is this thing so slow? So you run the Network tab, you hover over it, you see this. What are we looking at here? Why did it take so long?
>> Speaker 2: The content download's pretty high, so you must be downloading some pretty heavy files.
>> Jon Kuperman: Big file, exactly, hey, it didn't queue 0.4 milliseconds.
[00:06:06] Nothing got stalled out. The request was really fast. The time to first byte was really fast. The server's doing well. It just took a long time it's big right or your connection's slow or both great. Okay, so then we see this one. Somebody's like this one's really really slow too but it's a small file what's going on here?
[00:06:23]
>> Speaker 2: Waiting.
>> Jon Kuperman: Why is it waiting? What's it doing?
>> Speaker 3: [INAUDIBLE].
>> Jon Kuperman: Yeah what does that imply? So we're seeing it didn't queue, no stall the, request came back really fast so we got connected. The file's small, the download was almost instant what are we waiting what was the problem?
[00:06:39]
>> Speaker 2: The back end, slow application server.
>> Jon Kuperman: The application server exactly. The network request connected really quickly, the file size is really small. There's something up with this endpoint like this endpoint taking almost a second to complete. We gotta figure out why that is exactly. Cool, what about this one, this ones a little weird, kinda got a lot of colors in here.
[00:06:58] What can we glean from this, it's also, if you look at the bottom, it's pretty fast, so not to worry there, but what kind of stuff is going on here?
>> Speaker 4: DNS lookup.
>> Jon Kuperman: Yeah.
>> Speaker 4: So, it's probably a new Domain queries.
>> Jon Kuperman: Absolutely, right? So it's doing a DNS lookup which the other ones aren't.
[00:07:18] So it's probably the first time we're using that domain, and everything's taking a little long, right? Like the SSL handshake, just that whole connection is taking a little bit more time than we're used to. Anything else going on here?
>> Speaker 3: Since it's intial connection it means there's no cache.
[00:07:37]
>> Jon Kuperman: Yeah, yeah, exactly so if the file downloads pretty quick, the time to first byte is nice and fast. Yeah it's just all these kind of like somethings going again, this ones fast enough, right? But these colors indicate exactly, there's something going on. The DNS lookup probably means the first time hitting that URL, and there's just something kind of, all this setup time of the SSL handshake and all that stuff.
[00:07:56] The only real way to avoid cost on this, right, is to serve whatever asset that is from the URLs that we've already hit, whatever URL we've already hit on our document. All right, and then what about this last one here? We see a big, white bar for Queueing.
[00:08:09] What's going on with this one?
>> Speaker 2: Queueing?
>> Jon Kuperman: Yeah, why is it queueing?
>> Speaker 2: About your source, the comments JavaScript or something that we have so many of them.
>> Jon Kuperman: Exactly, you've got too many. You can only do the six synchronous connections at once, six HTTP requests at once.
[00:08:27] If it's queueing, it means it already is busy, as busy as it can be. This file download super fast it just wasn't able to start for a really long time, too many files, perfect, cool.