Waterfall UI Conventions

August 26, 2011 5:18 pm | 9 Comments

I spend a lot of time looking at HTTP waterfall charts. Each browser has its own waterfall chart tool which makes sense since the way to track network events differs across browsers. There are some tools that span multiple browsers, like HttpWatch. Since I work across all browsers I’m impacted by the lack of UI consistency across these tools. This blog post summarizes the current state and proposes the adoption of waterfall UI conventions.

It’s easy to see the inconsistencies looking at these waterfall charts from the tools I use most frequently.* Each screenshot shows the waterfall for Wikipedia. The main areas I’m going to discuss are the colors and names for connection states, Content-Types, and loading events. There are many other areas where consistency would be nice – such as overall layout and default columns – but those are more subjective and the tool owner might feel their choices make their tool more preferred. The consistency changes I’m suggesting don’t effect the information shown, just how it looks.

Chrome Developer Tools:



IE9 Developer Tools:


One big difference is the information shown in the horizontal bar. Chrome Developer Tools uses the horizontal bar to reflect the Content-Type: blue for HTML, green for CSS, purple for images, etc. All the other tools use the bar to show the length of each connection state: DNS lookup, sending the request, downloading the response, etc. I find the Content-Type more useful, but rather than debate one over the other I most like HttpWatch’s approach where they show both: the connection states in the bar and the Content-Type in a tiny icon (see the “Type” column). Even if the other tools didn’t want to show icons, they could use font colors to reflect Content-Type. Let’s explore the connection states and Content-Type choices across the tools.

Connection States

The names and colors used for the different network connection states vary across the tools. In some cases, the granularity of connection states varies as well. The colors and names used by each tool are shown in this table:

Chrome Dev Tools Blocking DNS Lookup Connecting Sending Waiting Receiving
Firebug Blocking DNS Lookup Connecting Sending Waiting Receiving
HttpWatch Blocked DNS Lookup Connect Send Wait Receive
IE9 Dev Tools Wait Start Request Response
WebPagetest DNS Lookup Initial Connection Time to First Byte Content Download

Let’s look at the names first. Chrome Dev Tools and Firebug use the same names for every connection state: Blocking, DNS Lookup, Connecting, Sending, Waiting, and Receiving. All of these names are progressive verb forms except “DNS Lookup” – saying “looking up DNS” would be painful. I’d prefer simple verb forms which would also give us consistent tense across all names: Block, Lookup DNS, Connect, Send, Wait, and Receive. It’s also important to get similar connection states across all tools: IE9 Dev Tools and WebPagetest don’t show blocking and combine send & wait into a single state.

The colors are much more inconsistent. Chrome Dev Tools uses the same color for all states. The rest of the tools have almost no overlap. Here’s my proposal:

  • Block (gray) – because nothing is really happening
  • Lookup DNS (yellow) – like the Yellow Pages
  • Connect (red) – because this is the tricky negotiation part (red is caution)
  • Send (blue) – it’s a good color that contrasts well with red
  • Wait (light purple) – a mellow color while we wait
  • Receive (green) – because this is the payment that’s been received (green like money – sorry for the U.S. bias)

These are subjective choices and I’m open to other proposals. I most care about gray for Block and yellow for Lookup DNS. I also defer to someone who understands the color wheel. (I painted for years but never learned.)


Chrome Dev Tools is the only tool that reflects the Content-Type in the waterfall’s horizontal bars. The choice of whether to use the horizontal bar to show Content-Type or connection states is up to the tool developer. My preference would be to follow Chrome Dev Tools and use the bar to show Content-Type. A pop-up or detail view could be used to see the connection state information. Chrome Dev Tools, Firebug, HttpWatch, and IE9 Dev Tools already display a detailed view of connection states when you select a bar.

Regardless of the information shown in the horizontal bars, users would benefit in other ways from consistent colors mapped to Content-Type. This color mapping could be used as the text color in the waterfall chart and in charts of total requests and download size broken out by Content-Type.

The color map from Chrome Dev Tools is:

  • HTML (blue)
  • JavaScript (orange)
  • CSS (green)
  • images (purple)
  • text/plain (yellow)
  • redirect (gray)

I’m fine with these colors. If it was up to me I’d make JavaScript red because I have so many errors in my JavaScript. I’d make CSS purple because that’s “fancier” (CSS is used to make pages look more stylish). I’d make images blue because they’re the most common resource type and my world is mostly blue (it’s a denim thing, not emotions). That leaves green for HTML. But again, purely subjective.

Load Events

Many of the tools draw a vertical line to mark the DOMContentLoaded and window load events. Again, the names and colors vary across the tools:

Chrome dev tools DOMContent Load
Firebug DOMContentLoaded load
HttpWatch Render Start Page Load
IE9 dev tools DOMContentLoaded Load
WebPagetest Start Render Document Complete

