Cumulative Layout Shift (CLS) Explained

Cumulative Layout Shift (CLS) is a web performance metric that measures visual instability. It describes how much visible page content unexpectedly moves while a page is loading or during user interaction. A page can appear fast but still feel frustrating if buttons, text, images or other elements suddenly jump to different positions.

CLS is one of the Core Web Vitals and focuses on the stability of a page rather than how quickly it initially renders or responds to input. A low CLS score means that the layout remains predictable as content appears. A high score indicates that users are likely to experience unexpected movement.

What Is Cumulative Layout Shift?

A layout shift occurs when a visible element changes its position from one rendered frame to another without the user intentionally causing that movement. For example, a paragraph may initially appear near the top of the page and then move downward when an image above it finishes loading without having reserved any space.

The important part is that CLS measures unexpected movement. A user clicking a button that intentionally opens a menu is not normally considered the same type of layout instability. The metric is designed to identify situations where the browser changes the visual arrangement without a clear user action causing the change.

Why CLS Matters

Unexpected layout movement creates a poor user experience because users build a visual expectation about where content and controls are located. When that expectation is broken, users may click the wrong element, lose their reading position or have difficulty interacting with the page.

• Text can move while a user is reading.
• Buttons can shift just before a user clicks them.
• Images can push other content downward.
• Advertisements can unexpectedly change the page height.
• Fonts can change the size and position of text.
• Dynamic components can move surrounding content.

Good visual stability is especially important on mobile devices because smaller screens make even relatively small layout movements more noticeable. A page that constantly changes position can feel unreliable even when its network and JavaScript performance are otherwise good.

How CLS Is Calculated

CLS is based on layout shift scores recorded during a page session. Each qualifying layout shift is assigned a score based on the amount of the viewport affected and the distance that affected elements move.

Layout Shift Score =
Impact Fraction × Distance Fraction

The impact fraction represents how much of the viewport is affected by the movement. The distance fraction represents the greatest distance moved by the affected elements relative to the viewport. A larger affected area or a larger movement generally produces a larger shift score.

Modern CLS reporting also groups layout shifts into session windows so that a page with many small shifts spread over a long period is not treated exactly like a page where many shifts occur in a short burst. The reported CLS value reflects the largest relevant session window rather than simply adding every shift that happens throughout the entire lifetime of the page.

CLS Score Ranges

The goal is to keep CLS at or below 0.1 for a good user experience. A score above 0.1 indicates that the page has room for improvement, while a score above 0.25 represents significant visual instability.

Common Causes of Layout Shifts

Most CLS problems come from content being displayed without reserving its final space in advance. The browser initially lays out the page using the information it has available. When additional information arrives later and changes an element's dimensions, surrounding content may have to move.

Images Without Defined Dimensions

Images are one of the most common sources of layout shifts. If an image is rendered without known dimensions, the browser may initially allocate little or no vertical space for it. When the image loads, its actual dimensions can push content below it downward.

<img
  src="/images/article.jpg"
  width="1200"
  height="800"
  alt="Article illustration"
/>

Providing width and height allows the browser to calculate the image's aspect ratio before the resource finishes loading. Modern responsive layouts can also use CSS aspect-ratio or framework-specific image components that reserve the required space.

Using CSS aspect-ratio

The CSS aspect-ratio property is useful when an element needs to maintain a predictable shape before its content is fully available. It is particularly helpful for responsive images, video containers and cards.

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

.imageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Images Loaded Dynamically

Images inserted into the page dynamically can also cause shifts if their dimensions are unknown. This can happen with image galleries, product listings, user-generated content and components that fetch content after the initial render.

The solution is the same principle: determine the expected dimensions before inserting the element into the layout. Reserve the space first, then replace the placeholder with the actual content.

Web Fonts and Text Reflow

Web fonts can cause layout changes when the fallback font and the final font have different metrics. Text may occupy a different width or height after the custom font loads, causing headings, paragraphs and surrounding elements to move.

