Cumulative Layout Shift.

Cumulative Layout Shift (CLS) measures the visual instability of a page—quantifying how much page elements jump around unexpectedly while the page loads. CLS is calculated using an impact fraction (how much of the viewport is affected) multiplied by a distance fraction (how far elements move). Users experience CLS as buttons that shift before they click, text that jumps while reading, or images that push content down.

CLS Thresholds

Google's thresholds: Good = under 0.1; Needs Improvement = 0.1–0.25; Poor = over 0.25. CLS is measured at the 75th percentile of page views. Common causes include images and videos without specified dimensions, ads and embeds inserted above existing content, fonts that change size on load (FOUT/FOIT), and dynamically injected content.

Fixing CLS Issues

Primary CLS fixes: always specify `width` and `height` attributes on images and videos so browsers reserve space before loading; avoid inserting content above the fold after page load; use `font-display: optional` or `swap` carefully to minimise font-induced shifts; reserve space for ads and dynamic content using CSS min-height; and use CSS transforms (`transform: translateY()`) rather than layout-triggering properties (`top`, `margin`) for animations.