Better screenshots for CLS

[tunetheweb]

Feature request summary

At the moment for CLS we show a tiny screenshot of the area affected and give the score and reasons:

Other tools show side by side:

DebugBear:

WebPageTest:

Often with nice animations when you hover over them, or GIFs to show them moving.

We have all the data in the Lighthouse audit to show this but don't.

What is the motivation or use case for changing this?

If we showed this, it would make CLS data easier to understand.

We hear complaints that Lighthouse and PSI are not useful for debugging CLS (example.

How is this beneficial to Lighthouse?

It makes Lighthouse more useful to debug one of the three Core Web Vitals, which would also be surfaced in PageSpeed Insights, often used by less technical users than those using Performance Panel.

[adamraine]

Seems like a good feature request, however it will increase the size of the Lighthouse JSON result (especially if there are a lot of layout shifts). Right now Lighthouse only keeps a small subset (I think 8/10 frames) from the screenshot timeline.

[brendankenny]

@paulirish I wonder how well your animated shifts could work even with a limited number of screenshots

[benschwarz]

A while ago I suggested deduping screenshots, which can really help with the total size output. Might be worth revisiting. We've used that technique at Calibre for a while now and it's saved many GBs 😋