Cumulative Layout Shift (CLS) is a web performance metric that measures visual stability. It quantifies how often users experience unexpected movement of content while a page is loading or active. Improving your CLS score prevents frustrating user experiences, such as clicking a link that shifts at the last second or losing your place while reading.
What is Cumulative Layout Shift (CLS)?
CLS is a Core Web Vital metric introduced by Google to measure perceived visual stability. It calculates the total of all layout shift scores for every unexpected shift that occurs during a page's entire lifespan. Unlike other metrics that measure speed, CLS focuses on how smoothly a page renders and behaves.
Current measurement uses a "session window" approach. A session window is a burst of layout shifts that occur in rapid succession, defined as having less than 1 second between each shift and a maximum window duration of 5 seconds. The largest burst in a page's life determines the final CLS score.
To provide a high-quality experience, [a good CLS score is 0.1 or less] (web.dev). To meet Google’s recommended threshold, you should [measure the 75th percentile of page loads] (web.dev) across both mobile and desktop devices.
Why Cumulative Layout Shift (CLS) matters
Visual stability directly impacts how users perceive your site's quality. High CLS can lead to several negative outcomes:
- Search Engine Optimization: CLS is part of Google’s Core Web Vitals, which serve as a ranking signal in search results.
- Performance Scoring: In Lighthouse Version 12, [CLS accounts for 25% of the total Performance Score] (GTmetrix).
- Conversion and UX: Unexpected shifts can trick users into clicking accidental ads or submitting forms prematurely.
- User Retention: A "jumpy" page is disorienting and often causes users to abandon the site.
How Cumulative Layout Shift (CLS) works
The browser calculates the layout shift score by looking at the viewport size and the movement of unstable elements between two rendered frames. This calculation uses two factors:
Impact Fraction
The impact fraction measures how much of the viewport area is affected by an element's movement. If an element occupies 50% of the viewport and then shifts down by 25%, the total area affected (the combined area of its old and new positions) is 75%. In this case, the impact fraction is 0.75.
Distance Fraction
The distance fraction measures how far an element has moved relative to the viewport. The browser takes the greatest horizontal or vertical distance an unstable element moved and divides it by the viewport’s largest dimension (width or height). If an element moves 25% of the viewport height, the distance fraction is 0.25.
The final score for a single shift is the result of multiplying these two numbers:
Impact Fraction * Distance Fraction = Layout Shift Score
Expected versus Unexpected Layout Shifts
Not all content movement is bad. Layout shifts are categoried based on what triggered them:
User-initiated layout shifts
Layout shifts are generally fine if the user expects them. [Layout shifts occurring within 500 milliseconds of user input are excluded] (web.dev) from the CLS score. Common examples include clicking a "Search" button that expands a text field or tapping a "Read More" link that reveals content.
Animations and transitions
Content that moves gradually through CSS transitions or animations helps users understand state changes. These usually do not trigger poor scores if implemented correctly using properties that do not trigger layout recalculation.
Best practices for improving CLS
Most layout shifts are the result of elements loading without defined dimensions. Follow these practices to stabilize your layout:
- Include size attributes for media: Always set explicit width and height attributes on
<img>and<video>tags. This allows the browser to reserve the correct amount of space while the asset downloads. - Reserve space for ads and embeds: Use CSS to set a
min-heighton containers for advertisements and iframes. This prevents the page from jumping when the ad content eventually loads. - Optimize web font loading: Use
font-display: swaporfont-display: optionalto control how text appears during font downloads. Preloading critical fonts can also prevent layout shifts caused by the Flash of Invisible Text (FOIT). - Avoid content injection: Do not insert new content, such as banners or newsletters, above existing content that is already in the viewport. If you must add content, do it in response to a user interaction.
- Use transform for animations: When animating elements, use the CSS
transformproperty instead of changingtop,bottom,left, orrightproperties.
Common mistakes
- Mistake: Omitting dimensions on responsive images.
Fix: Provide width/height scaling or use the CSS
aspect-ratioproperty to let the browser calculate the area before the image arrives. - Mistake: Loading third-party widgets without placeholders. Fix: Create skeleton screens or empty containers with fixed dimensions to house widgets like social media feeds.
- Mistake: Late-loading CSS or styles. Fix: Prioritize critical CSS and inline the styles needed for the initial viewport to ensure the layout is correct from the first frame.
- Mistake: Using FOIT-triggering font settings. Fix: Ensure text remains visible during font loads by using system font fallbacks that closely match the dimensions of your custom brand font.
Examples of layout shifts
- The Accidental Order: A user intends to click a "Cancel" button, but an ad suddenly loads at the top of the page. This pushes the layout down, and the user accidentally clicks "Confirm Order" instead.
- The Jumping Text: A reader is halfway through an article when a high-resolution image loads above the text. The sentence they were reading suddenly jumps out of the viewport, forcing them to scroll down to find their place.
- The List Re-sort: A search results list loads in alphabetical order. As the final results arrive from an API, the list re-orders itself, causing multiple items to shift their vertical positions simultaneously.
How to measure CLS
You can collect CLS data in two environments:
Lab Data (Simulated)
Lab tools test your page in a controlled environment. These are useful for catching shifts during development but do not account for real-world scrolling. * Lighthouse: Available in Chrome DevTools to provide a performance audit. * Chrome DevTools: The "Performance" panel can highlight specific "Layout Shift" regions in blue during a recording.
Field Data (Real User Experience)
Field data captures the actual experience of your visitors. * Chrome User Experience Report (CrUX): Provides the data Google uses for its 28-day rolling SEO assessment. * PageSpeed Insights: Shows both Lab and Field data for a specific URL. * Search Console: The Core Web Vitals report highlights URLs on your site categorized as "Poor" or "Needs Improvement."
FAQ
Does CLS affect SEO?
Yes. CLS is one of three Core Web Vitals used by Google as a ranking factor. Sites with a score above 0.25 are considered poor and may see a negative impact on search visibility compared to sites with good visual stability.
Why is my CLS score different in field data vs. lab data?
Lab tools only measure the initial page load. Field data measures the entire lifespan of the page, including shifts that happen when a user scrolls down or interacts with late-loading content that the lab tool might have missed.
How do I stop ads from shifting my content?
The best way is to reserve the largest possible height for the ad slot before it loads. If an ad doesn't load, use a placeholder or collapse the slot only if it is outside the user's current viewport.
Can animations cause a bad CLS score?
Yes, if they use properties that trigger the browser to recalculate the layout, such as height, width, or margin. Using transform: translate() or scale() avoids this because these are handled by the compositor layer and do not count as shifts.
Do shifts in iframes count?
While the Layout Instability API might not report shifts inside iframes to the parent page automatically, they are part of the user experience. CruX data includes shifts occurring in sub-frames, so you should ensure embedded content is also stable.
