cumulative layout shift scores explained (2025)

Definition: what is cumulative layout shift?

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that captures how much visible content moves while a page is loading and during user interaction. In simple terms, it measures visual stability. A low Cumulative Layout Shift means elements stay put, users can read and tap confidently, and pages feel polished.

CLS adds up every unexpected layout shift that happens in session windows while a page is active. It uses two parts per shift: the impact fraction and the distance fraction. Together they produce a CLS score that should be as close to 0 as possible to ensure a stable, predictable experience.

Visual example of a layout shift

Imagine reading a product page and going to tap “Add to cart.” Right as you tap, a late-loading banner pushes the button down. You tap “Learn more” instead and end up on another page. That jump is a layout shift. Many small jumps add up to a poor Cumulative Layout Shift score.

Other common examples:

• Hero images loading without reserved space push text down.
• Cookie banners appearing on top shift content below.
• Dynamic content injected above the fold moves everything.
• Late-loading web fonts change text size and reflow paragraphs.

Unexpected vs expected shifts

Cumulative Layout Shift only counts unexpected shifts. If the user triggers a change by opening a menu or accordion, that movement is expected and should not contribute to CLS. Unexpected shifts are those not initiated by the user, like ads popping in or images loading without dimensions.

Design for expected movement by reserving space and animating transitions. Avoid unexpected reflow by declaring sizes, using aspect ratios, and deferring layout-affecting changes until space is reserved. This keeps Cumulative Layout Shift low and interactions smooth.

Why cumulative layout shift matters for SEO and conversions

Google uses Core Web Vitals to evaluate page experience. Cumulative Layout Shift is a key metric in that framework, and poor scores can limit organic visibility. More importantly, unstable layouts break trust, drive up bounce rate, and kill conversions. Fixing CLS improves rankings and ROI.

For growth teams, Cumulative Layout Shift is not just a technical score. It is a proxy for perceived quality. Stable pages reduce friction, increase task completion, and turn sessions into revenue. If you care about results, CLS belongs on your roadmap.

CLS and Core Web Vitals: the SEO connection

Core Web Vitals influence how Google evaluates the real-world user experience of your site. Cumulative Layout Shift, along with LCP and INP, feeds into that signal. While CLS alone will not make or break rankings, strong vitals improve competitiveness when content quality is similar.

Use PageSpeed Insights and Lighthouse to diagnose early, then validate with field data. Improving Cumulative Layout Shift tightens your overall page experience which supports better SEO outcomes. For a deeper primer, see our guide to Core Web Vitals.

The UX cost: bounce rate, trust, and conversions

Users leave when elements jump. A single bad shift can spike bounce rate by disrupting reading flow or causing mis-taps. Repeated shifts erode confidence. That’s why a high Cumulative Layout Shift correlates with lower conversion rates.

Fixes pay off fast:

• Fewer mis-clicks and accidental navigations.
• Clearer product presentation and scannable content.
• Higher add-to-cart, form completion, and checkout rates.

Reducing Cumulative Layout Shift is a direct lever on revenue. It is a UX and CRO win rolled into one.

What is a good CLS score (2025) and how it's measured

A good Cumulative Layout Shift score is 0.1 or less at the 75th percentile of real-user sessions. CLS is measured by summing the score of unexpected shifts during session windows. Each shift’s score equals the impact fraction multiplied by the distance fraction. Lower is better, and 0 is perfect.

CLS thresholds: good, needs improvement, poor

Use these thresholds to evaluate your Cumulative Layout Shift:

• Good: 0 to 0.1
• Needs improvement: greater than 0.1 up to 0.25
• Poor: greater than 0.25

Track at p75 to reflect the experience of most users. Address edge cases like slower devices and cluttered pages. Aim for a Cumulative Layout Shift of 0.05 or lower on key templates to create buffer for real-world variance.

Impact fraction and distance fraction explained

CLS scoring uses two components:

• Impact fraction: the fraction of the viewport area affected by the shift.
• Distance fraction: the fraction of the viewport the unstable element moved.

Example: If an image covers 30 percent of the viewport and moves down by 25 percent of the viewport height, the shift score is 0.3 × 0.25 = 0.075. Multiple shifts across the page’s session windows add up to your total Cumulative Layout Shift.

Lab versus field: reading Lighthouse, PageSpeed, and real-user data

Lab tools estimate CLS during a controlled run. Field data captures actual user experience across devices, networks, and pages. Use both: Lighthouse to reproduce and fix, CrUX and RUM to verify at scale. Cumulative Layout Shift needs this two-lens approach to be reliable.

Lighthouse reporting and lab limitations

Lighthouse and PageSpeed Insights simulate a single load on a test device. They are great for baseline checks and spotting obvious causes of Cumulative Layout Shift. But they can miss user-triggered shifts, slow network edge cases, and long sessions with late injections.

