What do the colors within the horizontal bars in Web Performance HTTP Waterfall Charts indicate?

A HTTP Waterfall chart can provide a quick visualization of what is wrong with a slow loading website.

Chapter 3 of Stoyan Stefanov's Book of Speed has a nice explanation of what the colors in the a bar of Waterfall view (of twitter.com) generated by WebPageTest, mean:

Dark green represents the time taken to perform a DNS lookup. DNS (Domain Name Service) lookup is the process of matching the friendly domain name twitter.com to an IP address (such as 128.242.240.20), which the browser needs in order to know how to get in touch with the server. Think of the DNS lookup as being like a phone book: your browser knows the name (twitter.com) but needs the number (the IP address).

You can see on the waterfall chart on Figure 3.2. that a separate DNS lookup needs to be done for every domain (twitter.com, a1.twimg.com, a3.twimg.com, s.twimg.com) because sub-domains may live on a different server with a different IP address. 

Orange is the time to establish a connection between the server and the browser. 

Light green is the time-to-first byte (TTFB) when the browser waits for the very first piece of information to be sent by the server. In the case of dynamic HTML pages this is the time spent to assemble the whole page on the server. If you're busy optimizing databases and server-side code, you'll actually be optimizing the TTFB of the page. As you can see, in the grand scheme of things, this is not where you should be focusing because it has relatively low impact (unless, of course, there's something seriously wrong on the server-side)

Blue is the time spent actually downloading the component 

As Steve Souders has rightly pointed out, different Web Performance tools & the Dev Tools within browsers use different colors in the horizontal bars in Waterfall Charts and that makes it a little difficult for web developers to interpret a waterfall chart which is different from what they typically use.

Table from Steve Souder's blog showing inconsistency in colors used in horizontal bar within HTTP Waterfall chart

Zoompf found that websites with the top search rankings had TTFB as low as 350 ms. They recommend that ideal targets for your initial HTML page load should be:

• Time to First Byte of 500 ms or less
• Roundtrip network latency of 100 ms or less
• Back-end processing of 400 ms or less

TTFB has 3 components: the time it takes for your request to propagate to the web server; the time it takes for the web server to process the request and generate the response; and the time it takes for the response to propagate back to your browser. Latency captures the first and third components of TTFB, and can be measured effectively through tools like WebPageTest and ping. Server processing time is simply the overall TTFB time minus the latency.