Layout-shift-elements score should match CLS score. Add more CLS rootcause analysis

[tunetheweb]

Feature request summary

Currently we have two CLS audits: one for not setting height and width on images, and one for the elements causing most shifts.

Take cnn.com, which currently shows this for mobile:

And when the "Avoid layout shifts" audit is expanded you get this:

You can see here the "Image elements do not have explicit width and height" audit is not actually contributing to CLS (at least for the above the fold content that Lighthouse shows be default, but a <div> IS causing CLS - with a massive 0.135 (the entirety of the CLS captured by Lighthouse).

Lighthouse is highlighting the wrong issue here, which can lead to confusion.

I would suggest we reduce the image audit to amber when there are no equivalent images in the layout shifts audit (though keep as amber as it may affect below the fold content), and we highlight the layout shifts audit in red when the total CLS is above the good barrier of 0.1:

For bonus points it could highlight the shifts above the 0.1 limit in red (ideally with a warning symbol too as well so it's not just colour highlight).

What is the motivation or use case for changing this?

Lighthouse is currently not highlighting the real issues in these cases.

How is this beneficial to Lighthouse?

Allow Lighthouse to more accurately reflect content affecting CLS making it more useful and less prone to falsely identifying non-issues.

[connorjclark]

I would suggest we reduce the image audit to amber when there are no equivalent images in the layout shifts audit (though keep as amber as it may affect below the fold content), and we highlight the layout shifts audit in red when the total CLS is above the good barrier of 0.1:

It's a good idea, but this comes down to "can we attribute the root cause of an arbitrary layout shift", which we can't right now (granted, we haven't tried in awhile, maybe something is new wrt recent Performance Insights work?). For each shift in the Layout Shifts audit, the elements moving around aren't necessarily the image elements lacking width/height attributes – so we can't determine if any given image in the "missing width/height" audit is associated with the observed layout shifts.

[tunetheweb]

That’s a very good point!

Thoughts on the second suggestion of promoting the “layout shifts” section beyond “informational” which it’s clearly identifying CLS limit-breaking shifts? Agreed it’s the effect, rather than necessarily the cause but still feels important to highlight more to me.

[connorjclark]

Yeah, we should perhaps set the score of that audit to be the CLS score to match the metric pass/warn/fail state.

[connorjclark]

We're gonna explore what we can do to give a best-guess for root-cause attribution in Lighthouse this quarter. CDT has done some work on this recently, although it's in an internal repo.

[tunetheweb]

I think highlighting the shifts themselves more when they are large could be an easier option, and a big win, and avoid the complexities of trying to attribute those fixes.

[adamraine]

This is done in #15703 which adds root cause analysis. We have also changed the scoring methodology so layout shifts are highlighted in red and unsized images are highlighted in orange.