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.

Answer 2

At the Developer tools, you can go to Performance > Record (the dot at the top). Then refresh the page by using a hard refresh (shift + refresh). NB: Best to make the developer tools sidebar as small as possible to simulate the correct browser size.

As the Developer tools is recording, you can scroll all the way down and stop the recording once you're at the bottom.

Resize the Developer tools tab, and a timeline will appear. This includes a section 'Web vitals'. At 'Experience', you will find blocks that indicate the Layout shifts.

If you hover over the Layout Shift box, the class will be visible in the webpage. You can even zoom in and hover over the timeline at the top, to see the layout at that specific time (and thus the difference in layout causing the layout shift).

If you click on the Layout Shift box, there's a summary in which you'll be able to see the changes e.g. 'Moved from Location [...], Size: [...x...]'

It takes some resizing between all the tabs in the Performance section, but for me, this is really helpful to find out what classes are causing these shifts! Hope this works for you as well.