High CLS: how to find and fix unexpected layout shifts

Executive brief

Key takeaways

• The element that moves may differ from the element that caused the movement.
• Set dimensions or aspect ratio for images, video and iframes.
• Reserve space for banners and asynchronous content.
• Test long sessions and interactions, not only initial loading.

Cumulative Layout Shift measures unexpected changes in position throughout a visit. The problem is not simply a page that moves; it is content moving without warning while someone reads, points, clicks or completes a task.

The recommended threshold is 0.1 at the 75th percentile. Because shifts can happen after loading, a short test may miss late consent banners, refreshed ads, fonts, recommendations or components opened during the journey.

Distinguish the victim from the cause

Tools often highlight the element that moved. It may only be the victim. If a banner is inserted above a heading, the heading, text and button shift, but the banner caused the event.

For each shift, record the moved element, the inserted or resized element, timing, nearby user action, affected area, score, template and device. Chrome Performance and layout-shift visualization help reproduce the sequence.

Define dimensions for media

When the browser knows width and height, it can reserve the correct aspect ratio before downloading:

<img
  src="/product.webp"
  width="800"
  height="600"
  alt="Product viewed from the front"
>

Responsive CSS still works:

img {
  max-width: 100%;
  height: auto;
}

Apply the same principle to video, iframes, maps and embeds. Use aspect-ratio when appropriate. Do not reserve an arbitrary oversized rectangle merely to reduce the metric; excessive empty space is also poor experience.

Reserve space for asynchronous content

Consent banners, shipping messages, reviews, recommendations, ads and alerts can arrive after main content.

Reserve realistic minimum height, use an overlay when it does not cover important controls, insert below content already being read, use a skeleton with final dimensions or replace content within a stable container.

A skeleton that changes height when data arrives simply trades one shift for another. Model the final state.

Do not insert promotions above content

A promotional bar injected at the top after loading shifts the whole page. If the campaign is necessary, render its space in the initial response or use a position that does not reorder visible content.

The same applies to app notices, shipping bars, location requests, satisfaction surveys, login messages and price updates. Evaluate commercial value together with instability cost. Repositioning may be better than removal.

Stabilize fonts

Web fonts can change text width, height and line breaks when they replace the fallback. A heading grows, a button moves and the rest of the page follows.

Use fallback families with similar metrics, load only required weights, subset where appropriate, cache fonts, prioritize truly critical fonts and consider metric overrides such as size-adjust when needed. Test different languages, bold text and long content.

font-display affects when swapping occurs but does not eliminate metric differences by itself.

Avoid measuring layout during changes

Layout thrashing alternates DOM reads and writes, producing recalculation and intermediate states. Group reads, then writes. Prefer classes and CSS that create final geometry in one step.

Components that measure height after mounting may flash between states. When possible, derive dimensions from CSS or provide enough data during server rendering.

Animations and expected interactions

Changes directly associated with recent input can be treated differently by the metric. That does not justify interfaces that make people lose context.

An accordion may expand after a click, but it should keep focus predictable, preserve reading context, respect prefers-reduced-motion and avoid blocking interaction.

For visual movement without layout recalculation, transform and opacity are often appropriate. Test accessibility and composition.

Investigate ads and embeds

Ad slots can vary in size and refresh during a session. Define accepted sizes, reserve the largest reasonable space for each breakpoint and avoid immediately collapsing an empty slot.

Social embeds and video also arrive with their own dimensions. Use a stable wrapper and validate error states. If a vendor resizes content after loading, consider isolation or click-to-load.

Capture shifts after loading

Test a journey:

1. load the page;
2. wait for consent and third parties;
3. scroll slowly;
4. open menus, filters and accordions;
5. change orientation or width;
6. simulate long content;
7. wait for asynchronous updates;
8. navigate as a returning user.

First-party field attribution helps locate URLs and components that produce late shifts while preserving user privacy.

Avoid cosmetic fixes

Hiding overflow may conceal movement without fixing its cause. Huge fixed heights can crop content or create empty areas. Disabling a module only in tests does not improve real users.

The fix must preserve content, responsiveness and accessibility.

Observation: after 1.5 seconds, a shipping bar is inserted above the product title and shifts the whole first viewport. Action: render its container and default message in HTML, then update text within the same height when the postal code is available. Acceptance: there is no loading shift, content remains correct and screen readers receive the update without losing focus.

CLS is a predictability metric. Improving it means keeping the interface coherent as data, media and components arrive — without making users chase content across the screen.

Direct answers

Frequently asked questions

What is a good CLS?

The current recommendation is CLS of 0.1 or less at the 75th percentile, separated between mobile and desktop.

Does every animation increase CLS?

No. Transform-based movement and expected changes after interaction may be treated differently. Animations still need to preserve readability, focus and reduced-motion preferences.

Do width and height make images non-responsive?

No. The attributes define intrinsic aspect ratio. CSS can keep the image responsive with maximum width and automatic height.