Cumulative Layout Shift (CLS): Causes, Debugging & Optimization

Cumulative Layout Shift (CLS) measures unexpected movement of visible page content during the user experience. A page can load quickly yet still feel unstable if text, buttons, images, ads, banners, or navigation elements move after the visitor has already started reading or interacting.

Common causes include images without dimensions, advertising slots that expand after load, late-injected notices, web-font swaps, embedded media, sticky headers, consent interfaces, and JavaScript that changes layout after initial rendering.

The strongest CLS strategy is not to hide shifts after they happen. It is to reserve the correct space before content arrives and design dynamic interfaces so that predictable changes do not push existing content unexpectedly.

Last verified: September 24, 2026. CLS definitions, browser tooling and measurement behavior can evolve, so production decisions should be checked against current web.dev and browser documentation.

---

---

1. CLS Performance Thresholds

CLS Score	Classification	Meaning
≤ 0.1	Good	Layout is generally stable
> 0.1–0.25	Needs Improvement	Users may notice layout movement
> 0.25	Poor	Unexpected movement can substantially disrupt the experience

CLS is a unitless score. Evaluate it using field data at the 75th percentile, and review mobile and desktop separately. A good target is ≤ 0.1; a perfect 0.00 is not a requirement.

---

2. What Counts as a Layout Shift and How Is CLS Calculated?

A layout shift occurs when an element that was already visible changes its position unexpectedly between rendered frames.

CLS does not simply add every shift across an indefinitely long page session. The current metric groups unexpected layout shifts into session windows. A session window continues while shifts occur less than one second apart and is capped at five seconds total. The page's CLS is based on the session window with the highest cumulative shift score.

This matters for long articles, infinite-scroll pages and application-like interfaces because a later burst of instability can become the page's reported CLS even when the initial load looked stable.

Examples include:

• A paragraph moving downward after an image appears above it.
• A button shifting because a web font changes text dimensions.
• An ad slot expanding after the page is already visible.
• A cookie notice inserting itself above the header.
• A video embed gaining height after JavaScript initializes.

Not every visual animation or movement contributes to CLS in the same way. User-initiated transitions and transform-based animations should be evaluated separately from unexpected layout changes.

---

3. Why CLS Is Different from LCP and INP

Metric	Primary Focus
LCP	How quickly primary visible content renders
INP	How responsive interactions feel
CLS	How stable the layout remains

---

4. Images Without Dimensions

Images are one of the most common sources of layout instability.

If the browser does not know the image's aspect ratio before the resource arrives, surrounding content may render first and then move when the image occupies space.

Avoid:

<img src="article-image.webp" alt="Example image">

Prefer:

<img
  src="article-image.webp"
  width="1200"
  height="675"
  alt="Example image">

---

5. Responsive Images Can Still Have Width and Height

Explicit dimensions do not prevent responsive layouts.

Use CSS such as:

img {
  max-width: 100%;
  height: auto;
}

The HTML dimensions establish the intrinsic aspect ratio while CSS controls the displayed size.

---

6. Use aspect-ratio for Predictable Containers

CSS aspect-ratio can reserve stable dimensions for media containers.

Example:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

This is particularly useful for videos, iframe placeholders, featured images, and cards with known proportions.

---

7. Responsive Image Sources Must Preserve Intended Ratios

If different image candidates use dramatically different aspect ratios, switching between them can affect layout unless the containing design anticipates the change.

Where possible, keep responsive variants of the same image consistent in aspect ratio.

For broader image optimization, continue with our Image Optimization Guide.

---

8. Ads Are a Major CLS Risk

Advertising systems frequently load asynchronously after the article layout is already visible.

If an ad container starts at zero height and later expands, everything below it can shift.

Avoid:

<div class="ad-slot"></div>

when the final slot height is likely to be substantial.

---

9. Reserve Ad Space

A more stable pattern reserves a reasonable slot before the advertisement arrives.

Example:

.ad-slot {
  min-height: 250px;
}

The exact reserved dimensions depend on the ad formats and responsive breakpoints used. Reserve enough space to avoid the slot expanding from zero height, while recognizing that larger-than-needed placeholders can leave blank space.

---

10. Do Not Collapse Empty Ad Slots Abruptly

If an ad request produces no creative, immediately collapsing a reserved slot can also move content.

The appropriate behavior depends on the advertising setup and the page layout.

