Visualize metric changes over time

[rviscomi]

Totally optional. I think it'd be cool to see the rate of change of a metric like CLS plotted graphically. This wouldn't be the default view but behind some kind of advanced/more button.

@addyosmani wdyt?

Edit: To clarify I'm only referring to the span of time that the tab is active, not a historical view of previous page loads.

For example, let's provide a way to visualize how CLS got to be 0.15. There should be a line at 0.1 indicating where the threshold is and as the page loads and is scrolled, we could see CLS creeping closer to and exceeding the threshold.

[addyosmani]

Edit: To clarify I'm only referring to the span of time that the tab is active, not a historical view of previous page loads.

Thanks for clarifying! That was originally going to be my first question (how much of this is for the current session/tab activity vs over the lifetime of previous page loads).

For example, let's provide a way to visualize how CLS got to be 0.15.

Is there a particular surface in the extension you were thinking something like this could live? Is it a drill-down feature? overlay?

[rviscomi]

I think the best fit for this UI would be in the overlay because it lets you monitor changes while interacting with the page. The drill-down disappears as soon as you click away from it.

We can let users toggle its visibility so it doesn't always taking up more of the viewport.

[tunetheweb]

With the console logging we have more detailed history of metrics that potentially change over time like CLS so not sure it’s worth cluttering up the UI with this when the info is already available in that, more detailed, debugging method?