Cumulative Layout Shift (CLS).

How much the page jumps around while loading — Google ranking factor, target <= 0.1

What does this check test?

Cumulative Layout Shift measures the sum of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift happens when a visible element changes its position from one rendered frame to the next without user interaction. The CLS score is calculated by multiplying the impact fraction (how much of the viewport shifted) by the distance fraction (how far the element moved). Google considers CLS 'good' at 0.1 or less, 'needs improvement' between 0.1 and 0.25, and 'poor' above 0.25.

Why does it matter?

Layout shifts are one of the most frustrating user experiences on the web — users click the wrong button, lose their reading position, or accidentally navigate away from a page. CLS is a Core Web Vital that affects Google search rankings. High CLS scores correlate strongly with user frustration metrics and increased bounce rates. Layout shifts caused by ads or late-loading content are the most common complaints users report about web experience quality.

Who is affected?

Sites with ads, dynamically injected content, web fonts, images without dimensions, or late-loading third-party embeds are most affected. News sites, blogs with ad placements, and e-commerce sites with dynamic product recommendations frequently suffer from poor CLS. Mobile users experience worse CLS due to smaller viewports where shifts are proportionally larger.

Where does this apply?

Layout shifts most commonly occur in the main content area when images load without reserved space, in header/nav areas when fonts swap, near ad slots that inject content, and anywhere dynamic content is inserted above existing visible content. Use Chrome DevTools Performance panel with 'Layout Shift Regions' enabled to visualize exactly where shifts happen.

How to fix it

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

@font-face {
  font-family: 'Body';
  src: url('/fonts/body.woff2') format('woff2');
  font-display: optional;
  size-adjust: 102%;
  ascent-override: 90%;
}

<div style="min-height: 250px;"><!-- ad slot --></div>

References

• Cumulative Layout Shift (CLS) — web.dev
• Optimize CLS — web.dev
• Debug layout shifts — Chrome DevTools