Where practical, keep the reserved area stable with a placeholder rather than collapsing it after surrounding content is already positioned. If the slot must resize or disappear, prefer doing so before it enters the viewport or as part of an expected user-triggered transition.

---

11. Dynamically Inserted Banners

Late-injected banners can cause large shifts when placed above content that is already visible.

Examples include:

• Cookie banners.
• Promotional notices.
• Newsletter bars.
• Login notices.
• App-install banners.

Avoid inserting these above existing page content after the initial render unless the layout already reserves space.

---

12. Prefer Overlay or Reserved UI Patterns

When appropriate, a banner can use a fixed overlay rather than pushing the entire document downward.

Example:

.notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Accessibility, keyboard navigation, content obstruction, and mobile viewport size still need to be tested.

---

13. Web Fonts Can Shift Text

A fallback font and the final web font can have different character widths, line heights, and glyph metrics.

When the final font loads, headings and paragraphs can reflow and move nearby elements.

Potential improvements include:

• Using fewer font families.
• Using fewer weights.
• Choosing a metrically similar fallback.
• Using metric overrides such as size-adjust, ascent-override, descent-override and line-gap-override where appropriate.
• Self-hosting fonts where operationally appropriate.
• Loading genuinely critical fonts efficiently.

For a deeper font-loading workflow, use the Web Font Performance Optimization Guide.

---

14. font-display Requires an Intentional Strategy

A typical font face might include:

@font-face {
  font-family: 'Example';
  src: url('/fonts/example.woff2') format('woff2');
  font-display: swap;
}

swap can show text quickly but may result in a visible font replacement. Test whether the fallback metrics create unacceptable layout movement.

---

15. Avoid Loading Excessive Font Variants

A site using:

• Three font families.
• Eight weights.
• Several italic variants.

can create unnecessary font downloads and increase layout complexity.

Use only the typography variants the publication genuinely requires.

---

16. Embedded Videos and Iframes

An iframe that receives its dimensions only after JavaScript initialization can shift surrounding content.

Reserve space before it loads.

.embed-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed-wrapper iframe {
  width: 100%;
  height: 100%;
}

---

17. Social Embeds

Social-post widgets can be difficult to predict because their final height depends on:

• Post content.
• Media.
• Quoted posts.
• Platform JavaScript.

Where exact height is unknown, use a reasonable placeholder and avoid placing unstable embeds high in the initial viewport.

---

18. WordPress Featured Images

A WordPress theme should output featured-image dimensions or an equivalent stable aspect ratio.

If a theme initially renders:

Title
Article Intro
Body Text

and then inserts a large featured image between the title and introduction after JavaScript runs, a major shift can occur.

Keep important article media present in stable server-rendered markup where practical.

---

19. WordPress Lazy Loading and CLS

Lazy loading itself does not need to cause layout shifts.

A lazy-loaded image can remain stable if the browser already knows its dimensions.

The problematic combination is:

• Lazy-loaded image.
• No width or height.
• No aspect-ratio container.

Reserve the image's space regardless of when the resource downloads.

---

20. Page Builders and CLS

Page builders may produce layout instability through:

• Late-loaded widgets.
• Dynamic CSS.
• Sliders.
• Sticky containers.
• Responsive visibility rules.
• Third-party add-ons.

Test representative templates rather than assuming one optimization setting fixes every page.

---

21. Sliders and Carousels

A carousel can shift surrounding content when slides have different heights.

Where possible:

• Use consistent slide dimensions.
• Reserve the maximum intended container height.
• Use stable aspect ratios for images.

Avoid allowing every slide transition to resize the document unexpectedly.

---

22. Sticky Headers

Sticky headers can cause CLS when their height changes after scrolling or when JavaScript converts a normal header into a fixed element without preserving document space.

Plan:

• Initial header height.
• Sticky header height.
• Spacer behavior.
• Mobile breakpoints.

Changing visual appearance with transforms or opacity is generally more stable than repeatedly changing document geometry.

---

23. Avoid Inserting Content Above the User's Current Position

Suppose a visitor is reading paragraph five and a recommendation widget loads above paragraph two.

The entire article may move downward.

Prefer:

• Reserved placeholders.
• Content inserted below the current viewport.
• User-triggered expansion.

---

24. User-Initiated Changes Are Different

