What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) measures how much a page's content unexpectedly moves while loading. A good CLS score is 0.1 or lower.
Why Cumulative Layout Shift matters
Cumulative Layout Shift measures how much visible content moves without the user causing it. The classic case is text that jumps down when an image or ad loads above it, so the link you were about to tap moves and you tap something else. CLS sums the impact of each unexpected shift, weighted by how far things moved; 0.1 or lower is good.
Shifts come from elements without reserved space: images and iframes without width and height, ads and embeds that expand, web fonts that swap in with different metrics, and banners injected at the top of the page after load. The fix is almost always the same: reserve the space up front with dimensions or an aspect ratio, and animate with transforms rather than by changing layout properties.
Example
Reserving space so the layout does not move:
<img src="/chart.png" width="800" height="450" alt="…">
.ad-slot { min-height: 250px; }
@font-face { font-family: Body; src: url(/body.woff2); font-display: optional; }Width and height let the browser compute the aspect ratio before the image arrives.
Common mistakes
- •Images and embeds without dimensions.
- •A cookie banner or notification bar that pushes the whole page down after load.
- •Web fonts that swap late with different metrics, shifting every line of text.
How Webmatik checks it
The Content jumping during load check reports CLS from both Lighthouse and the Chrome UX Report, and the Lighthouse details list the elements that shifted.
Check your own site
Free Website Speed Test
See your LCP, CLS and INP on mobile and desktop, with the fixes ranked by payoff.
Related Performance terms
See how your website scores across SEO, GEO, performance, and more
Run a free audit