CLS (Cumulative Layout Shift)

Definition and scope

Cumulative Layout Shift measures visual instability caused by elements moving without the user expecting it. The metric sums the severity of layout shifts and reports the highest-scoring session window (a short burst of instability) during a visit. It focuses on unexpected shifts, such as images loading without reserved space or ads pushing content down after rendering. Shifts triggered by user input within a short threshold are excluded, because movement immediately following an intentional action is usually expected.

CLS applies across page types, including single-page applications (SPAs) and multi-page sites. It counts viewport-visible shifts only, so off-screen changes do not contribute until they enter view. The metric is sensitive to the timing and order of resource loading, CSS application, font availability, and script-driven DOM mutations. Because many shifts originate from images and media, reserving space and stabilising layout progressively are central to keeping CLS low.

Definition and role: Core Web Vitals (CWV) are a small set of user-centric performance metrics that quantify loading, interactivity, and visual stability. CLS is the visual stability metric in CWV; it captures unexpected layout shifts during a page’s lifetime that can cause users to lose their place or click the wrong element.

Within Core Web Vitals, CLS sits alongside Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) to provide a rounded view of page experience. Each metric captures a distinct dimension: LCP for loading, INP for interaction responsiveness, and CLS for visual stability. Google uses CWV thresholds as part of ranking systems, so instability that frustrates users can have both behavioural and organic visibility impacts. In practice, CLS is often the easiest CWV to stabilise once root causes are identified and space is reserved for dynamic elements.

The target thresholds for CLS are: good at 0.1 or less, needs improvement between 0.1 and 0.25, and poor above 0.25. These thresholds are evaluated at the 75th percentile of page loads, segmented by device type in field data. Sites with significant ad density, complex embeds, or late-resolving media often sit above 0.1 until layout is engineered to be deterministic. Addressing these issues compounds benefits with lower bounce rates and improved conversion reliability.

What the score represents

CLS aggregates the severity of individual layout shifts using a per-frame formula: layout shift score equals impact fraction multiplied by distance fraction. The impact fraction is the portion of the viewport affected by elements that moved. The distance fraction is the greatest movement of any affected element, expressed as a fraction of the viewport. For example, if 25% of the viewport’s area shifts and the maximum element displacement is 10% of the viewport height or width, the shift score is 0.025 (0.25 × 0.10).

To reduce sensitivity to long-lived sessions, CLS is reported as the maximum session window: the sum of shift scores within a cluster of instability up to five seconds long, separated by at least a one-second gap with no shifts. This emphasises the worst burst users encounter, which correlates with frustration and mis-taps. Tools may differ in how they simulate or observe shifts, but the underlying definition is consistent across modern browsers and analytics libraries that follow the Web Vitals specification.

Key image-related causes of Cumulative Layout Shift (CLS)

Images frequently drive CLS when their dimensions are unknown at layout time or when the browser cannot infer a stable aspect ratio. Without reserved space, an image loads and pushes text or buttons down. Responsive layouts can also shift when the intrinsic size differs from the expected size in CSS, or when the sizes attribute for srcset does not reflect the final rendered width. Galleries, carousels, and masonry grids are common hotspots if items compute their height from the image after download.

Other media-induced shifts include videos without a specified aspect ratio, late-loading captions, and placeholder patterns that do not match the final media dimensions. Ad images and third-party embeds that swap in late or resize after initial render are particularly disruptive. Font icons replacing SVG fallbacks, as well as content revealed beneath a sticky image header, can contribute to instability if they alter document flow rather than overlaying. Each of these issues is addressable by reserving space and aligning placeholders with the final rendered geometry.

• Unsized images or videos (missing width/height or aspect-ratio).
• Incorrect sizes with srcset, causing late reflow when a different candidate loads.
• Carousels and grids measuring image height after load instead of reserving space.
• Ad and embed slots that inject late or resize without a fixed container.
• Mismatched skeletons/blur-up placeholders that do not match final aspect ratio.

Scope of the metric

CLS only counts unexpected layout shifts. Movements that occur within a brief interval (approximately 500 ms) after a user input event are excluded because they are likely intentional outcomes. The calculation considers only the viewport: off-screen content that reflows does not contribute until it affects what the user sees. Fixed-position overlays that do not change document flow (for example, a modal appearing with position: fixed) typically do not add to CLS, whereas banners inserted above content often do because they push the page down.

On SPAs, CLS can accumulate across route changes if the page never reloads. The metric’s session-windowing limits long-tail accumulation by reporting the worst burst, but unstable navigations and transitions can still dominate the score. Environment differences also matter: systems with classic scrollbars that consume layout space can shift content when scrollbars appear; overlays do not. Cross-browser CSS differences, font rendering behaviour, and dynamic content from third parties further influence the scope. Consistency in layout logic across devices reduces variance in field data.

Mitigation patterns