A user clicking “Show details” expects the layout to change.

CLS excludes layout shifts that occur shortly after certain discrete user interactions. Current web.dev guidance uses a 500 millisecond exclusion window after qualifying input such as a click, tap or key press.

Do not treat that allowance as permission to create unstable interfaces. Shifts caused while a user merely scrolls or hovers can still count, and network-delayed content that arrives outside the interaction window can also contribute to CLS.

Keep interaction transitions smooth and avoid unnecessarily moving unrelated parts of the page.

---

25. Animations: Prefer transform

Animations based on properties that change layout geometry can cause additional browser work.

For simple movement, prefer transforms where suitable:

.menu-panel {
  transform: translateX(0);
}

rather than repeatedly changing layout properties such as positional offsets when a transform can provide the same visual effect.

---

26. Skeleton Screens Need Stable Dimensions

Skeleton loading interfaces can reduce perceived waiting, but the placeholder should closely match the final component geometry.

If the skeleton is 100 pixels tall and the final component becomes 400 pixels tall, the interface can still shift substantially.

---

27. Dynamic Product and Price Content

Ecommerce components may shift because:

• Sale badges load later.
• Prices change after API calls.
• Stock notices appear.
• Review summaries initialize.

Reserve predictable component space or design the card so variable information can appear without changing surrounding geometry significantly.

---

28. Consent Management Platforms

Consent interfaces can create major CLS if loaded after page rendering and inserted above content.

Test:

• First visit.
• Returning visit.
• Mobile viewport.
• Desktop viewport.
• Accepted state.
• Rejected state.

Do not test CLS only after the consent banner has already been dismissed.

---

29. Measure Real-User CLS and Compare It With Lab Data

Field data is especially valuable because CLS can accumulate from layout shifts that happen after initial loading. A Lighthouse navigation audit may look stable while real users encounter later shifts during scrolling, ad loading, consent flows or dynamic recommendations.

When CrUX or another RUM source reports materially worse CLS than a simple lab run, investigate post-load CLS rather than assuming the field data is wrong.

Lab tests may miss:

• Late ads.
• Consent banners.
• Infinite scrolling.
• Dynamic recommendations.
• Web-font behavior on slower connections.

Review field data through available Core Web Vitals reporting and real-user monitoring where appropriate.

When implementing custom RUM, Google's web-vitals library is preferable to hand-rolling CLS aggregation because it accounts for session-window behavior and several lifecycle edge cases. Be aware that browser APIs cannot always attribute shifts inside cross-origin iframes even though users can experience them and CrUX can include them.

---

30. Debug CLS in Browser DevTools

Chrome DevTools Performance tooling can help identify layout-shift events, their timing, shift score and affected elements. The live metrics view is also useful for reproducing post-load shifts while interacting with the page.

A practical workflow is:

1. Record page loading and interaction.
2. Locate layout-shift events.
3. Inspect affected elements.
4. Find the content inserted or resized immediately before the event.
5. Reserve space or redesign the dynamic behavior.

---

31. Back/Forward Cache Can Improve Return-Navigation Stability

Pages that are eligible for the browser back/forward cache (bfcache) can be restored in their already-rendered state when users navigate back or forward, avoiding a repeat of load-time shifts on that return navigation.

bfcache does not excuse poor CLS on the initial visit, but preserving eligibility can improve subsequent navigation experience. Test bfcache separately from the primary layout-shift fixes.

---

32. Mobile CLS Can Differ from Desktop

A component stable on desktop may shift on mobile because:

• Headings wrap differently.
• Ads use different dimensions.
• Navigation changes completely.
• Images occupy different aspect ratios.
• Sticky UI becomes larger relative to viewport height.

Review mobile field data separately.

---

33. CLS and Responsive Breakpoints

Test layouts near breakpoint boundaries.

For example:

• 767 px.
• 768 px.
• 1023 px.
• 1024 px.

A late stylesheet or JavaScript calculation can move an element between mobile and desktop layouts after the initial render if responsive behavior is inconsistent.

---

34. CLS and Render-Blocking CSS

Delaying necessary styles can result in content being painted using incomplete styling and then reflowing after the real stylesheet applies.

This is one reason aggressive asynchronous CSS strategies need testing.

Continue with our Render-Blocking Resources Guide.

---

35. CLS and Image Optimization

Image compression primarily reduces transfer size.

