Cumulative layout shift

Question

I am trying to find out what's causing my site to fail Google's new core values CLS test on mobile devices.

The test shows no elements found in the test results breakdown but shows as needs improvement with all 22 URLs of the site showing a result of 0.14 with the pass rate at 0.10 or lower.

Where I am confused is it shows as no CLS in the lab test and shows as 0.14 in the field test which updates every day but is 1 day behind.

I have tried to use Google dev tools to show me the elements that are shifting and causing it to fail but I couldn't find anything there either.

What I'm trying to ask and going the long way around is how can I find the elements that are shifting and causing the issues, please?

Answer 1

In Chrome you can use developers tools > more tools > rendering > Layout shift regions. It will highligtht shifting regions in blue.

Remember to test both desktop and mobile view.

Answer 2

I have exactly the same problem and find no solution for it... The Lab Test and the Field Test are ok but the Search Console tells me that the sites are poor.

Answer 3

well, it tracks any css animations sometimes even background animation (which we had to disable) i think google should fix this

check this for CLS