Skip to content

Cumulative Layout Shift, usually shortened to CLS, is a Core Web Vitals metric for visual stability. It records unexpected movement of visible page content. A high CLS can interrupt reading or cause a visitor to click the wrong control, so it is worth diagnosing as a user-experience issue in its own right.

What causes layout shifts

Common causes include images, videos, embeds or adverts without reserved dimensions; web fonts that change the size of already-visible text; and content added above existing content after the page starts rendering. The important detail is whether a visible element moves unexpectedly, not simply whether a new element exists.

Sources: web.dev: Cumulative Layout Shift

Measure both lab and real-user behaviour

Tools such as PageSpeed Insights and Lighthouse can help identify a layout shift in a controlled run. Where enough real-user data exists, evaluate the 75th percentile separately for mobile and desktop because a lab result alone cannot describe every visitor’s experience.

Sources: web.dev: Optimise Cumulative Layout Shift

Fix the identified shift, then verify it

Reserve layout space for images, embeds and dynamic modules; use font loading and fallback choices that do not reflow the page unexpectedly; and test the actual page after a change. A lower CLS is useful evidence of a steadier page, but it does not by itself prove a ranking or lead improvement.

Ready to build something that actually works?

Tell me about your goals. No sales pitch - just a straight conversation about what's possible.

Project scoper

Scope your project in twenty seconds

Three questions. I'll point you at the right starting place and pre-fill your enquiry - you just press send.

01 - What do you need?
02 - Where are you today?
03 - When do you want to move?

Prefer to just tell me in your own words? Go straight to the contact form.