Critical Network Waterfall visualization.

[paulirish]

Currently we have a fairly droll representation of the network waterfall.

Paul Lewis did some fantastic mocks that explore how Lighthouse could better render the entire critical path:

Only slightly relevant, an ugly one from me, trying to combine a smarter network waterfall with grouping by initiator:

---

We can do something along these lines, and dramatically improve how folks understand the key network requests. The scope is a tad smaller than the images above, as we want to start only with replacing the "Critical Network Chains" visualization, and not yet deal with screenshots, main thread activity, or metrics.

Is someone interested in investigating this? We need someone with good skills in visualizing data to take this on.

It'll require some experimenting and iteration, but we will end up with way of representing this data that will be awesome.I also expect a successful design to be adopted by chrome devtools, at least.

[stramel]

Seems like #2218 Would be a good starting point for this?

BTW those mocks would be awesome!

[brendankenny]

awesome version by @mixed: http://aquatic-show.surge.sh/mixed-visualization.html

[mixed]

Thanks. @brendankenny
I am going to open soon. :)

[mixed]

Hi. @paulirish
I have done prototype except for Input latency. Thread/Network parts was developed with reference to the logic of devtools. How about it?

[jackyef]

Any updates on this? Would be awesome to see this live!

[patrickhulce]

@jackyef it's low priority and unlikely to arrive anytime soon.

[mixed]

@jackyef
I think that it will take a long time to work on lighthouse. If you want, I can make 3rd party.

[jackyef]

@mixed
That would be cool! Would love to contribute to it too if possible.