I like DOMContentLoaded and Load because I understand exactly what’s being measured. I’m less concerned about the colors; I’d pick blue and green if it was up to me.

Now what?

I’m working with Brian Pane and Jan Odvarko on some UI changes to Jan’s (Honza’s) HAR Viewer. I hope we’ll add Content-Type icons, in which case other tools could adopt those. If you’d be willing to create those icons please contact me.

As for the names and colors, I’m not sure how to proceed. Mark Nottingham suggested starting an “ether pad or wiki page”. I’d appreciate comments on these ideas and ways to move forward. Greater consistency across these tools will make it easier for developers to get on the web performance bandwagon, which is something I hope we all want.

* If I missed your favorite tool please add a comment with the URL to your tool’s screenshot for loading http://www.wikipedia.org/. I’ll use the screenshot to update the blog post.

9 Responses to Waterfall UI Conventions

  1. Wouldn’t orange be a better “caution” color? Red always seemed more “things have already gone bad” color.

  2. For the content type indicator, how about in addition to the icon, tinting the row background? Should probably still allow for 2 shades of each color so alternating rows can easily stand apart but that should work just about as well as Chrome’s use of color for the bars themselves.

    Don’t forget SSL negotiation (purple in WebPagetest).

    As far as “sending” goes, none of the tools can actually measure it accurately so I’d rather not add a measurement if it is not accurate. Their visibility pretty much ends at the point where they write the data into the OS send buffer so anything less than 32KB or so looks instantaneous.

    I’m more than happy to standardize – drives me nuts as well. In the short term I’ll probably allow for selecting from various color schemes so that people can pick the one they like working with and so I don’t traumatize existing users (probably start by letting you customize it in the custom waterfall view just for building the color schemes initially).

  3. Standardised colours would be very nice when testing on multiple browsers. Configurable colours would let us standardise if we wished.

    I like how Chrome uses the light and dark shades of each colour, that looks like a good way to indicate where state changes occur on the timeline, whilst using one colour for the content type.

  4. Hey Steve how about a overview on how to use these diagrams? I wonder if there could be a format for this information that gets the main points across without so much detail and scrolling, something that zeroes in on the things the experts know to focus on without going all the way to the YSlow extreme.

  5. @Michael: Sure, I like orange, too.

    @Patrick: Is the lack of visibility for “send” just IE? Does customer waterfall view exist now, or you’re saying that would be the way to handle it in the future?

    @Ben: I believe Chrome’s light/dark shades are used to indicate blocking (not connection states).

    @johnjbarton: I’ve been advocating for a “critical path visualizer” – a waterfall view that would highlight which resources were responsible for blocking the page and thus the ones to focus on. It wouldn’t be that hard.

  6. The lack of visibility for send is a function of how sokets work in most OS’s. At the application layer you write data to a socket and then it goes into a kernel-level buffer where TCP takes care of actually sending the data (retransmits, etc). Technically you could poll the socket with an ioctl() to see when the send buffer is empty and you could infer from that that the send completed but that also includes the round trip for the ACK. It’s also difficult to define what “send” means when you are only measuring from the client side. Optimally it would be when all of the data finished arriving at the server but you don’t have visibility into that from the client side.

    Thinking about the color scheme a bit more, the way Chrome includes the mime color for the bars itself makes it possible to include that data when you are looking at a connection view waterfall (kind of like webpagetest does here – http://www.webpagetest.org/result/110123_Y8_17VV/2/breakdown/ )

  7. While I use Chrome to browse, I usually switch to Firefox in order to debug page issues because Firebug feels more usable. It’s not the colors or the terms – even though those could be more consistent – it’s the more concise display of Firebug & how Chrome has more space between the requests in it’s waterfall. I often sort the requests by host or path but rarely am I interested in the last segment.
    I also use Fiddler and like it’s sorting and use of colored text in the URL for the various content types.

  8. For the vertical lines on the waterfall, I like DOMContentLoaded and Onload – the more explicit the better. Also, I’m a fan of having a line for when rendering starts. For the name, I like First Render – parallels nicely with First Byte.

    The Send/Wait topic is important. I like the way webpagetest combines them, because it tells me something I find useful: how long it took the browser to start to get data. This is an indicator of the combo of network time and time for the server to start to respond.

  9. Like Paul, I’m also a fan of “First Render/First impression/etc”. However, one vertical line that I haven’t seen implemented by any of these tools, as well as dynaTrace, is the concept of “Last Render/Last impression”. As we improve page performance, by delaying JS processing to the end of the page load, the “Last Render” information becomes much more valuable. It’s no longer about how long the *whole* page takes to load, including JS calls that don’t affect rendering, but rather when the last HTML element gets rendered.