The Complete Guide to Cumulative Layout Shift (CLS)
Unexpected layout movement is one of the fastest ways to lose user trust. In this playbook, you will learn how Cumulative Layout Shift is calculated, why it influences conversions, and the practical steps you can take to stabilize every critical page template.
Stable experience with minimal unexpected movement.
Users begin to notice layout shifts. Prioritize fixes soon.
Severe layout instability that hurts engagement and conversions.
How Cumulative Layout Shift Is Calculated
CLS is a metric that captures the total impact of all unexpected layout shifts that occur during the lifespan of a page. It is calculated by multiplying the impact fraction (how much of the viewport moved) by the distance fraction (how far elements moved). The metric focuses on instability that happens while the user interacts with the page, not deliberate layout changes triggered by user actions.
The browser tracks layout changes in session windows. Each session window groups layout shifts that happen within 1 second of each other, up to 5 seconds total. Your CLS score is the largest session window score observed during the page visit.
Top Causes of High CLS Scores
- Images and videos without reserved aspect ratios push content down as they load.
- Third-party scripts inject content above the fold without placeholder containers.
- Web fonts cause flash of invisible text (FOIT) or fallback text shifts (FOUT).
- Cookie consent banners and promotional modals appear late and shift primary content.
- SPA routing transitions insert new content without transition guards or skeleton states.
Stabilize Your Layout with These Strategies
Use the following engineering and design practices to keep visual elements predictable and anchored. Start with templates that drive revenue or critical conversions and then expand coverage across the rest of the site.
Always include explicit width and height on images, video embeds, and iframes so the browser can allocate space before assets load.
Avoid inserting DOM elements above existing content. Use skeleton loaders or placeholders for ads, newsletters, and consent banners.
Use `font-display: swap`, preload critical fonts, and match fallback font metrics to prevent text reflow during loading.
Preload hero images, fonts, and key CSS to reduce late network requests that trigger layout adjustments.
Implement field data monitoring (RUM) to capture CLS across devices, network types, and viewports—not just lab simulations.
Engineering Checklist Before Deployment
Ship new templates with a stability checklist. Document the owners for each item to ensure accountability across product, design, and engineering teams.
- Include intrinsic dimensions for every media element.
- Preallocate space for third-party embeds, ads, and popovers.
- Defer non-critical animations until after page load.
- Align font fallback metrics with final web fonts to avoid reflow.
- Audit personalized modules for late-loading shifts on repeat visits.
Quantify Improvements with the Right Tools
Combine lab diagnostics with real-user monitoring to validate that your fixes hold up under production traffic. Pair synthetic and field data so you can confirm whether regressions are specific to certain geographies, devices, or connection speeds.
Lab analysis with opportunities and diagnostics for layout stability.
Field data from real Chrome users across the globe.
Client-side monitoring that sends CLS metrics to your analytics backend.
Access origin-level performance data inside Search Console.
Prioritize CLS Fixes That Impact Revenue
Focus on journeys where unexpected layout movement leads to lost revenue or engagement. Checkout flows, lead forms, and product detail pages often present the highest risk because dynamic modules load around primary calls to action.
| Template | Risk Level | Recommended Action |
|---|---|---|
| Lead generation landing pages | High | Reserve space for form validation and personalization modules. |
| Ecommerce product detail pages | Medium | Preload hero media and defer recommendation carousels below the fold. |
| News article templates | Medium | Place ads in fixed-size containers and lazy-load only after user scroll. |
| Support documentation | Low | Audit code snippets and expandable accordions for late layout shifts. |
Build a Performance Culture Around CLS
CLS is not a one-and-done fix. Establish governance policies that make stability a requirement across the product lifecycle.
- Set targets in dashboards. Track the percentage of page views in the \"good\" CLS band and alert your team when thresholds slip.
- Integrate into CI/CD. Run automated Lighthouse audits in pull requests or nightly builds to catch regressions before launch.
- Educate stakeholders. Share before-and-after recordings and business impact to secure ongoing prioritization.
Get instant CLS scoring, visual shift timelines, and prioritized recommendations for every page.
Analyze CLS Instantly