pagespeed-insightscls

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

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?

enter image description here

Solution

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

    Screenshot of the layout shifts diagnostics

    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.