Compare Waterfalls

[micmro]

The possibility to compare HAR files. WebPageTest is doing but by changing the opacity on different layers is that the way to go or are there other ways?

• @soulgalore

[micmro]

I think this should be build generic so it can compare whatever waterfall it is. The easiest solution would be overlaying them, but there might be a more elegant way, e.g. showing the +- in timings for each row or so or the pure diff of both (perhaps coloured in shades of red and green [or a more accessible alternative like blue/red] to show slower and faster requests).

Questions:

• how to handle different number and/or order of assets
• how to visualize the difference for the single requests

Perhaps we could visualize it similar to a git diff viewer?

[ethyde]

Another approach might be to display both waterfall side by side and the differential between them, something like that could be cool : .

[soulgalore]

I think Rigors hardiff trying to do something smart http://hardiff.com/har-diff/0e1b915b-9513-4286-9224-c099f21507bf but I have never been able to get any useful info from it (but that could be just me). I kind of like the WPT approach with layers that you can change visibility.

[micmro]

Rigor hardiff example:

[soulgalore]

What about trying out if it would work just putting two waterfall graphs on top on each other and then change opacity with a slider for each graph as WebPageTest do?

Then I think we could do another project for adding the comparison (or do you want to have it in PerfCascade @micmro ?)

We'll do something like this for https://github.com/sitespeedio/sitespeed.io/issues/1386#issuecomment-311546493 I think.

[soulgalore]

@micmro I have a POC up and running soon, would love your input and some help with some PerfCascade SVG things. How is your work load at the moment?

[micmro]

Hi Peter, I'm in the process of moving back to Germany, but also travel a bit in the next few weeks, will have some time but propably not too much.

[soulgalore]

Hi Michael, ok cool, I'll add you to a repo the coming days and then if you have time you can have a look :)

[micmro]

Awesome, thanks a lot. Looking forward to see it :).

On 4 August 2017 at 08:57, Peter Hedenskog notifications@github.com wrote:

Hi Michael, ok cool, I'll add you to a repo the coming days and then if you have time you can have a look :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/micmro/PerfCascade/issues/2#issuecomment-320172814, or mute the thread https://github.com/notifications/unsubscribe-auth/ABmkBjFp44k92PZMDkLWMUtZfPaVbGkHks5sUsDNgaJpZM4G40Dn .

[soulgalore]

You are invited @micmro :)

One thing that I think we need to look into is to be able to set the same scale on two different waterfalls (so that the X second mark are in the same place), not sure how to do it the best way though?

[soulgalore]

I pushed it public earlier today: https://compare.sitespeed.io

[staabm]

entered 2 urls, clicked "compare" button.

devtools show that 2 ajax request are fired and got http200, but the UI itself doesnt present any information/compare result.

its also not visiual to the enduser that the "process" started when clicking the "compare" button

edit: after a 2nd look I see a "NetworkError when attempting to fetch resource." in the website (which was not visible enough to indicate a error). since the devtools tell me everything went ok, I guess this errormsg is wrong.

[soulgalore]

Hi @staabm if you could report the issue to https://github.com/sitespeedio/compare that would be super. Also if you could add URLs and which browser so we can reproduce it would be great!

Thanks Peter

[micmro]

Sorry for the long delay was off the grid in Canada for a few days. Awesome work @soulgalore 🎉! I think it's great to have this as a higher level building block and not directly in PerfCascade.

After all this traveling and moving I'll fly back to Germany today and will get settled in Berlin soon, so I hope I'll finally get to do some work on PerfCascade again 😃.

[soulgalore]

Great :) Now when you are in the same timezone as me and @tobli it would be easy to sync a meeting. I'm curious whats the most important things for you to add/change and wanna share what we wanna do.