What is Cumulative Layout Shift (CLS)?
Everyone has lived it: you go to tap a link and the page lurches as an image loads above it, and you tap an ad instead. CLS puts a number on that. It adds up every unexpected shift of visible content during a page's life, weighting each by how much of the screen moved and how far, and reports a score; Google's threshold for a good score is 0.1 or less, measured at the seventy-fifth percentile of real visits. Shifts triggered by the user's own action, such as tapping a menu, do not count. Shifts that happen because the page was still deciding where things go do.
It is one of the three Core Web Vitals, alongside Largest Contentful Paint for loading and Interaction to Next Paint for responsiveness, and it is the one most often caused by design decisions rather than infrastructure.
Why it matters
Why CLS matters
Because it is the metric that makes a site feel broken. A slow page is a slow page; a page that jumps feels untrustworthy, and on a brand site built around imagery, with late-loading hero images, web fonts that swap in, embedded films and cookie banners that push everything down, the jumps are constant. It costs conversions directly: mis-taps, abandoned forms, visitors who give up scrolling because the page will not sit still.
It is also part of Google's page experience signals, so a persistently bad score is a small drag on rankings and a large drag on the first impression the brand makes.
In practice
How CLS works in practice
- 01
Find the shifts. PageSpeed Insights and the Chrome DevTools Performance panel highlight each layout shift and the element that caused it; Search Console's Core Web Vitals report shows which page groups fail in the field. The usual culprits are images and video embeds without width and height, ads and iframes that load into unreserved space, fonts that render in a fallback and then swap, and banners, notifications or dynamic content injected above existing content.
- 02
Reserve the space. Give every image and embed explicit dimensions or an aspect ratio so the browser holds the box before the content arrives. Set fixed heights for ad slots and placeholders. Load fonts with a strategy that avoids a visible swap, or choose a fallback with matching metrics. Insert banners and dynamic content below the fold or in space already reserved, and animate with transforms rather than properties that move the layout.
Watch out
What people get wrong about CLS
Fixing it in the lab and failing in the field. A page that is stable on a fast desktop can shift badly on a phone with a slow connection, where every late asset lands after the visitor has started reading. Test on real devices and trust the field data. The other mistake is treating it as an engineering problem alone: most layout shift on brand sites is a design decision, a hero that changes height, a banner that appears on load, a font chosen without a fallback, and the designer is the one who can fix it at source.
Ignoring shifts after load. CLS covers the whole session, so a carousel that resizes or a lazy-loaded section that pushes content down counts long after the page looks finished.
