CLS

CLS (Cumulative Layout Shift) is a metric within the Core Web Vitals set that measures a page's visual stability while it loads. CLS assesses how much interface elements unexpectedly jump around as the browser loads additional content. A high CLS means a frustrating experience: the user goes to click a button, and at the last moment it moves somewhere else.

How CLS is measured

The metric is calculated as the product of two factors: the fraction of the visible viewport where the shift occurred, and the distance by which elements moved. Shifts that happen right after a user interaction (for example expanding a menu) are not counted as undesirable. Only unexpected, spontaneous layout changes during loading are summed up.

The main culprits are elements for which no space was reserved. Images without width and height attributes, asynchronously loaded ads, cookie banners and delayed fonts can all push visible content down and inflate CLS. Poorly implemented lazy loading is also a frequent source of the problem.

Practical applications

Optimizing CLS starts with measurement in tools such as PageSpeed Insights or Lighthouse, then eliminating the most common causes.

• Reserve dimensions — always specify width and height for images and ad containers.
• Load fonts stably — use font-display and preloading to avoid text jumps.
• Don't inject content above the fold — add dynamic elements below or in a reserved space.

CLS is one of Google's ranking signals, so improving it benefits both the user experience and potential rankings. Together with LCP and INP, it forms a complete picture of page experience quality.