Use Lighthouse to:

• Record a trace and highlight layout shifts.
• See which elements caused movement.
• Validate quick fixes before shipping.

Then confirm with field data. A page that looks stable in lab may still show a poor Cumulative Layout Shift for real users due to ads, fonts, or SPA route changes.

Using Web Vitals JS and Chrome UX for RUM

For production, implement Real User Monitoring. The Chrome UX Report (CrUX) aggregates anonymized field data, and the web-vitals library lets you measure Cumulative Layout Shift directly on your site. Send CLS events to your analytics and alert on regressions.

Basic RUM with web-vitals:

This gives you real-time visibility into Cumulative Layout Shift by page type, device, and session length. Combine with CrUX to validate improvements at the p75 level.

Common causes of layout shifts (with concrete examples)

Cumulative Layout Shift creeps in when content appears before space is reserved. Below are the top culprits we see across e-commerce and B2B sites, with practical fixes and examples.

Images and videos without dimensions

When images and videos do not have width and height, the browser cannot reserve space. As they load, they push content down and inflate Cumulative Layout Shift. Always declare intrinsic dimensions or use CSS aspect-ratio to lock in layout.

HTML with dimensions and responsive behavior:

CSS aspect-ratio for card media:

Video placeholders:

These small patterns drastically reduce Cumulative Layout Shift on media-heavy templates.

Ads, embeds, and iframes

Ad slots and third-party embeds are frequent sources of unexpected reflow. If a slot loads without a fixed size, it will push content as auctions resolve or widgets render. Prevent this by reserving min-height and using placeholders for common sizes.

Reserve space for ad slots:

Follow platform guidance to keep Cumulative Layout Shift low with ad tags. For example, Google provides detailed best practices for stable slots and lazy loading. See their guide on minimizing layout shift for publishers: minimize layout shift.

Late-loading web fonts and FOIT/FOUT

Fonts that swap late can cause text to resize and reflow. This drives up Cumulative Layout Shift on text-heavy pages. Preload key fonts, use font-display settings, and pick close-metric fallback fonts to reduce shifts.

Recommendations:

• Preload critical WOFF2 fonts for above-the-fold text.
• Use font-display: swap or optional to avoid invisible text.
• Match fallback and web font metrics to keep line breaks stable.

Example preload:

These steps make text paint fast and stable, improving Cumulative Layout Shift and readability.

DOM injection, CSS changes, and layout thrashing

Client-side scripts that inject banners, consent widgets, or notices without reserving space cause CLS. So do CSS changes that alter element size after first paint. Audit scripts for DOM writes and avoid inserting new content above existing content.

Guidelines to reduce Cumulative Layout Shift:

• Add new UI elements in reserved containers.
• Animate with transform and opacity, not width or height.
• Batch DOM reads and writes to avoid layout thrashing.
• Avoid fetching content that appears above the fold after paint.

Audit playbook: find and prioritise CLS issues

Use a four-step process to diagnose and fix Cumulative Layout Shift. Start with field data to spot real problems, then reproduce in lab, map shifts to root causes, and prioritize by business impact and effort.

Step 1 - capture field data and identify high-risk pages

Pull CrUX or your RUM data to find templates with poor p75 Cumulative Layout Shift. Segment by device and traffic. Product pages, article templates, and checkout steps often show different patterns. Flag pages with CLS above 0.1 for investigation.

Learn the wider context in our Core Web Vitals guide. It shows how CLS interacts with LCP and INP to influence organic performance and conversions.

Step 2 - reproduce in DevTools Performance

Open Chrome DevTools, record a Performance profile, and reload. Toggle “Web Vitals” to highlight layout shift events. Click each marker to see affected nodes and the score contribution to Cumulative Layout Shift. Repeat on a slow 4G throttle and low-end CPU to mimic real conditions.

Reproduce specific flows:

• Load, scroll 2 screens, pause 5 seconds.
• Open menus, tabs, accordions, and filters.
• Trigger banners, consent, or chat widgets.

The goal is to pinpoint what moves, when, and why.

Step 3 - map shifts to elements and user flows

Attach each shift to a component: hero, navbar, cookie banner, product card, or ad slot. Note which user actions coincide. This mapping ties Cumulative Layout Shift to real UX moments like add-to-cart, filter open, or checkout step transitions.

Document findings:

• Element causing shift and its selector.
• Shift score and frequency.
• Impact on key flows.
• Proposed fix and effort estimate.

Step 4 - prioritise by impact x effort

Stack rank fixes: target the largest contributors to Cumulative Layout Shift that are easy to remediate. Aim for low-effort wins first to unlock fast improvements. Then tackle deeper issues like embeds and client-side rendering architecture.

A simple matrix helps:

