CODEWITHSUNDEEP
pagespeed-insightscls
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

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

Upvotes: 0

Views: 502

Answers (1)

Barry Pollard
Barry Pollard

Reputation: 46040

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.

Upvotes: 1

Related Questions