Layout stability comes primarily from:

• Known dimensions.
• Aspect-ratio preservation.
• Stable responsive layout.

A tiny WebP image without dimensions can still create CLS.

Continue with our Image Optimization Guide for format and responsive-delivery decisions.

---

36. CLS and Server Speed

Hosting can affect how quickly document and resource responses arrive, but CLS is primarily a layout-stability problem.

A faster VPS does not automatically fix:

• Missing image dimensions.
• Unreserved ad slots.
• Font metric changes.
• Late banners.
• Resizing carousels.

Do not recommend hosting upgrades as the first response to poor CLS.

---

37. Common WordPress CLS Mistakes

• Featured images without dimensions: Article content moves after the image loads.
• Ads inserted after render: Content is pushed downward.
• Multiple font families: Late font swaps cause text reflow.
• Lazy-loaded images without reserved space: Images expand from zero height.
• Page-builder sliders with changing height: Each slide changes document geometry.
• Cookie banners inserted above the header: Entire page shifts.
• Sticky headers changing dimensions: Content moves when sticky mode activates.
• Embeds without aspect ratio: Iframes expand after initialization.

---

38. CLS Optimization Workflow

1. Confirm field CLS: Determine whether real users experience the issue.
2. Identify affected templates: Articles, homepage, category, product, checkout, or landing pages.
3. Record the page: Capture layout-shift events.
4. Find the shifting element.
5. Identify what changed immediately before it.
6. Reserve dimensions or redesign the component.
7. Test fonts and responsive breakpoints.
8. Test ads and consent systems separately.
9. Test mobile and desktop.
10. Deploy and monitor field data.

---

39. Recommended CLS Internal-Linking Path

Use the following internal path to connect layout-stability work with the broader Core Web Vitals and specialist performance guides without duplicating their intent:

• Parent performance framework: Core Web Vitals Optimization Guide.
• Render-path problems: Render-Blocking Resources Guide.
• Image dimensions, formats and responsive delivery: Image Optimization Guide.
• Font-induced shifts: Web Font Performance Optimization.
• Interaction responsiveness: INP Optimization Guide.
• Broader technical diagnosis: Technical SEO Audit Workflow.

Keep related links focused on frontend layout stability, rendering, image delivery, interaction performance, and technical SEO rather than unrelated commercial offers.

---

Summary: CLS Optimization Checklist

• Target CLS of 0.1 or less at the 75th percentile.
• Always provide image dimensions or a stable aspect ratio.
• Reserve space for advertisements.
• Do not inject banners above already visible content without planning space.
• Use stable containers for video and iframe embeds.
• Choose web-font fallbacks carefully.
• Avoid excessive font families and weights.
• Keep carousel dimensions stable.
• Plan sticky-header geometry.
• Keep skeleton placeholders close to final dimensions.
• Test consent-management interfaces.
• Measure field data, not only initial lab loading.
• Review mobile and desktop separately.
• Test responsive breakpoints.
• Do not use hosting upgrades as a generic CLS fix.

Frequently Asked Questions

What is a good CLS score?

A good CLS score is 0.1 or less at the 75th percentile of page visits.

What usually causes poor CLS?

Common causes include images without dimensions, advertisements without reserved space, web-font swaps, late banners, embeds, sliders, sticky UI, and dynamically inserted content.

Does lazy loading cause CLS?

Not by itself. A lazy-loaded image can remain stable when the layout already reserves its dimensions or aspect ratio.

Can ads cause CLS?

Yes. An ad container that expands after the surrounding content renders can move a large portion of the page. Reserving realistic slot dimensions helps reduce this problem.

Can web fonts affect CLS?

Yes. Different font metrics can change line wrapping and element dimensions when the final font replaces a fallback font.

Does faster hosting improve CLS?

Not necessarily. Hosting can improve resource response time, but it does not directly repair missing dimensions, unstable ads, font swaps, or dynamic component geometry.

Does good CLS guarantee higher rankings?

No. Google uses Core Web Vitals within its ranking systems, but a good CLS score does not guarantee a particular ranking position. Google explicitly advises against chasing a perfect Core Web Vitals score solely for SEO.

Should I reserve space for every dynamic component?

Reserve predictable space for components likely to affect surrounding content. The exact strategy depends on whether the component size is fixed, responsive, user-triggered, or content-dependent.