What Is Cumulative Layout Shift?

A layout shift occurs when a visible element changes position between rendered frames without an expected user-driven reason. The experience can be minor, such as a paragraph moving a few pixels when a font swaps, or severe, such as a button moving just before a visitor taps it. CLS is unitless; it is not measured in seconds. Each qualifying shift combines the portion of the viewport affected with the distance elements move. The metric groups rapid shifts into session windows and keeps the window with the highest total. That approach prevents very long sessions from accumulating every small movement indefinitely while still capturing disruptive bursts.

• Measures unexpected visible movement
• Uses a unitless score
• Combines affected area and movement distance
• Groups shifts into session windows
• Excludes certain recent-input shifts
• Varies by device, viewport and page state

1. Frame the decision raised by What Is Cumulative Layout Shift.
2. Render the page with its required scripts and resources.
3. Compare content, links, metadata and canonical signals.
4. Trace each difference to the responsible template or script.
5. Apply the fix and repeat both observations.

CLS is useful when its score is connected to the actual shifted elements and the component that introduced their movement.

Percentile evaluation keeps a fast majority from hiding a meaningful slow or unstable group. Device separation matters because narrower viewports, responsive ads and mobile font behavior can produce different shifts. The boundary should guide prioritization, not encourage score manipulation. A template at 0.09 can still regress when a new banner or experiment ships. A sitewide 0.08 can conceal a product template at 0.30. Segment by route, template, device and relevant state, then investigate the largest shift clusters. Monitor the distribution after changes because visual instability may occur after the initial load, during consent, personalization or long-lived application activity.

• Good: 0.1 or less
• Needs improvement: above 0.1 through 0.25
• Poor: above 0.25
• Evaluate the 75th percentile
• Separate mobile and desktop traffic
• Segment important route families

1. Frame the decision raised by What Is a Good CLS Score.
2. Render the page with its required scripts and resources.
3. Compare content, links, metadata and canonical signals.
4. Trace each difference to the responsible template or script.
5. Apply the fix and repeat both observations.

Use the CLS threshold to identify affected populations, then repair the specific shift source rather than optimizing an aggregate in isolation.

The impact fraction describes how much of the viewport is affected by unstable elements across their old and new positions. The distance fraction reflects the largest movement relative to the viewport dimension. A large element moving slightly and a small element moving far can therefore produce different scores. Shifts are grouped when they occur close together: successive shifts less than one second apart belong to the same window, capped at five seconds in duration. The window with the largest sum becomes the reported CLS. Field instrumentation should capture attribution promptly so teams can identify sources, not merely store a number.

1. Observe visible elements between rendered frames.
2. Identify elements whose positions changed.
3. Calculate the affected viewport fraction.
4. Calculate the relative movement distance.
5. Multiply the fractions for each shift.
6. Group rapid shifts into session windows.
7. Keep the window with the highest total.

• Evidence for How Is CLS Calculated: the raw html returned by the server
• The rendered DOM after required scripts run
• Content, links and metadata that differ between those states
• Network, console and hydration failures tied to the page
• A repeatable test at the exact URL and device context

CLS calculation becomes actionable when each shift event is attributed to an unstable element and the component that changed available space.

The element that moves is not always the element that caused the movement. A paragraph may shift because an image above it lacked dimensions. A product grid may move when a promotion banner is inserted at the top. Ads can collapse, expand or return creative sizes different from their slots. A web font can change line wrapping. Client-rendered account, consent or personalization components may appear after the base page. Animation of top, left, width or height can trigger layout repeatedly, while transform-based movement may avoid reflow for appropriate effects. Diagnose the initiating component and space reservation rather than patching margins on every displaced element.

• Images missing width, height or aspect ratio
• Ads and embeds without stable slots
• Banners inserted above existing content
• Font swaps changing text metrics
• Late or conflicting stylesheets
• Client components rendered after data arrives
• Animations that change layout geometry

1. Frame the decision raised by What Causes Poor CLS.
2. Render the page with its required scripts and resources.
3. Compare content, links, metadata and canonical signals.
4. Trace each difference to the responsible template or script.
5. Apply the fix and repeat both observations.

The correct CLS fix belongs to the component that failed to reserve or preserve space, not to the content displaced beneath it.

