[Bug][User Experience] Enhance the Page Load Duration metrics shown

[paulb-elastic]

Some of the metric labels are causing confusion, in that they are not all obvious in what they represent

• Add a new column in the Page load duration section, to the left of the current Backend value called Total
• The value shown here will be the (percentile) total page load duration, the same as what is used to populate the Page load distribution chart(transaction.duration.us)
• Change the current Frontend value to represent the total page load duration - backend (such that adding Frontend and Backend will be the same as the Total value)
• Add a (?) help mouseover on the Total label with the content Total represents the full page load duration
• Add a (?) help mouseover on the Frontend label with the content Frontend time represents the total page duration minus the backend time
• Add a (?) help mouseover on the Backend label with the content Backend time represents time to first byte (TTFB), which is when the first response packet is received after the request has been made
• Change the heading Page load duration to Page load

cc @formgeist

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[shahzad31]

for ? clarification, we should add this to all three, total, frontend, backend, like you said in your original comment @paulb-elastic

Backend time represents time to first byte (TTFB), which is when the first response packet is received after the request has been made

Frontend time represents the time from the first response to time to interactive (TTI))

[paulb-elastic]

@shahzad31 we are going to change the meaning of frontend here though, so TTI won't be involved anymore. I've added an item to the list to add your backend description though.

Should we add a description against Total? As this isn't onload, what's the point at which we're evaluating when the page is done (cc @vigneshshanmugam / @jahtalab)?

[vigneshshanmugam]

we can call Total as the total time representing the duration of page load transaction. If we dont want users to know what transaction is, then we can keep it simple as page load duration.

[paulb-elastic]

@drewpost can you confirm you are happy with the three descriptions written in the main issue please?

[hmdhk]

IMO, we should rename the Page load duration section to just Page load (or Page completion to avoid confusion with load event). This section will have the three columns: Total (or Total duration), Backend, Frontend

Note: Page completion is a concept defined by the RUM agent as described in our docs (therefore it doesn't necessarily align with onload event )

[paulb-elastic]

That's a good point @jahtalab, and removes the ambiguity that duration gives.

I've added an item for it (we have page views in there too, which is definitely nothing to do with duration, but has a bearing on pages loaded).

[drewpost]

@paulb-elastic OK by me. Ship it.

[shahzad31]

@paulb-elastic @drewpost @Kerry350 i know it's expanding the scope, but since we are adding tooltips for backend/frontend, does it also make sense for TBT, FCP, Long task etc?

Those will be the only remaining part, where we don't have helper tooltips

[Kerry350]

@shahzad31 Makes sense to me.

[shahzad31]

You can pick up the copies from https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/supported-technologies.html#page-load-metrics

[drewpost]

Makes sense to me too. Thanks @shahzad31 - @Kerry350 are you implementing these for 7.10? (sorry - not sure where Shahzad is picking up and where you are yet!)

[Kerry350]

@drewpost Yeah, my understanding is this was targeted for 7.10. The PR is ready and approved: #81915, just blocked by e2e tests which aren’t working for me locally (this morning’s goal...).