What Is CLS (Cumulative Layout Shift)?

Cumulative Layout Shift (CLS) measures how much the page jumps around while loading — the metric for the universally hated experience of tapping a button that moved at the last millisecond. Each unexpected shift scores by how much of the viewport moved and how far; the page's CLS is the worst burst of shifts. Good: under 0.1. Poor: above 0.25, at p75 of real users.

The usual suspects

1. Images without dimensions: no width/height attributes means the browser reserves zero space, then shoves everything down when pixels arrive. The oldest bug on the web, still everywhere.
2. Web fonts swapping: fallback text renders, custom font lands, every line reflows. font-display: swap with metric-compatible fallbacks (size-adjust) tames it.
3. Late-injected banners: cookie consent bars and promo ribbons that push content down after render. The consent banner is a double CLS offender — and removing it entirely (the cookieless dividend, quantified here) is worth more than most optimization sprints.
4. Ads and embeds without reserved slots: reserve the space, always.

The scoring nuance

Only unexpected shifts count — movement within 500 ms of user input is exempt (the accordion you clicked is allowed to expand). This is why lab tools can miss CLS that field users suffer: the lab never scrolls, never sees the lazy-loaded section shift, never opens your mobile menu over a slow connection.

Finding yours

Field CLS per page from real visitors — which Clycyo records alongside LCP and INP on the visitor record — tells you which templates shift for which audiences; DevTools' Layout Shift regions then show you the exact guilty elements on those templates. Page-by-page, the fixes are usually one attribute or one reserved div — the rare performance work where the diff is smaller than the bug report. The full monitoring routine is in the Core Web Vitals guide.