Cumulative Layout Shift (CLS): Fix Layout Shifts

What Is Cumulative Layout Shift?

Cumulative Layout Shift (CLS) measures the total amount of unexpected visual movement that occurs during a page’s lifetime. When elements on a page shift position after initially appearing — pushing buttons, text, or images to new locations — it creates a frustrating user experience and hurts your Core Web Vitals score.

Google’s thresholds for CLS:

• Good: CLS below 0.1
• Needs Improvement: 0.1 to 0.25
• Poor: Over 0.25

A CLS of 0.1 means that 10% of the viewport shifted unexpectedly. While that sounds small, it is enough to cause a user to click the wrong button or lose their place while reading.

Common Causes of Layout Shift

Images and Videos Without Dimensions

When an image or video loads without explicit width and height attributes, the browser does not know how much space to reserve. The content below the media element jumps down once the asset loads.

Fix: Always include width and height attributes on <img> and <video> elements. Modern browsers use these to calculate the correct aspect ratio before the media loads:

<img src="photo.webp" width="800" height="600" alt="Description" />

For responsive images, use CSS aspect-ratio to maintain proportions:

img {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
}

Web Fonts Causing Text Reflow

When a custom font loads and replaces the fallback font, the text often changes size and spacing, causing layout shifts. This is known as Flash of Unstyled Text (FOUT).

Fix: Use font-display: optional to prevent layout shifts entirely (the custom font only applies if it arrives quickly). Alternatively, match your fallback font metrics to your custom font as closely as possible. For more details, see our font optimization guide.

Dynamically Injected Content

Ads, banners, cookie consent overlays, and dynamically loaded widgets that insert themselves into the page layout cause shifts for everything below them.

Fix:

• Reserve space for ads and dynamic content using CSS min-height or aspect-ratio
• Use overlay patterns (position: fixed) for banners and consent dialogs so they do not push page content
• Load dynamic content above the fold with pre-allocated space

Late-Loading CSS

When CSS files load after the page has already rendered with default styles, the sudden application of new styles can shift elements dramatically.

Fix: Inline critical CSS in the HTML head and ensure all layout-affecting styles load before the page renders. Non-critical CSS for below-the-fold content can load asynchronously.

Injected Navigation or Headers

Single-page applications that render the navigation bar with JavaScript can cause the main content to shift down once the nav appears.

Fix: Include navigation markup in the server-rendered HTML so it is present from the initial render. Read more about JavaScript SEO and rendering.

Measuring CLS

Lab Tools

• Chrome DevTools Performance panel — Shows individual layout shift events with affected elements highlighted
• Lighthouse — Reports total CLS and identifies contributing elements
• WebPageTest — Filmstrip view shows exactly when shifts occur

Field Data

• Chrome User Experience Report (CrUX) — Real-world CLS data from Chrome users
• Google Search Console — Core Web Vitals report shows CLS across your site
• Web Vitals JavaScript library — Capture CLS from real users on your site

Important: CLS in lab tools often differs from field data because lab tools measure during page load only, while field data captures shifts throughout the entire page session (scrolling, interactions, lazy loading).

Advanced CLS Optimization

Handling Responsive Layouts

Responsive designs that dramatically change layout between breakpoints can trigger CLS if the initial render occurs at the wrong viewport size. Test CLS at multiple viewport widths to ensure smooth transitions.

Managing State-Driven UI Changes

Interactive elements that expand, collapse, or rearrange based on user input do not count as unexpected shifts (shifts triggered by user interaction within 500ms are excluded). However, delayed responses — like content loading after a button click takes 2 seconds — do contribute to CLS.

Fix: Show loading skeletons or placeholders immediately on interaction, then swap in the real content without changing the reserved space.

Animations and Transitions

Use CSS transform properties for animations instead of properties that affect layout (like top, left, width, or height). Transform-based animations do not trigger layout recalculation and do not contribute to CLS.

Shifts from transforms are excluded from CLS scoring, making them the safe choice for visual effects.

Sticky Headers

Sticky headers that change height (e.g., shrinking on scroll) push content down. Use a fixed header height or use transform: translateY() for the shrink effect instead of changing the actual height.

CLS Audit Checklist

• All images and videos have explicit dimensions (width/height or aspect-ratio)
• Fonts use font-display: optional or swap with matched fallback metrics
• Ad slots have reserved minimum heights
• Cookie consent uses overlay positioning (not inline insertion)
• Critical CSS is inlined — no late-loading layout styles
• No JavaScript-injected content shifts visible elements
• Animations use transform instead of layout-affecting properties
• Lazy-loaded content has pre-allocated space

CLS and SEO Impact

CLS is a confirmed Google ranking factor as part of Core Web Vitals. While it may not single-handedly determine your rankings, it contributes to the overall page experience signal that Google uses to differentiate between otherwise similar pages.

More importantly, poor CLS directly impacts user behavior:

• Accidental clicks lead to frustration and higher bounce rates
• Reading disruption reduces time on page and engagement
• Mobile users are disproportionately affected because smaller screens amplify the impact of shifts

Combined with strong LCP and INP scores, fixing CLS completes your Core Web Vitals optimization and provides a competitive edge in search rankings.

Key Takeaways

Preventing layout shifts is about respecting your users’ visual experience:

1. Always reserve space for media, ads, and dynamic content
2. Handle font loading to prevent text reflow
3. Inline critical CSS to prevent style-driven shifts
4. Use transforms for animations instead of layout properties
5. Measure in the field — lab CLS often underestimates real-world shifts
6. Test across devices — mobile CLS is often worse than desktop

CLS is the most user-visible Core Web Vital, and fixing it has an immediate, tangible impact on how people experience your site.