Cumulative Layout Shift

What is cumulative layout shift (CLS)?

Cumulative layout shift, or CLS, measures unexpected movement of visible page elements while a page loads or responds. It measures visual stability: a low score means text, buttons, and form fields stay where users expect them. A menu expanding after a tap is usually expected, but a late banner pushing a checkout button down is not. CLS matters because shifts can interrupt reading, cause accidental taps, and make forms harder to complete.

How is CLS calculated?

CLS estimates how much of the screen moves and how far it moves.

1. The browser records an unexpected layout-shift event.
2. It calculates impact fraction, the share of the viewport affected by moved elements.
3. It calculates distance fraction, the largest distance an element travels relative to the viewport.
4. It multiplies the fractions to score the shift.
5. It groups nearby shifts into session windows and reports the highest score. Google’s CLS guidance defines good as 0.1 or lower, needs improvement as over 0.1 through 0.25, and poor as over 0.25.

CLS, LCP, and interaction responsiveness

These Core Web Vitals measure different parts of the user experience.

Benefits of reducing cumulative layout shift

A stable interface makes routine tasks more dependable.

• Fewer accidental taps on links, buttons, and ads.
• More reliable form entry and checkout completion.
• Clearer perceived quality while content loads.
• Better usability for people using zoom or assistive technology.

Practical limits when interpreting CLS

CLS is useful, but it is not a complete quality score.

• User-triggered movement within the allowed time window may not count.
• Lab tests can differ from field data collected on real devices.
• A low page-level score does not prove every interactive state is stable.

Common causes of layout shift

Common causes include media and iframes without reserved dimensions, late ad, embed, or cookie-banner slots, web-font swaps, client-rendered content after hydration, and animations that change layout properties. An image without an aspect ratio can push a product price and purchase button down. Reserving space prevents the shift.

How to fix cumulative layout shift

Use a repeatable investigation process rather than guessing.

1. Check field and lab reports to find affected pages.
2. Reproduce the shift on the relevant device size and connection.
3. Identify the element that moved and what triggered it.
4. Set width, height, or aspect-ratio for media and embeds.
5. Reserve space for banners, ads, and loading states.
6. Use transform-based animations instead of changing layout dimensions.
7. Test responsive breakpoints and dynamic states, then verify after deployment.

Building stable interfaces with Emergent

When building with Emergent’s AI web app builder or AI website builder, define image placeholders, responsive component boundaries, and loading states early. Reviewing these details during app design and development helps teams test dynamic screens before users encounter shifting content.