1015201 - The cache performance analysis tool is hard to understand

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[Soledad Penades [:sole] [:spenades]]

When presented with this panel everyone ends up very puzzled. They look at the charts and think it might be showing some meaningful interesting data, but they cannot quite figure out what it is actually.

I've been trying to understand what is it that puzzles us:

1) the "Empty cache" chart is displayed after the "Primed cache"

I'll suggest we have the empty cache chart first and then the primed cache one. That shows what the advantage in size is.

Also perhaps show a big huge number with the % of improvement, if any. So you get a quick visual cue of what you improved, rather than have to look at tiny numbers and do mental maths.

2) The language is not obvious--perhaps for non native speakers. Primed cache? Wut. Suggestion: use something like cache after reload, or something more intuitive for web developers.

3) In each chart, put the labels first instead of (number of files) (type of file). My mind keeps trying to read the list as a list and so it keeps getting confused because the first column is not a consecutive growing series of numbers (i.e. 1, 2, 3, 4) but rather a seemingly random series (1, 3, 2, ...)

So instead of

1 html   10k 0.02s
3 css     2k 0.01s
2 images 10k 0.02s

maybe have

html   1 10k 0.02s
css    3  2k 0.01s
images 2 10k 0.02s

4) Keep the order consistent

In one chart html is shown first, in the second it is shown third. That makes it very difficult to compare what the improvement is. Am I doing better in caching HTML now? or in images?

5) Maybe show a final row with the aggregates instead of a new section with a new format on the footer

Instead of suddenly displaying pairs of "label: value", why not just display the sum at the bottom of the table in the last row?

Using the example from above:

html   1 10k 0.02s
css    3  2k 0.01s
images 2 10k 0.02s
------------------
       6 22k 0.05s <-
^^^^^^^^^^^^^^^^^^^^^
have this instead of 

Total: 6 files
Size: 22k
Time: 0.05s

Maybe there could be an additional column in the table with the number of cached files per category, so the total number of cached files can be seen in the last row too. Easy to visually compare both results (before/after cache).

This is for now, hope this feedback is useful.

Comment 1

[Soledad Penades [:sole] [:spenades]]

Darrin, would you be up for having a look / discussing this? :-)

Comment 2

[Girish Sharma [:Optimizer]]

Also, my two cents to also show the actual page load time in both cases along (instead ? ) of the cumulative sum of time taken to load all the resource individually.

Comment 3

[Rob Campbell [:rc] (:robcee)]

Fitzgen suggested we switch these to bar graphs. I'm kind of inclined to agree because then we could show things like:

|
| |     |
| |  |  ||
| || |  ||
| || || ||
+----------------
 html css images
(cached vs uncached)

direct comparisons.

If we stuck with the pie charts, we should make their total area representative of the total time taken to retrieve all of the data. That's going to make the smaller circle harder to understand.

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

I think all of Sole's original suggestions are excellent. I have very little to add than a suggestion on nomenclature and a UX pattern suggestion.

Point 2, primed cache vs. empty cache: I agree these are confusing. My suggestions would be "First Load", and, "Subsequent Loads". 

Point 6, back button: Instead of having the back button on the left, I'd like us to start using modals for full-devtools-overlays that are not panels, such as these elementary plans for the Settings panel: https://cl.ly/0A0Y3f3p2N0a I think those styles could be reused here effectively.