HTTP waterfall charts are a way of viewing HTTP requests.
They're popular in many tools including Firebug, WebPagetest, and HttpWatch.
Unfortunately, the colors and terms used in waterfall charts vary dramatically across tools.
(See the blog post Waterfall UI Conventions for a review of the tools and issues.)
This inconsistency causes confusion amongst developers and the general public sharing articles and presentations that contain waterfall charts.
This document proposes standard conventions for the colors and terms used in waterfall charts.
The following conventions are addressed:
- Content-Type colors, names, and abbreviations
- connection state colors and names
Content-Type
The following table lists the name, color, and abbreviation for the set of Content-Types.
| Content-Type |
hex color |
abbreviation |
| HTML |
#82B5FC |
H |
| JavaScript |
#FEC584 |
J |
| CSS |
#B2EA94 |
C |
| image |
#C49AE8 |
I |
| Flash |
#2DB7C1 |
F |
text/plain,
XML, JSON |
#FEF184 |
T |
| redirect (3xx) |
#F941FD |
3 |
| error (4xx, 5xx) |
#F54E51 |
4 |
| other |
#C4C4C4 |
O |
Notes:
- Colors were chosen to be light enough that black text would be readable when the Content-Type color was used as a background color.
This isn't an issue for the waterfall chart, but Content-Type data is often shown in tables and charts where a consistent color mapping would be beneficial.
- Abbreviations are specified so that Content-Type information can be shown in a pithy format,
for example as an icon or as a table column.
- Icons for the Content-Type abbreviations will be made available once the color selections are finalized.
- The list of text responses that fall into the "text/plain" category should be expanded.
This contains all "text/*" responses that do not fall into other categories such as text/cmd, text/csv, text/plain, and text/xml.
It does NOT include text/html, text/javascript, and text/css.
It also contains other responses that logically are text including JSON and XML.
- Redirects (3xx) and errors (4xx, 5xx) are not Content-Types,
but they generate HTTP requests that are shown in waterfall charts.
Therefore, they are included in this table to provide standard conventions.
- "3" and "4" are chosen as the abbreviation for redirects and errors, respsectively, instead of "R" and "E" to further distinguish
that these responses are based on status code instead of Content-Type.
"4" is chosen instead of "4+", "4-5", etc. for brevity.
- A 304 Not Modified response is technically a 3xx status code and might be drawn using that associated color.
However, 304 is not a redirect. It would be best to draw a 304 response based on the cached resource's Content-Type.
For example, if the 304 response was generated for a cached image, then the image Content-Type colors should be used.
- "Other" catches any Content-Type that does not fall into another category.
Connection State
The following table lists the name and color for the set of connection states.
| connection state | hex color |
| Block | #E5DED3 |
| DNS Lookup | #056200 |
| Connect | #B1493E |
| SSL Handshake | #456EAF |
| Send | #C648D3 |
| Wait | #DFA809 |
| Receive | #764782 |
Notes:
- Colors were chosen that were distinguishable from the Content-Type colors in case a tool displays both color schemes in a single view.
- Color choices were not constrained to those that work with black text because
connection state data is infrequently shown in tables and charts, and it was deemed more important to
distinguish the colors from the Content-Type colors.
- Some tools do not show all the states. Block and send are the most common that are not shown.
UI Guidelines
These colors will most frequently be used when drawing the horizontal bars in a waterfall time chart.
Some tools use the horizontabl bar to show the Content-Type (Chrome Dev Tools),
while other tools use the bar to show connection state (Firebug, HttpWatch, IE9 Developer Tools, and WebPagetest).
This choice is left to the tool developer,
but here are suggestions for the different scenarios:
- show Content-Type in the bar
- If the Content-Type is shown in the horizontal bar, a typical implementation is to show the connection state
information in a popup over that bar.
Examples of charts using Content-Type colors:
- show connection state in the bar
- Many tools show connection state information in the horizontal bar since this typically provides a larger amount of
horizontal space to convey the length of each state using colors.
A typical solution for incorporating Content-Type information is to have a column that reflects each request's Content-Type.
In many tools the requests can be sorted based on this column allowing for easier identification of specific resources.
The Content-Type icons and abbreviations are helpful in this situation to show that information with a minimal use of horizontal space.
Examples of charts using connection state colors:
- show both Content-Type and connection state
- WebPagetest is evaluating this possibility by
using the connection state colors for the early parts of the request (DNS Lookup, Connect, and SSL Handshake)
but using the Content-Type color for the later states (Wait and Receive).
(A slightly transparent version of the Content-Type color is used to distinguish these two states.)
Examples of charts using both:
Current Tools
Here are screenshots of current tools for comparison.
Chrome Developer Tools:
Firebug:
HttpWatch:
IE9 Developer Tools:
WebPagetest:
