How To Debug (Invisible) Cumulative Layout Shift (CLS )

Question

When running a speed test on https://rc.swisswebcams.ch/webcam/1242547979 I get a CLS of 1.24 which is quite high. However, when looking at the screenshots and the suggestions below, I can't see any reason for this. Do I miss something here? How can I see the reason for this number?

Answer 1

If you look in the diagnostics you get a list of all the shifts:

In this example the footer was the most shifted element. This can happen if you have something like this:

<div id="app"></div>
<footer>
Some footer content
</footer>

When the app is inserted in the footer moves down.

Or if the app contains the footer but inserts it first before the main content, and then shifts it down.