How to Fix Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) measures how much visible content moves around unexpectedly while a page loads. A good score is under 0.1. Anything above 0.25 is considered poor.

CLS is frustrating for users — you're about to tap a button and it jumps because an ad loaded above it. Google uses CLS as a ranking signal because it directly reflects user experience quality.

Common causes of layout shift

1. Images without dimensions

When an image loads without width and heightattributes, the browser doesn't know how much space to reserve. The content below shifts when the image appears. Fix: always set explicit dimensions or use CSSaspect-ratio.

2. Web fonts causing FOUT

Flash of Unstyled Text (FOUT) happens when the browser renders text in a fallback font, then swaps to the web font — causing a layout shift if the fonts have different metrics. Fix: use font-display: optional or preload your font files with <link rel="preload">.

3. Dynamically injected content

Banners, cookie consent bars, notification bars, and ads that insert themselves into the page after load push content down. Fix: reserve space for dynamic content with a fixed-height container, or use overlays that don't displace page content.

4. Animations that change layout

CSS animations that modify width, height, top, or left cause layout recalculations. Fix: use transform andopacityfor animations — they run on the compositor thread and don't trigger layout.

5. Late-loading embeds and iframes

Embedded maps, videos, and social widgets load asynchronously and expand when ready. Fix: wrap embeds in a container with the correct aspect ratio set via CSS.

How to debug CLS

Open Chrome DevTools → open the Rendering drawer (via the three-dot menu → More tools → Rendering) and enable "Layout Shift Regions". This highlights elements that shift during load. The Web Vitals extension also shows per-element CLS contributions in real time.