How to Fix CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) measures how much your page's content jumps around unexpectedly as it loads. It is the most "felt" of the vitals — everyone knows the frustration of tapping the wrong thing because the layout moved. The target is 0.1 or less.

How CLS is scored

CLS is calculated from the impact of each unexpected shift (how much of the screen moved) times the distance it moved, summed across the session window. Shifts that happen within 500ms of a user interaction are excluded — only unexpected movement counts against you.

The usual culprits

• Images and videos without dimensions — the browser reserves no space, so everything below reflows when they load.
• Ads, embeds, and iframes that inject without reserved space.
• Web fonts that swap and re-flow text (FOUT/FOIT), especially when the fallback has different metrics.
• Content injected above existing content — cookie banners, notices, late-loading hero sections.
• Layout-triggering animations instead of transform-based ones.

How to fix it

1. Always set width and height (or CSS aspect-ratio) on images, videos, and embeds so the space is reserved before they load.
2. Reserve space for ads and dynamic widgets with min-height containers, so they fill a slot rather than pushing content.
3. Preload key fonts and use font-display: swap with a fallback whose metrics are close to the web font.
4. Do not insert content above what the user is viewing unless it is a direct response to their action.
5. Animate with transform and opacity, which do not trigger layout.

Common mistakes

• Fixing CLS on the homepage but ignoring article templates where ads and embeds live.
• Reserving space on desktop but not mobile (where most CLS happens).
• Leaving a late cookie/consent banner that shoves the page down on every load.

How to debug it

Chrome DevTools' Performance panel records layout shifts and names the elements responsible; the Web Vitals extension shows CLS accumulating live as you scroll and interact. Fix the biggest contributors first. Ad density above the fold is a frequent offender.