Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much visible content shifts position unexpectedly during a page’s loading and use. It is a measure of visual stability, pages with low CLS feel solid and predictable; pages with high CLS feel jumpy and frustrating.

CLS is one of three Core Web Vitals (along with LCP and INP) used by Google as a search ranking signal.

What CLS measures

CLS quantifies how much elements move from one rendered frame to the next. The score is a unitless number representing the proportion of the viewport affected by unexpected movement, multiplied by the distance moved.

Movement caused by user interaction (clicking a button that expands a section) does not count. Only unexpected shifts contribute to CLS.

CLS thresholds

Google’s published thresholds:

Score	Threshold
Good	Under 0.1
Needs improvement	0.1–0.25
Poor	Over 0.25

These apply to the 75th percentile of real-user data.

Common causes of layout shifts

Images without dimensions. When an image loads after the surrounding content, it pushes everything below it down
Ads or embeds loading after page render. Ads and third-party widgets often shift content as they appear
Web fonts swapping in. Custom fonts can have different metrics than fallback fonts; when they swap in, text reflows
Dynamically injected content. Notifications, banners, cookie consent dialogs that appear after initial load
Animations that affect layout. Animating properties like width or top (rather than transform) can trigger reflows
Iframes without reserved dimensions. Embedded videos, social media posts, and maps that load late

How CLS is calculated

For each unexpected layout shift, the browser computes a “layout shift score” based on:

Impact fraction. The portion of the viewport affected by the shift
Distance fraction. How far elements moved as a fraction of the viewport dimension

The CLS metric was updated in 2021 to use “session windows”, the largest sum of layout shifts within any 5-second window during the page’s lifetime, rather than the total throughout the entire session. This makes CLS more representative of user experience on long-lived pages.

Common CLS optimizations

Specify image dimensions. Always include width and height attributes on images, or use CSS aspect-ratio
Reserve space for ads and embeds. Use placeholder containers with set dimensions
Use font-display: optional or preload fonts. Reduces font-swap-related shifts
Avoid inserting content above existing content. Cookie banners and notifications should appear at the top or bottom, not push down content below them
Use CSS transform for animations. transform: translate() and transform: scale() do not trigger layout shifts
Set explicit dimensions on iframes. Including video embeds, maps, and social posts
Avoid loading="lazy" on above-the-fold images. Lazy loading can cause shifts as images load late

Diagnosing CLS

Chrome DevTools provides specific CLS diagnostics:

Open DevTools → Performance tab
Record a page load
Look for “Layout Shift” markers in the timeline
Each marker shows which element shifted, when, and by how much

Lighthouse and PageSpeed Insights also identify the largest layout shifts and the elements involved.

CLS by site type

Site type	Typical CLS characteristics
Static / code-based sites with image dimensions specified	Often near zero
Sites with ads and many third-party embeds	Often poor (above 0.25)
Default templates on hosted CMS platforms	Variable; depends on template and content
Sites with custom web fonts and no font preloading	Often elevated due to font swap

CLS is more sensitive to specific implementation choices than LCP; small changes (specifying image dimensions, reserving ad space) often produce large improvements.

CLS vs other Core Web Vitals

LCP measures when the page appears loaded; INP measures responsiveness; CLS measures visual stability. A page can score well on LCP and INP but fail CLS, for instance, a fast-loading page where ads continually push content around.

CLS is uniquely a “perceived quality” metric: it captures something users notice immediately even when objective load times are good.

Common misconceptions

“CLS only matters during initial page load.” CLS is measured throughout the page’s lifetime; shifts that happen as the user scrolls or interacts are counted.
“Specifying image dimensions slows down development.” It takes one or two extra attributes per image and is the single highest-impact CLS fix.
“CLS only matters for content-heavy sites.” It applies to any page; ecommerce, app interfaces, and marketing pages all benefit from visual stability.
“Higher CLS means slower loading.” CLS is independent of load speed; a page can load slowly with low CLS, or quickly with high CLS.