Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is the Core Web Vitals metric quantifying unexpected visual layout shifts on a page — content jumping around as the page loads or as users interact with it. It is measured as a dimensionless number rather than a time.

Thresholds: Good is under 0.1, Needs Improvement is 0.1–0.25, Poor is over 0.25. The metric sums the impact of each layout shift across the page's lifetime, weighted by the distance shifted and the fraction of the viewport affected.

CLS specifically captures unexpected shifts — content that moves without user input. Shifts caused by user interactions (clicking a button that expands an accordion, opening a modal) are excluded from the calculation during a 500ms window after the interaction.

Common causes of CLS failures: images without explicit width and height attributes (or aspect-ratio CSS), causing the browser to reflow when the image dimensions become known; web fonts that swap in after the page renders, shifting text reflow; dynamically injected ads or embeds that push existing content down; and late-loading banner notifications, cookie consent dialogs, or sticky promotional bars that appear above the fold without reserved space.

Fixes are mostly structural. For images: always specify width and height attributes, or use aspect-ratio CSS. For fonts: preload critical fonts and use font-display: optional or font-display: swap with a careful fallback metric match. For ads: reserve the slot dimensions in CSS so the layout does not change when the ad arrives. For dynamic content: insert above the fold only when triggered by user action, not on load.

Counterintuitive case: a page can have zero shifts on the initial load and still fail CLS because the metric continues accumulating during the user session. A "subscribe to our newsletter" popup that appears after 15 seconds and pushes content down counts toward CLS. Defer or anchor such content carefully.

Diagnose with Chrome DevTools' Performance panel using the Layout Shifts overlay, which highlights every shift and its impact value. Field data from CrUX or Search Console's Core Web Vitals report shows real-user CLS at the 75th percentile.

CLS is usually the cheapest Core Web Vital to fix once diagnosed — most issues are CSS-level and resolved in a few minutes per template.