Responsive media can still reserve space. Intrinsic width and height establish an aspect ratio that CSS can scale while maintaining predictable geometry. Art-directed sources with different ratios require breakpoint-aware containers. Video posters and players should agree on dimensions. Iframes for maps, social content and forms need stable placeholders even when their final content comes from another origin. Lazy-loaded media particularly needs reserved space because its request intentionally begins later. Avoid arbitrary fixed heights that crop or create excessive blank areas; use the actual design ratio and test translated, mobile and error states.

1. Declare intrinsic width and height for images.
2. Use stable aspect-ratio containers.
3. Match responsive sources to designed ratios.
4. Reserve video and iframe player space.
5. Keep placeholders the same final geometry.
6. Test missing, slow and blocked media states.

• Evidence for How Do Images, Video and Embeds Affect CLS: the raw html returned by the server
• The rendered DOM after required scripts run
• Content, links and metadata that differ between those states
• Network, console and hydration failures tied to the page
• A repeatable test at the exact URL and device context

Media remains visually stable when the browser knows its final geometry before the resource or third-party content arrives.

Text stability begins with a deliberate fallback stack whose proportions resemble the final face. Reduce unnecessary families, weights and subsets so critical font files arrive efficiently. The font-display policy controls whether text waits, swaps or keeps a fallback, but no single value suits every brand and language. Metric overrides and size adjustment can bring fallback geometry closer to the final font when supported. Preload only the critical font file actually used in the initial view, with matching type and cross-origin behavior, because excessive font preloads compete with primary media. Test long headings, navigation, localized copy and bold variants; a short English sample can hide the worst wrapping shift.

• Choose metrically compatible fallback fonts
• Reduce unused families and weights
• Subset characters without breaking language coverage
• Set an intentional font-display policy
• Use metric adjustment where appropriate
• Preload only proven critical font files
• Test long and localized text

1. Frame the decision raised by How Do Fonts and Text Cause Layout Shifts.
2. Render the page with its required scripts and resources.
3. Compare content, links, metadata and canonical signals.
4. Trace each difference to the responsible template or script.
5. Apply the fix and repeat both observations.

Font optimization should protect readable early text while keeping fallback and final typography close enough to avoid disruptive reflow.

Begin with evidence rather than a generic checklist. Record the unstable elements and time of the largest session window. Watch a filmstrip or trace to find what loaded or changed immediately before movement. Add intrinsic dimensions to media, stabilize ad and embed slots, align placeholders with final components and adjust font delivery. Deliver critical layout styles early through the rendering path. For intentional animation, prefer transform and opacity when they match the design because they do not move surrounding layout in the same way. Retest across viewport sizes and real content, then monitor field percentiles after deployment.

1. Find the largest CLS session window.
2. Identify unstable and initiating elements.
3. Reserve accurate media and component geometry.
4. Stabilize fonts, ads and asynchronous states.
5. Deliver layout-critical styles before paint.
6. Use non-layout animation where appropriate.
7. Regression-test all affected templates.
8. Confirm field improvement after release.

• Evidence for How Do You Fix Cumulative Layout Shift: the raw html returned by the server
• The rendered DOM after required scripts run
• Content, links and metadata that differ between those states
• Network, console and hydration failures tied to the page
• A repeatable test at the exact URL and device context

The strongest CLS fix removes the initiating geometry change while preserving responsive design, accessibility and real content variation.

Use field data to locate affected devices, templates and states, then reproduce with realistic content and viewport sizes. Capture layout-shift attribution, screenshots or filmstrips, network timing and DOM mutations. Interact with consent, menus, tabs, forms and account state because shifts after load still matter. Test slow images, failed embeds, empty ad auctions, font cache states and client-rendered data. Compare lab and field results instead of expecting a single synthetic run to match a population percentile. Pair the audit with LCP so image prioritization does not create stability regressions, and inspect hydration when server and client geometry differs.

1. Segment field CLS by device and template.
2. Select representative routes and states.
3. Capture shift entries and visual timelines.
4. Find the largest session window.
5. Trace movement to its initiating component.
6. Test media, fonts, ads and client states.
7. Verify fixes across responsive breakpoints.
8. Monitor production percentiles after release.

• Evidence for How Do You Audit CLS: the raw html returned by the server
• The rendered DOM after required scripts run
• Content, links and metadata that differ between those states
• Network, console and hydration failures tied to the page
• A repeatable test at the exact URL and device context

Start with a relevant free SEO check, continue the evidence workflow in Novaverb, and review pricing when comparing continuous monitoring with a one-time manual review.

A complete CLS audit connects a real-user instability score to one shift cluster, one initiating component and one verified fix.