Attributing impact on Web Vitals 🧪

[addyosmani]

TPW currently does a great job capturing the execution costs of individual third-party scripts.

I'm curious if there's a mechanism we can define for measuring the impact these third-parties have on web vitals. As an example, let's take CLS:

For each Lighthouse run via HTTP Archive/WPT:

• Check the Cumulative Layout Shift elements audit for the top N DOM elements contributing to shifts *
• Using some initiator or DOM API patching magic (wild hand waviness), discover what script initiated the injection of each of these DOM elements
• Visualize attribution in a similar way as is done for script execution

Is this crazy-talk, @patrickhulce ? :)

• Exploring this type of idea may rely on us being able to craft better 3P CLS attribution in Lighthouse itself first, so feel free to say this is not remotely possible for now. Current CLS audit looks at elements that were shifted but not necessarily why they shifted.

[patrickhulce]

Thanks for starting the conversation @addyosmani! :)

Exploring this type of idea may rely on us being able to craft better 3P CLS attribution in Lighthouse itself first

Definitely reliant on functionality in Lighthouse first since we don't get access to raw traces in HTTPArchive, but we can discuss approaches here before bringing a proposal there 👍

Check the Cumulative Layout Shift elements audit for the top N DOM elements contributing to shifts

Please correct me if I'm wrong, but I had thought that this audit and trace event data marks the elements that shifted which is usually not the same as why they shifted. I think what we would want here is for Chrome to expose the IDs of the new content that reflowed the shifting elements down. I'm not sure it's a solvable problem but it would be neat to try.

Using some initiator or DOM API patching magic (wild hand waviness), discover what script initiated the injection of each of these DOM elements

This also feels very difficult, but I think @connorjclark worked on some stacktrace "find where this DOM element came from" magic that might apply here. I think the tricky part is going to be getting the attribution in the middle of the page load which is what I expect you really need for CLS.

Visualize attribution in a similar way as is done for script execution

This sounds great asssuming we can tackle the other two :)

[connorjclark]

yup! https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getNodeStackTraces

we could collect stack traces for all the things in trace-elements, and expose as an optional property on Node detail types.