performance - How to find Cumulative Layout Shift problems if Page Speed Insights says one thing and Search Console says another

Question

With Cumulative Layout Shift (CLS) now a criteria of Page Speed Insights (PSI) and Google Search Console (GSC) I was wondering what method should be used in order to identify CLS if PSI returns a 0 value but Field Data returns a high value.

For example I have a page that scores 0 on PSI but gets 0.99 CLS for desktop (0 for mobile) according to Search Console.

Using Developer Tools I tried switching on paint flashing and switched on layout shift regions but still get 0 shift, whereas field data says 0.99.

So how do you identify what is causing a Layout Shift using developer tools?

Answer 1

So as nobody has answered this I will put down what I did, it may not be the best way to do it so bear that in mind!

I opened dev tools and setup a new profile under network speed where the latency was 1000ms and the speed to 50kb/s. (where it says "online" next to "disable cache", click there and go to "Custom > "Add...").

This effectively gives you time to see what is happening on a page as resources load in.

I then went to the "rendering" tab and switched on "Paint Flashing", "Layout Shift Regions" and "Layer borders"

I then just watched the page load with this artificial slow down in place.

It was immediately obvious doing this that I had a side menu loading in via AJAX but when it loaded it was about 1px too wide due to a border on it so it made the whole main section shift to the left a tiny bit.

Impossible to notice with the naked eye but really obvious with the above method. This didn't happen on the automated tests as it was (sort of) a race condition in a browser that depended on load order (using async for scripts as I do other manipulation on the aside) and PSI was consistent.

I hope this helps someone until someone comes up with a better way of identifying the root cause of a Layout Shift.

Update

As pointed out in the comments make sure you test at different screen sizes as well.