How to Fix Cumulative Layout Shift (CLS)

You are about to tap a link, the page jumps, and you tap something else. That is layout shift. Cumulative Layout Shift (CLS) measures how much visible content unexpectedly moves around while the page loads and during its life. A good CLS score is 0.1 or less, and above 0.25 is considered poor.

Why it matters

Layout shifts are frustrating, cause misclicks, and make a site feel unprofessional. It's also one of the three Core Web Vitals. See Core Web Vitals explained.

Common causes and fixes

Images without dimensions

If the browser doesn't know an image's size, it can't reserve space, so text jumps down when the image arrives. Set width and height attributes (or an aspect ratio in CSS) on every image. See how to compress images and lazy loading.

Ads, embeds, and iframes

Third-party content often loads late and pushes the page. Reserve a fixed space for each ad slot, video, map, or social embed. See optimizing video and embeds.

Content injected above existing content

Banners, cookie notices, and "you may also like" blocks that appear at the top push everything down. Reserve space for them, or place them in overlay positions that don't move other content, or at the bottom of the viewport.

Web fonts

When a custom font replaces a fallback font, differences in size can move text. Choose a fallback font with similar proportions, load fonts efficiently, and preload the critical font file. See choosing web fonts without slowing your site.

Animations that change layout

Animating properties such as height, margin, or top forces layout changes. Animate transform and opacity instead. See animation and motion.

Late-loading components

Sliders, accordions, and widgets that build themselves after page load can jump. Give their containers a defined height until content loads.

Dynamic content from JavaScript

Content loaded after the initial render, such as reviews or product recommendations, should have a placeholder or reserved area of the right size.

How to measure CLS

Use speed-testing tools and Chrome's developer tools to see which elements shifted. Lab tests show shifts that happen during load; real-user data in Search Console captures shifts throughout the visit, including after scrolling or interacting. See how to test website speed.

Not all shifts count

Layout changes shortly after a user action, such as opening a menu they tapped, are expected and generally not counted against you. Unexpected movement is what hurts.

A quick checklist

All images and videos have width and height or aspect ratio
Ad and embed slots have reserved space
No banners are pushed in above content after load
Fonts load with a similar fallback
Animations use transform and opacity
Late widgets have placeholders

Accessibility benefits

Stable layouts help people with motor or cognitive difficulties who rely on predictable positions. See website accessibility basics.

Also see how to improve LCP and how to improve INP.

The bottom line

Reserve space for everything that loads late, and nothing will jump. Fix images, embeds, fonts, and injected banners first to bring CLS under 0.1.