Cumulative Layout Shift (CLS)

What counts as a layout shift

Any movement of a visible page element from one rendered frame to the next, EXCEPT shifts that occur within 500ms of a user interaction (those are considered intentional).

CLS is calculated as the sum of “impact fraction × distance fraction” for each shift, with adjustments for session windows.

Common causes of poor CLS

The five recurring causes we audit out:

1. Images without explicit dimensions — the browser doesn’t know how much space to reserve until the image loads, so content below shifts when it arrives
2. Web fonts swapping — fallback font is displayed initially, then swaps to web font with different metrics
3. Late-loading content above the fold — banners, cookie notices, A/B test variants that insert content after initial render
4. Embedded iframes without dimensions — YouTube embeds, social media widgets
5. Ads / sponsored content — ad slots that expand when the ad fills

Optimization tactics

In rough order:

• Set explicit width/height on all images and videos — the modern equivalent: width and height HTML attributes + CSS aspect-ratio
• Use font-display: optional or properly-sized fallbacks — minimize FOIT/FOUT shifts
• Reserve space for embeds and ads — known-dimension placeholders
• Animate via transform not via layout properties — transform doesn’t trigger layout
• Avoid inserting content above existing content — cookie banners, notification bars should appear at top or bottom of viewport, not pushing content down

What CLS doesn’t count

• Shifts within 500ms of user interaction (deliberate UX)
• Shifts entirely off-screen (below the fold)
• Style changes that happen during animation (if animating via transform)

Measurement

• CrUX — 28-day real-user CLS, what Google ranking uses
• PageSpeed Insights — surfaces CrUX + lab data
• Layout Shift Regions in Chrome DevTools — overlay showing which elements are shifting in real time

Why CLS is the “easy win” of CWV

Compared to LCP and INP, CLS is typically the easiest to fix:

• Most CLS issues are missing width/height attributes on images — mechanical fix
• Most font swap issues are solved by adding font-display: optional to @font-face declarations
• Most embed shifts are solved by wrapping the embed in an aspect-ratio container

A site that fails LCP and INP often passes CLS within a 2-week sprint of mechanical fixes.

Resocial perspective

CLS is the CWV metric we see fail least often in modern audits (the others compound; CLS is solvable). When we do see it failing, it’s nearly always one of the five causes above. Our Technical SEO service catches CLS regressions in nightly monitoring before they reach the field-data baseline.