What Is Cumulative Layout Shift (CLS) and How to Fix It
CLS measures visual stability — how much the page layout shifts unexpectedly after the initial render. Even fast pages can fail CLS if content jumps around as it loads. Here is what causes it and how to eliminate it.
Cumulative Layout Shift (CLS) is a Core Web Vital for visual stability. It measures unexpected movement of visible content. Think of a headline jumping when an image loads above it. Or picture a button moving as you try to click. Google rates CLS of 0.1 or less as good. A score above 0.25 is poor. These limits should hold for at least 75% of visits on mobile and desktop. See Google's official CLS guide for the full definition.
Poor CLS can interrupt reading or cause the wrong click. Start by finding what moved and why. Common causes include media without set dimensions, late content, web fonts, and layout-based motion. Many sites can improve without a new platform. Complex third-party code may need deeper work. For the full Core Web Vitals picture, see what-is-lcp and what-is-inp.
How CLS Is Calculated
CLS does not add every shift across a page's full life. Instead, it groups unexpected shifts into short session windows. A window ends after a one-second gap and lasts no more than five seconds. Your CLS is the highest window score. Each shift equals its impact fraction times its distance fraction. The first part shows how much of the viewport changed. The second shows how far unstable content moved. A shift soon after a click, tap, or keypress may count as expected input.
The Most Common CLS Causes
Images Without Width and Height Attributes
A browser cannot reserve the right space for an image with unknown dimensions. Nearby text may fill the gap, then move when the image arrives. Add width and height values that match the image ratio: <img src="/hero.jpg" width="1200" height="675" alt="">. Responsive CSS can still use width: 100% and height: auto. You can also reserve space with aspect-ratio. Check each breakpoint because a cropped image may use a different ratio.
Late-Loading Web Fonts
A fallback font may use different widths or line heights from your web font. Text can then reflow when the final font appears. Preload only critical fonts, use a close fallback, and align its metrics with size-adjust and font override settings. font-display: optional can avoid a later swap when the web font misses the first layout. That choice may keep the fallback for the visit, so test the visual tradeoff before using it.
Dynamically Injected Content
Ads, consent notices, alerts, and chat tools may arrive after the first render. They can move content that users already see. Reserve a stable slot before the script runs. Use min-height or aspect-ratio for that space. An overlay may suit some notices better than moving the page. Show a prompt placeholder for content that loads late. Content below the fold can still shift because a user may reach it first.
Embedded iframes Without Dimensions
YouTube, Loom, maps, and other embeds need reserved space too. Wrap the iframe in a stable container before its script loads. For a wide video, use aspect-ratio: 16 / 9 and width: 100%. Make the iframe fill that box. Ads and responsive widgets may use different sizes, so choose a slot based on the formats you actually serve. A guessed ratio can still cause a smaller shift.
CLS problems are almost always structural. The usual causes are missing image dimensions, late-loading fonts, or injected banners. None of them need a platform change to fix. They just need the right HTML and CSS patterns, the ones that should have been there from the start.
How to Measure and Monitor CLS
Start with field data from PageSpeed Insights or Search Console. It reflects Chrome users over time and groups similar pages. Next, use Lighthouse and Chrome DevTools to recreate the shift in a lab. Field and lab scores may differ. Real devices, content, and sessions create more variation. Core Web Vitals support page experience. Google says they are only one part of its ranking systems. Read Google's Search guidance and its CLS debugging guide.
Get a CLS and Core Web Vitals audit for your site
Book a free Brand and Growth Assessment and see exactly how Through The Glass Creatives would approach it.
Sources
- Google, "Optimize Cumulative Layout Shift" (2025)
- Web.dev, "CLS: What It Is and How to Improve It" (2025)
- Chrome Developers, "Layout Instability API and CLS Calculation" (2024)
- HTTP Archive, "Core Web Vitals by Category: CLS Failure Patterns" (2025)
Why Through The Glass Creatives
Good CLS work starts with real page data. Find the item that moved, then save space before it arrives. TTGC can review CLS within a broader site and growth check. Our team brings SEO, design, and development together. This helps us balance search needs with a stable user experience. Book a free Brand and Growth Assessment for a clear order of site priorities.
