Cumulative Layout Shift

How it works

CLS is calculated by summing the scores of all unexpected layout shifts that occur during a page's lifespan. Each shift score is the product of the impact fraction (how much of the viewport moved) and the distance fraction (how far the elements moved). Google defines CLS as the largest burst of shift scores, not a cumulative total.

Only shifts that are not initiated by user actions count. For example, clicking a button that expands a menu is not a layout shift, but an image loading and pushing text down unexpectedly is. The metric focuses on the final visual stability experienced by real users, so it can differ between lab tests and field data.

Improving CLS often involves ensuring all visible elements have reserved space. Images and videos should include width and height attributes, while dynamic content like ads or cookie notices need placeholder containers. Web fonts can cause shifts if fallback fonts differ in size; using font-display: optional or swapping can help. These techniques are part of broader efforts to improve user experience, such as optimizing largest contentful paint and learning how to optimize website performance.

Common mistakes

• Leaving image or video dimensions unspecified forces the browser to reflow content when the asset loads, increasing CLS.
• Inserting banners, cookie notices, or ads above existing content without reserving space causes unexpected downward shifts.
• Assuming all animations cause CLS: user-initiated changes and transform-based animations are usually excluded, but complex CSS animations may still contribute.
• Optimising only for lab tools while ignoring field data from real users leads to overlooked CLS issues from third-party scripts or slow networks.