Question

I am trying to make sense of the Chrome Developer Tools when I run performence tests on my websites. If you select Network on the tools meny it will look like this:

Then if I select the performance file I will have this information:

My question is this:

1. What is the meaning of DNS Lookup, Connecting, Sending, Waiting and Receving? What is happening between the server, network and browser at each stage?
2. On the first image, the red line reads “Load event fired” and the blue one reads “DOMContent event fired”. What is the meaning of this and why is it the DOMContent event is fired after all the content has been loaded?

Answer 1

I’m not sure if this is a good fit for SO as this is a network question more than a programming question but I’ll answer the parts I can…

DNS Lookup

When you connect to a website, it has to look up the IP from the DNS. For example, your computer will contact a DNS asking if it knows where “google.com” is. If it does, it’ll give you an IP. If it doesn’t, it’ll either give you the IP of another DNS or it will contact that DNS itself (I’m not sure which implementation applies where) until eventually you end up with the IP of the host you’re looking for.

Connecting

Time it takes to connect with that IP. I’m not sure of the details here.

Sending

After connecting, you send the request to the server. It can be a request to view a page or submit data or anything.

Waiting

After sending your request, you wait for the server to respond to it. It can be busy or might take a while to process whatever you requested.

Receiving

Once the server has processed your request, it’ll send data back to you.