Font loading behavior should therefore be considered as part of visual stability. Choosing compatible fallback fonts, using appropriate font-display behavior and reducing unnecessary font variants can help minimize unexpected text reflow.

Ads and Embedded Content

Advertising is another frequent source of layout instability. If an advertisement container has no reserved height, the page may initially render without the ad and then expand when the advertising system returns content.

The safer approach is to reserve a predictable amount of space for the advertising slot. The content can then load inside the reserved area without moving the surrounding page structure.

Dynamically Inserted Content

Client-side applications frequently insert content after the initial page render. Notifications, recommendation panels, related products, comments, banners and API responses can all change the dimensions of the page.

Dynamic content is not automatically a CLS problem. The main issue is whether it causes existing visible content to move unexpectedly. A component can be loaded dynamically without causing instability if its position and dimensions are properly reserved.

Cookie Banners and Consent Interfaces

Cookie banners and consent interfaces can affect layout stability when they are inserted into normal document flow. A banner appearing at the top of the page can push the entire page downward, creating a noticeable shift.

When appropriate for the design and accessibility requirements, fixed or overlay-based interfaces can avoid moving the existing document content. However, overlays should still be designed carefully so that they do not obscure important controls or prevent users from accessing the page.

Animations and Transitions

Not every animation creates a layout shift. Animations that change layout properties such as width, height, margin or position can cause surrounding content to be recalculated. Animations based on transform are generally better suited to visual movement because they can move an element without forcing the same kind of layout changes.

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

For interactive effects, prefer transforms when they provide the required visual result. This can improve both visual stability and rendering efficiency, although the specific implementation should always be tested in the actual interface.

Late-Loading UI Components

Components loaded after JavaScript execution can introduce layout shifts when their final size differs substantially from their initial placeholder. This is common with dashboards, charts, maps, comments, recommendation widgets and personalized interfaces.

Skeleton loaders and reserved containers can help maintain the expected geometry while the component is loading. The placeholder should approximate the final dimensions rather than simply displaying a small loading indicator that later expands into a large component.

How to Prevent CLS

Preventing CLS is primarily a matter of making layout dimensions predictable before content changes occur. The browser should have enough information to establish the page structure before delayed resources or dynamic content arrive.

• Set explicit dimensions for images and videos.
• Reserve space for advertisements and embedded content.
• Use aspect-ratio for responsive media containers.
• Avoid inserting content above existing content unexpectedly.
• Use appropriately sized placeholders for dynamic components.
• Optimize web font loading and fallback font selection.
• Prefer transform-based animations for visual movement.
• Avoid changing layout dimensions unnecessarily after rendering.

Reserve Space for Media

Every media element should have predictable geometry whenever possible. Images, videos, iframes and other embedded resources should not force the browser to discover their dimensions only after they load.

Avoid Injecting Content Above Existing Content

A particularly disruptive pattern is inserting new content above content that the user is already viewing. For example, adding a banner above an article after the page has rendered can move every visible paragraph downward.

If content must appear dynamically, consider reserving its area from the beginning or placing it in a location where it does not unexpectedly displace existing content.

Responsive Design and CLS

Responsive layouts can introduce additional sources of instability when elements switch between significantly different structures. Navigation menus, grids, images and typography should have predictable behavior at each breakpoint.

A responsive layout does not need to have identical dimensions across devices. It needs to remain stable once the browser has determined the appropriate layout for the current viewport.

CSS Grid and Flexbox

CSS Grid and Flexbox can help create stable responsive layouts, but the layout rules still need to account for content dimensions. Unexpected wrapping, changing gaps or dynamically sized children can alter the geometry of surrounding elements.

When building responsive components, test realistic content rather than relying only on short placeholder text. Long titles, translated text and variable user-generated content can expose layout instability that is not visible with sample content.

How to Measure CLS