• High impact, low effort: dimensions, aspect ratios, slot placeholders.
• High impact, medium effort: font preloads, critical CSS, deferring scripts.
• High impact, high effort: ad pipeline changes, SSR or hydration strategy.

Fixes: prioritised, high-ROI remediations for cumulative layout shift

Use a layered approach. Start with foundational hygiene, move to rendering strategy, and finish with third-party control. Each step reduces Cumulative Layout Shift and raises conversion confidence.

Low-effort, high-impact fixes (reserve space, add dimensions)

These are your fastest wins on Cumulative Layout Shift:

• Set width and height on images and use aspect-ratio for responsive blocks.
• Reserve min-height for ads, carousels, and dynamic components.
• Prevent late-sticky headers by loading fonts and CSS early.
• Use transform for animations; avoid changing layout-related properties.
• Add placeholders for widgets that fetch content post-load.

Implement across all templates to cut Cumulative Layout Shift within hours, not weeks.

Medium-effort fixes (preload fonts, critical CSS)

Now deal with render pipeline causes of CLS:

• Preload key fonts and use swap or optional to avoid reflow.
• Inline critical CSS for above-the-fold content; defer the rest.
• Eliminate unused CSS that triggers late recalculation.
• Guard SPA route transitions to avoid inserting new nodes above the fold.

These changes stabilize text and layout on first paint, reducing Cumulative Layout Shift on content-rich pages.

High-effort fixes (rearchitect embeds, server-side rendering)

For persistent CLS from third parties and app shells, rethink architecture:

• Move to server-side rendering for primary content to lock structure early.
• Hydrate progressively and avoid top-of-page injections.
• Replace unstable embeds with APIs that render into fixed-size containers.
• Coordinate ad loading with reserved slots and predictive sizes.

Understanding rendering trade-offs helps. See our take on SSR vs CSR to plan a path that reduces Cumulative Layout Shift without hurting flexibility.

Example code snippets and patterns

Reserve space for a responsive hero:

Stable accordion with transform animation:

Prevent layout thrashing in JS:

CMS and third-party guidance (Shopify, WordPress, ads)

Every platform has patterns that nudge Cumulative Layout Shift up or down. Tackle CLS at the theme level, then hold third parties to stability standards.

Shopify-specific tips to reduce CLS

Shopify CLS issues often come from theme sections that render media before dimensions are known, app blocks that inject late, and font swaps. To reduce Cumulative Layout Shift on Shopify:

• Add width and height to all Liquid image tags and use aspect_ratio in wrappers.
• Preload theme fonts and set font-display to swap.
• Reserve fixed-height slots for recommendation carousels and announcement bars.
• Defer app widgets until space is reserved; use placeholders.
• Audit the checkout’s additional scripts for DOM injections.

For a broader SEO view on Shopify performance and stability patterns, explore our insights on Shopify SEO pitfalls. Tuning Shopify CLS across key templates can be one of the highest ROI actions for store owners.

WordPress theme and plugin considerations

WordPress CLS issues often stem from page builders, slider plugins, and ads. Stabilize your theme to reduce Cumulative Layout Shift:

• Replace builder-heavy hero sliders with aspect-ratio containers.
• Load only essential CSS above the fold; defer plugin styles.
• Consolidate fonts and preload critical weights.
• Fix image markup in reusable blocks to always set dimensions.

If you need a stable, fast WordPress base, our custom WordPress development team builds themes that prioritize CLS control without sacrificing design.

Managing ads and third-party vendors for stability

Define rules for vendors: no content injection above the fold without reserved space, and all widgets must disclose min-height. For ads, size your slots up front and handle late fills gracefully. This keeps Cumulative Layout Shift within budget while monetizing.

Use platform-specific best practices and stable embeddings. Google’s guidance on publisher tags is a good reference for avoiding layout shifts in ad placements: minimize layout shift.

Case study: DePlantrekkers - minifying to reduce CLS

We applied targeted minification and layout hygiene to reduce Cumulative Layout Shift for DePlantrekkers. The goal was simple: improve stability, protect rankings, and grow conversions with minimal dev overhead. For Deplantrekkers.com we were able to minify this a lot. You can read this in our case studies.

Explore the project highlights in our DePlantrekkers case and see more examples on our case studies page.

Baseline metrics and problem scope

Before changes, the site showed a p75 Cumulative Layout Shift near the “needs improvement” band. Shifts clustered around hero images, font swaps, and promo banners. PageSpeed Insights and Lighthouse confirmed instability, and RUM exposed device-specific spikes on mobile.

The scope focused on high-traffic templates: home, category, and product detail pages. Fixing these would lift the sitewide Cumulative Layout Shift most efficiently.

What we changed: minification and related fixes

Minification was the core play, but we paired it with practical layout fixes to cut Cumulative Layout Shift:

