What causes layout shift (CLS)?

Layout shift happens when something visible moves because other content around it changed size or position. The most common causes are images and videos without set dimensions, ads and embeds that load late, banners inserted above existing content, web fonts that swap in, and animations that move elements by changing layout properties.

Why it matters

Cumulative Layout Shift is good at 0.1 or lower. A page that jumps makes visitors misclick and lose their place, and it appears in the Core Web Vitals report as a failing metric. Knowing the cause tells you which fix to apply, which is quicker than trying everything.

How to check

Record a page load in the Performance panel of Chrome DevTools and open the Layout Shifts track. Click a shift to see which elements moved.
Turn on "Layout Shift Regions" in the DevTools Rendering tab to see blue flashes where shifts occur.
Run PageSpeed Insights, which lists elements that contributed to CLS.
Throttle the network and reload, because slow loading makes shifts easier to see.

The usual causes

Images and video without dimensions. If the browser does not know the size, it lays out the page with no space and moves things once the file arrives. Add width and height attributes, or use the CSS aspect-ratio property.
Ads, embeds and iframes. A third-party widget inserted into a space with no set height pushes content down. Reserve a container with a minimum height matching the largest expected size.
Content injected above existing content. Cookie notices, promo bars and "you might like" blocks that appear after the page has rendered shove everything downward. Place them in reserved space, or overlay them at the edge of the screen.
Web fonts. A fallback font and the final font have different letter widths, so lines wrap differently after the swap. Preload key fonts and match fallback metrics.
Late-loaded CSS. Styles that arrive after the first paint can restyle elements already on screen.
Animations using layout properties. Changing top, left, height or margin moves other elements. Use transform, which does not trigger layout.
Dynamic content from scripts. Content added by JavaScript without placeholder space, such as reviews or recommendations.

Common mistakes

Fixing one image while another template still lacks dimensions.
Using a different height for a placeholder than for the final content.
Testing only the home page.
Treating a shift after a tap as the same as an unexpected one; shifts that begin shortly after input are excluded.

Frequently asked questions

Can scrolling cause layout shift?

Scrolling itself does not. But content that loads or is inserted as you scroll, without reserved space, can move other content and count.

Do pop-ups cause CLS?

An overlay that sits on top of the page without moving anything beneath does not. A banner that pushes content down does.

How do I find the element causing it?

Use the Layout Shifts track in DevTools or the CLS element listed in PageSpeed Insights, then check whether it has dimensions and reserved space.

Crawvix's scan checks whether Cumulative Layout Shift is good. To see yours, Try the free website sample.