CLS can be measured using both laboratory testing and real-user performance data. Laboratory tools are useful during development because they provide a controlled environment for identifying problematic resources and rendering behavior. Field data shows how the page performs across real devices, browsers and network conditions.

Using Browser DevTools

Browser developer tools can help identify when layout shifts occur. Performance recordings can show rendering activity, resource loading and visual changes over time. Inspecting the timeline around a shift can reveal which resource or component caused the layout to change.

When investigating CLS, do not only look at the element that moved. Find the event that caused its position to change. The actual cause may be an image, font, advertisement, script or asynchronously loaded component elsewhere in the document.

CLS in Real Users vs Development

A page can have a low CLS score in local development and a significantly higher score in production. Development environments often have fast local resources, different content and fewer third-party services. Production pages may include advertising, analytics, personalization, remote fonts and slower network conditions.

For this reason, performance optimization should include real-world testing whenever possible. Field measurements are especially valuable because they reveal problems that controlled laboratory tests may not reproduce.

CLS and Single Page Applications

Single Page Applications can experience layout shifts when client-side rendering replaces placeholders with application content. Routing, asynchronous data fetching and hydration can all affect the initial visual structure if the server-rendered and client-rendered layouts do not match closely.

Stable loading states are important in React and other client-side applications. A component should ideally reserve approximately the same space during loading as it occupies after its data becomes available.

CLS and Server-Side Rendering

Server-side rendering can reduce certain layout problems because more of the initial document structure is available before the browser executes client-side JavaScript. However, server rendering does not automatically guarantee a good CLS score.

Images, fonts, advertisements, dynamic widgets and client-side updates can still cause layout shifts after the server-rendered HTML has appeared. The complete rendering process must therefore be considered when optimizing visual stability.

Common CLS Mistakes

CLS problems are often caused by small implementation decisions that are repeated throughout a site. Fixing one large source of instability can make a major difference, but smaller shifts can also accumulate and should be investigated.

• Loading images without dimensions.
• Allowing advertisements to determine their own height after loading.
• Injecting banners above already rendered content.
• Using placeholders that are much smaller than the final component.
• Ignoring font metric differences.
• Animating layout properties unnecessarily.
• Replacing server-rendered content with differently sized client content.
• Testing only on fast development environments.

Best Practices for Improving CLS

• Define image and video dimensions before resources load.
• Use CSS aspect-ratio for responsive media.
• Reserve predictable space for advertisements and embeds.
• Keep loading placeholders close to the final component size.
• Avoid unexpected insertion of content above the current viewport.
• Use stable responsive layouts.
• Choose compatible fallback fonts.
• Prefer transforms for animations and interactive movement.
• Measure performance on realistic devices and network conditions.
• Use field data to verify improvements in real user sessions.

CLS Optimization Checklist

Frequently Asked Questions

Helpful Performance Tools

An Image Aspect Ratio Calculator helps determine stable proportions for responsive images, a Responsive Image Size Calculator assists with planning image dimensions across screen sizes, a CSS Grid Generator helps create predictable responsive grid layouts, a CSS Flexbox Generator simplifies stable flexible layouts, and a Typography Scale Generator helps establish consistent text sizing and spacing across a design system.

Conclusion

Cumulative Layout Shift is an important measure of visual stability. A page may load quickly and respond to interactions efficiently, but unexpected movement can still make the experience frustrating and difficult to use. CLS helps identify these problems by measuring how much visible content shifts unexpectedly during a page session.

The most effective CLS improvements usually come from making layout dimensions predictable before content arrives. Define image and video dimensions, reserve space for advertisements and dynamic components, use stable responsive layouts, optimize web fonts and avoid inserting content that unexpectedly displaces existing elements.

A low CLS score is not achieved through one optimization technique. It is the result of a stable rendering strategy across HTML, CSS, JavaScript, images, fonts and third-party content. By measuring real user experiences and investigating the causes of individual layout shifts, developers can build interfaces that remain visually predictable from the first render through ongoing interaction.