CLS Deep-Dive: Common Causes and Fixes for Layout Shift

Your checkout passes Lighthouse on deploy day. Two weeks later the account manager forwards a client message: the pay button jumped while they were tapping it. PageSpeed Insights still looks fine on the homepage. The field CLS line for the checkout template is not.

Cumulative Layout Shift measures visual stability: whether the page jumps under the user while they read or tap. A bad CLS score rarely means CSS is slow in the abstract. It usually means something changed size or position after first paint without a deliberate user gesture.

We see the same six causes on client builds again and again:

• Images, video posters, and iframes without reserved height or aspect-ratio

• Web fonts that swap metrics and reflow text blocks

• Ad slots and third-party embeds that expand when fill arrives

• Cookie banners and promo bars injected above the fold after paint

• Dynamic lists that prepend cards and shift reading position

• SPA hydration mismatches where server HTML and client chrome disagree on height

Work in this order when time is limited:

• Intrinsic sizing for all above-the-fold media and embeds

• Font strategy for the first screen (subset, preload only what matters)

• Consent and promo bars: overlay or reserve height in base layout

• Ad and recommendation slots with minimum heights

• Match server and client markup for above-the-fold chrome

Lab CLS from PageSpeed Insights names the elements that moved. CrUX tells you whether Chrome users actually felt it on real navigations. If lab is green but field is red, suspect post-load widgets, personalisation, or slow devices.

Read more: CLS deep-dive: common causes and fixes for layout shift