The central strategy for preventing CLS is to reserve space precisely where dynamic content will appear. For images and videos, supply intrinsic dimensions so the browser can compute the aspect ratio before the resource is fetched. In HTML, width and height attributes establish an aspect ratio that works with responsive CSS; the CSS aspect-ratio property is a robust alternative for containers. On responsive pages, align srcset with a correct sizes attribute so the chosen image matches the layout’s computed width without late swaps that reflow text.

• Provide width and height on img and video, or use CSS aspect-ratio on containers.
• Use accurate sizes with srcset so the browser picks the correct candidate initially.
• Reserve slots for ads/embeds with fixed or min-height containers and avoid inserting them above reading content late in the lifecycle.
• Use skeletons or blur-up placeholders that match final aspect ratio and dimensions, not arbitrary spacer heights.
• Animate transform and opacity rather than top/left/height/width to avoid layout thrash.

Implementation notes

In lab tooling such as Lighthouse, CLS is measured during a simulated page load and interaction-free run, so some shifts that occur only with user behaviour are not observed. Field data from the Chrome User Experience Report (CrUX) and real user monitoring (RUM) libraries capture CLS across real sessions, device conditions, and content variations. Differences between lab and field usually reflect content timing (ads, consent banners), route patterns in SPAs, and user-triggered states. Analysing both provides a fuller picture of stability and prioritises fixes that benefit actual users.

Developers can observe layout shifts using the PerformanceObserver API for the layout-shift entry type. Each entry exposes a value and a hadRecentInput flag; only entries without recent input count towards CLS. Analytics libraries group entries into session windows and report the maximum window score. Chrome DevTools highlights layout shifts on the page and in performance recordings, showing regions affected. For SPAs, route-level CLS tracking helps attribute instability to specific transitions. Testing across breakpoints is essential, as incorrect sizes logic often only manifests at particular viewport widths.

Comparisons

CLS vs LCP

Largest Contentful Paint measures how quickly the main content becomes visible, while CLS measures whether that content remains visually stable. A page can have a fast LCP but poor CLS if elements move around after rendering. Conversely, a slower LCP with stable layout may feel predictable and usable. Addressing both offers the best experience: reserve space for the LCP element to avoid shifts while optimising its delivery for speed.

CLS vs INP (and the retired FID)

Interaction to Next Paint (INP) captures responsiveness across many interactions, replacing First Input Delay (FID) in Core Web Vitals. INP is about latency between input and UI update, whereas CLS is about unwanted movement. The two issues can coincide when scripts update the DOM late and trigger layout changes, but they solve different problems: INP with efficient input handling, CLS with stable layout and reserved space. Improvements in one do not guarantee improvements in the other.

CLS vs animation “jank”

Well-implemented animations that use transform and opacity typically do not contribute to CLS because they do not change layout geometry. Animating layout properties like height or top reflows the page and can cause shifts. For progressive reveals, prefer transitions that overlay rather than push content, or reserve space in advance if the reveal affects document flow. Throttled or choppy animations feel janky, but that is a smoothness issue rather than a CLS issue unless geometry changes occur.

FAQs

What is a good CLS score and how is it evaluated for SEO?

A good CLS is 0.1 or less at the 75th percentile of page loads, measured separately for mobile and desktop in field data. Scores between 0.1 and 0.25 need improvement, and above 0.25 are poor. Google treats Core Web Vitals as part of page experience signals, which can influence ranking alongside relevance and other factors. Stabilising layout contributes to better UX, engagement, and conversion, which often yields indirect SEO benefits as well.

Do images below the fold affect CLS?

Shifts only count when they affect the viewport. An image below the fold does not contribute until it comes into view or causes upstream content to move. However, inserting new content above the viewport (such as an ad slot or a sticky banner) can push visible content and increase CLS even if the image itself is off-screen. Reserving space for below-the-fold images and pagination content prevents cascades that reach the viewport as users scroll.

Does lazy-loading increase CLS for images and video?

Lazy-loading itself does not cause CLS; missing space reservation does. If a lazy-loaded element has no defined dimensions, it will expand when the media arrives and push content. Pair lazy-loading with explicit width and height (or aspect-ratio) and a placeholder that matches the final size. Avoid lazy-loading critical above-the-fold media such as the LCP image, as that can delay rendering and complicate stability if the page rearranges around the late content.

Do web fonts contribute to CLS and how can that be mitigated?

Fonts can trigger CLS when fallback text is replaced by a late-loading web font with different metrics, changing line breaks or element heights. Use font-display with a strategy such as swap or optional, and consider size-adjust and metric-override descriptors so fallback and final fonts align closely. Preloading critical fonts can reduce late swaps. For image captions and headings that interact tightly with images, consistent font metrics help keep the surrounding layout stable.

Why do CLS results differ between Lighthouse and real users (CrUX/RUM)?

Lab runs occur in controlled scenarios without user input and without certain third-party content or consent flows, so some field-only shifts do not appear. Conversely, lab tests may reveal deterministic shifts you can fix without variability. Real-world sessions vary by device, connection, ad auctions, geolocation, and user actions, which all influence CLS. Use lab tools for debugging and rapid iteration, and rely on field data to validate improvements at the 75th percentile of your audience.