New audit: element-timings

connorjclark commented 1 year ago

Much like the user-timings audit, a element-timings audit would surface moments when user-specified elements have rendered, using the Element Timing API.

There's a trace we can extract for these timings. See:

<!doctype html>
<html>
<body>
  hello
  <p elementtiming="connorme" id="text-id">text here</p>
</body>
</html>

{
  "args": {
    "data": {
      "elementId": "text-id",
      "elementType": "text-paint",
      "identifier": "connorme",
      "loadTime": 0,
      "naturalHeight": 0,
      "naturalWidth": 0,
      "rectHeight": 18.5,
      "rectLeft": 8,
      "rectTop": 42.5,
      "rectWidth": 56,
      "renderTime": 11,
      "url": ""
    },
    "frame": "CD6D61E3FC5C6419A2C70D139EFAEF80"
  },
  "cat": "loading",
  "dur": 5,
  "name": "PerformanceElementTiming",
  "ph": "X",
  "pid": 74514,
  "tdur": 5,
  "tid": 259,
  "ts": 117917914119,
  "tts": 1061423
}

We need a gatherer: ElementTimings
And an audit: element-timings
It should work for navigation and timespan modes
If possible, in the end phase of the gatherer we should try and find all of these elements in the page so we can create NodeDetails (so we can show them alongside the loadTime values).
- Ideally this would be done by taking a node id from the trace event and adding to the TraceElements artifact. But the trace is missing that info, so let's just add the node details to ElementTimings.
- This is the only reason we need a new gatherer/artifact, unlike user-timings which just reads the trace directly.

brendankenny commented 1 year ago

TraceElements might be a good home rather than a new gatherer.

For locating the node, it may make sense to remove ambiguity by adding the node ID to the trace event. Should be straightforward since the Element is still available when the trace event is emitted, similar to this change to EventTiming (s/target_/element_): https://chromium-review.googlesource.com/c/chromium/src/+/3632661

connorjclark commented 1 year ago

Add nodeId here: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/performance_element_timing.cc;drc=f37b11fe3cfd8d5f8294ef27d5c6c723a4028d89;l=76

TripleEquals commented 1 year ago

I had been discussing taking this issue with Connor earlier, but unfortunately I don't believe I'll have time to commit to this. I know it's unassigned now, but feel free to assign this to someone else, thank you!

GoogleChrome / lighthouse

New audit: element-timings #14792