[answered]Please explain the multi-color bars above waterfall & test result questions

Web Performance Discuss Test Results
1

First - Thanks for creating and maintaining this excellent resource! I appreciate your site so much I’ve disabled adblock for your domain… for me, that’s freaking huge! I’ve only done that for one or two other sites.

Question 1 …

Can someone please explain what the multi-color bars of along the top of the waterfall view mean. Specifically, the multi-color html, js and css bars.

Does the lighter color indicate the time it takes to connect to the resource, or is it time spent waiting to download the resource? Is the darker color the actual time spend downloading the file, or is that download and render time?

I looked through the documentation but did not see any explanation or legend for what these mean.

Question 2 …

Please explain the difference between the two test results below. The first is our production site and the second is our development site. I’ve been recommending ‘speed improvements’ (reflected in the dev site) and have made good progress from where this all started, but I want to better understand which ‘first view waterfall chart’ is better and why.

The DEV site has better load times in general, which is obviously what I’m going for. But, what is causing such a change in the waterfall chart? The production site appears to see all resources at the same time but just takes longer to download each one. The dev site looks like it is not seeing one resource until the previous one has identified and parsed.

Is this really what’s happening? Please explain like I’m 5 (ish) :wink:

Live Site:
https://www.webpagetest.org/result/161208_A0_FBJ5/1/details/#waterfall_view_step1

DEV Site:
https://www.webpagetest.org/result/161208_WQ_FBKF/1/details/#waterfall_view_step1

2

The lighter time is the time from when the browser sends the request out on the wire until the first byte comes back. The darker color is the period where the resource is actually downloading.

Looks like the production site is using HTTP/2 and the dev site is not which is why you see radically different request behavior.

With http/2 the browser can issue all of the requests to the server in one go and the server will send them back in the order the browser prioritized them (mostly).

with the dev server, the browser can only make 6 requests at a time and has to wait for each to complete before issuing more.

Generally, all else being equal, HTTP/2 will perform better so it is going to be hard to compare your dev work to the production system without having the same serving architecture.

3

pmeenan, thank you for the simple and direct explanation of my questions.