Colour Setup

[micmro]

• Same as WPT
• Switch or split view for timing and content type?

[micmro]

WPT Colours

1f7c83 - DNS Lookup

e58226 - Initial Connection

c141cd - SSL Negotiation

1fe11f - Time to First Byte

1977dd - Content Download

Full row background colours:

ffff60 - 3xx response

ff6060 - 4xx+ response

Event colours:

28bc00 - Start Render

8fbc83 - msFirstPaint

d888df - DOM Content Loaded

c0c0ff - On Load

0000ff - Document Complete

69009E - User Timings (not sure if needed)

[micmro]

Missing/Mismatching Timings

• blocked is not visualized in WPT
• it seems like both send and wait could map to TTFB

[soulgalore]

There is also the color by content type in WPT (you see that always when you compare runs):

I think it's important to make it super easy to see the content type of the response, but not sure if it's best done by coloring or having different images per type? What do you think?

[micmro]

I currently have a bar below the segments to indicate the type but it's not super obvious - I like the idea of an additional icon. We just need to source some decent ones, do you have suggestions?

[soulgalore]

ah sorry I didn't understand the line under the bar, but know when I know it's pretty cool :) I'll get back tonight. Maybe what's missing is a explanation of the colors at the bottom of the waterfall.

[soulgalore]

I like the symbols that Pingdom uses (http://tools.pingdom.com/fpt/#!/dHia7l/http://www.auxoisnature.com/preparer-un-trek-photo/) I can have a look to see if I can find an Open Source alternative.

[micmro]

They look quite nice - I tried to use them as inspiration and come up with some we can use. What do you think? Are they clear enough? Any other ones I missed?

MIME Types

• JS
• HTML
• Image
• CSS
• Font
• SVG
• Plain/Text
• Other

Indicators

• Redirect
• Warning
• TLS/SSL

[soulgalore]

I've been looking also haven't found any, I think these look good. Maybe we should have one for 40X/50X? WPT highlights the whole row in that case but maybe a symbol is enough.

Do we have space to have multiple symbols on one row? I'm thinking if the site use HTTPS then (hopefully hehe) every asset will have the lock symbol, one MIME type and maybe a warning?

[micmro]

Good idea - I'll play around with marking the row and an icon and see what works better. Yes, we have, respectively make more space - I was thinking we can dynamically add as much space as needed.

Perhaps we can have the inverse for HTTPS sites - a warning if an asset is not HTTPS - e.g. if the main document request is HTTPS.

[micmro]

Colours are defined now will track other work via #6