What is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) is a user-centric performance metric defined by Google as part of the Core Web Vitals initiative. It quantifies how much visible content on a page shifts unexpectedly during the loading phase and throughout the entire session. A layout shift occurs when a visible element changes its starting position between two rendered frames, typically because resources like images, ads, or fonts load asynchronously after surrounding content has already been painted. The browser computes a shift score for each unexpected movement by multiplying the impact fraction (the proportion of the viewport affected) by the distance fraction (the maximum distance any element traveled relative to the viewport). CLS is the sum of these individual shift scores across all frames until the page is closed or navigated away from.

To be considered a good user experience, Google recommends a CLS score of 0.1 or less. Scores between 0.1 and 0.25 need improvement, and anything above 0.25 is poor. Unlike other performance metrics that focus on speed (such as Largest Contentful Paint), CLS directly addresses usability: sudden shifts can cause users to click the wrong button, lose their reading position, or accidentally trigger actions. Common causes include images or embeds without explicit dimensions, dynamically injected content like third-party ads or banners, web fonts that swap after rendering, and late-loading iframes or custom elements.

Developers mitigate CLS by always setting width and height attributes on images and video elements, reserving space for ads and embeds using CSS aspect-ratio boxes or min-height, and using font-display: optional or swap with careful fallback metrics. The browser's Layout Instability API (part of the PerformanceObserver interface) provides programmatic access to individual shift entries, enabling real-user monitoring. CLS is reported via the Chrome User Experience Report (CrUX) and is a ranking factor in Google Search. It sits alongside Largest Contentful Paint (loading) and First Input Delay (interactivity) as one of the three Core Web Vitals.