Cumulative Layout Shift measures how much visible content jumps around while a page is in use. The classic case: you go to tap a link, an image above it finishes loading, the text drops, and you tap an ad instead. Google counts a CLS of 0.1 or less as good, measured for 75% of real visits. It is one of the three Core Web Vitals.
Find what shifts
- Field data first. In PageSpeed Insights, the top section shows CLS from real Chrome users (if your site has enough traffic). Search Console → Core Web Vitals groups affected URLs.
- Reproduce it. In Chrome DevTools open Performance, record a page load, and look at the Layout shifts track; click a shift to see which element moved. The Rendering panel's “Layout Shift Regions” option flashes shifted areas while you browse.
- Lighthouse lists the largest shifts and the elements involved under “Avoid large layout shifts”.
Shifts that happen after the page loads, such as when content is added as the visitor scrolls, count too. Lab tests that only load the page miss them; field data does not.
Common causes and fixes
Images and videos without dimensions. The browser does not know how tall an image is until it downloads it, so it reserves no space. Add width and height attributes that match the image's proportions; CSS can still make it responsive. See image width and height attributes. Of the 24 sites SignalCrawler audited in September and October 2026, 17 had images without them.
Ads, embeds and iframes. Reserve the space before they load:
.ad-slot { min-height: 250px; }
.video-embed { aspect-ratio: 16 / 9; }
If an ad slot may stay empty, keep the reserved space anyway, or collapse it only below the visible part of the page.
Web fonts. When the web font arrives and replaces the fallback font, text reflows. Use font-display: optional or swap with a fallback whose metrics match (size-adjust, ascent-override), and preload the main font file.
Banners and bars inserted at the top. Cookie banners, promotion bars and “install our app” prompts that push the page down. Overlay them at the bottom or reserve their space from the start.
Content injected above existing content. “Related products”, reviews or a login state that loads later and appears above what the visitor is reading. Load it below, or reserve its space.
Animations of layout properties. Animating top, height or margin moves surrounding content. Animate transform and opacity instead.
How to check that it worked
- Lighthouse shows no large layout shifts on the page.
- With Layout Shift Regions enabled, nothing flashes while the page loads and while you scroll.
- After about four weeks, the field CLS in PageSpeed Insights and Search Console moves to “Good”, since it is based on a 28-day window.
What SignalCrawler checks here
The audit measures layout shift while loading sampled pages in a real browser, runs Lighthouse on representative pages of each template, shows real-user Core Web Vitals from the Chrome UX Report where Google has data for your site, and reports images without width and height attributes on every crawled page.