• Minified and consolidated CSS to reduce recalculation and late styling.
• Preloaded critical fonts and set font-display to swap.
• Added width and height to all hero and card images via templating.
• Reserved min-height for banners and recommendation components.
• Deferred non-critical scripts and eliminated DOM injections above the fold.

Together, these changes stabilized first paint and prevented late reflows that were driving Cumulative Layout Shift.

Results: CLS, LCP, and business outcomes (before/after)

After release, p75 Cumulative Layout Shift dropped into the good range on all core templates. Lighthouse showed fewer shift events, and RUM validated improvements for mobile users. LCP improved due to CSS and font preloads, reinforcing the overall page experience.

The business impact: cleaner product exposure, higher confidence in key interactions, and a measurable lift in conversion rate. Improved Cumulative Layout Shift contributed to stronger organic performance over the following weeks.

Implementation effort, timeline, and lessons learned

Timeline was measured in days, not months. Minification paired with simple markup fixes delivered most of the Cumulative Layout Shift gains. The takeaway: start with hygiene. Reserve space, preload fonts, and trim late-loading CSS and JS before considering major architectural changes.

If a fast win is required, minify and stabilize above-the-fold content first. Then iterate with deeper improvements as needed.

Monitoring and regression prevention for CLS

Maintaining a low Cumulative Layout Shift is an ongoing job. Put guardrails in place: synthetic checks for early warning, RUM for truth, and CI gates to block regressions before they reach production.

Synthetic monitoring vs real-user monitoring

Synthetic monitoring (e.g., Lighthouse runs) finds obvious Cumulative Layout Shift issues fast and catches basic template regressions. Real-user monitoring captures the long tail: ad behavior, app widgets, slow networks, and late session shifts.

Use both:

• Synthetic: quick feedback in CI and post-deploy.
• RUM: p75 trends by page group, device, and geography.

Align them so synthetic signals reflect changes that will influence real Cumulative Layout Shift.

Alerts, SLOs, and regression tests

Set a service level objective: p75 Cumulative Layout Shift ≤ 0.1 for key templates. Alert if the trend breaks for three days or more. Add Lighthouse CI thresholds per path to prevent shipping unstable changes.

Example governance:

• Lighthouse CI budget: CLS ≤ 0.1 on home, PLP, and PDP.
• RUM alert: p75 CLS increases by 0.05 week over week.
• Release checklist: verify no new top-of-page DOM injections.

Validation: A/B testing UX impact

When possible, A/B test stability improvements. A variant with lower Cumulative Layout Shift should show better engagement and higher conversion rates, especially on mobile. Measure add-to-cart, scroll depth, and form completion to attribute gains to stability.

CLS fixes rarely need extensive testing to justify. Still, experiments prove impact and build stakeholder confidence.

Developer checklist: quick fixes and JavaScript snippets

Use this checklist to reduce Cumulative Layout Shift quickly and keep it low throughout development. Copy the patterns into your design system and component library.

HTML/CSS patterns to reserve space

Image and card patterns:

Ads and embeds:

Sticky headers and banners:

Fonts:

Web Vitals JS snippets to measure shifts

Use PerformanceObserver if you want detail on each shift event affecting Cumulative Layout Shift:

Or use the official web-vitals helper to track Cumulative Layout Shift at the session window level and normalize your analytics.

CI/automation tips (Lighthouse CI, pull-request checks)

Automate stability checks before merge:

• Run Lighthouse CI against key routes on every pull request.
• Fail the build if Cumulative Layout Shift exceeds 0.1 on monitored pages.
• Capture screenshots and traces for fast triage when regressions occur.
• Schedule daily synthetic runs to catch non-deterministic shifts.

CI gates keep Cumulative Layout Shift low as code changes and content evolves.

Contact 6th Man to improve your cumulative layout shift and grow conversions

If Cumulative Layout Shift is hurting rankings or conversions, we can help. 6th Man plugs in as your embedded growth team to identify and fix the root causes fast. You get senior specialists, clear deliverables, and a plan tied to business impact.

What we do: embedded growth teams and rapid remediation

We combine technical SEO, UX, and engineering to cut Cumulative Layout Shift quickly. From image and font strategy to SSR and third-party governance, we ship the highest ROI fixes first. Explore our broader capabilities in professional website development and SEO services.

Flat pricing, clear deliverables, and how to start

We operate on flat pricing with transparent scope. No hidden markups, no junior handoffs. Learn how our model differs from traditional agencies on 6th Man vs agencies and read our operating principles on our philosophy.

Link to contact page / discovery call scheduling

Ready to stabilize your experience and lift conversions by fixing Cumulative Layout Shift? Start a discovery call today via our contact page. We will review your data, share a prioritized action plan, and get you shipping improvements within days.