How to Fix Cumulative Layout Shift: A Practical Guide

# How to Fix Cumulative Layout Shift: A Practical Guide Cumulative Layout Shift (CLS) measures how much your page's visible content jumps around while it loads — the button that moves just as someone taps it, the paragraph that lurches down when a banner appears. It's one of Google's Core Web Vitals, it feeds into how Google evaluates page experience, and it's one of the few metrics that directly mirrors user frustration. The good news: CLS almost always comes from a short list of identifiable causes, and every one of them has a known fix. This guide covers how to find your shifts and how to fix cumulative layout shift issue by issue. ## What Counts as a Layout Shift? A layout shift happens when a visible element changes its starting position between two rendered frames. CLS scores each unexpected shift using two factors: the **impact fraction** (how much of the viewport was affected) and the **distance fraction** (how far elements moved). Scores start at 0, and Google considers 0.1 or lower to be "good." Two nuances matter: - Shifts that occur within 500 milliseconds of a real user interaction (like clicking a dropdown) are excluded. Movement the user *caused* is fine. - Movement that doesn't change an element's starting position — such as an animation that only changes size — doesn't count as a layout shift. So the problem is always unexpected movement: content appearing late and pushing other content out of the way. ## The Most Common Causes of CLS Before fixing anything, know what you're looking for. In audits of real sites, the same culprits show up again and again: - **Images and videos without width/height attributes** — the browser can't reserve space before the file loads - **Ads, embeds, and iframes injected into the page** without reserved space - **Late-arriving content** — cookie banners, newsletter forms, and promo bars inserted above existing content - **Web font swapping** — fallback text reflows when the real font loads - **Animations using `top`, `left`, `margin`, or `padding`** instead of `transform` - **Async components** that render into the middle of the layout after initial paint ## Step 1: Diagnose Before You Fix Guessing at CLS fixes wastes time. Find the actual shifts first: 1. Run the page through a Core Web Vitals checker such as the [free audit tool](https://seodone.ai) from seodone.ai, which reports your CLS score and the elements contributing to it. 2. In Chrome DevTools, open **Performance**, record a page load, and look at the **Layout Shifts** track. Each shift shows the offending elements. 3. For a live view, enable **DevTools → Rendering → Layout Shift Regions** and reload the page — shifting areas flash blue. 4. Compare lab data against field data (the Chrome UX Report shows what real visitors experienced). A page can pass in a lab test and still fail for users on slower connections, where late-loading resources are more likely. ## Step 2: Apply the Right Fix for Each Cause ### Fix images and videos without dimensions This is the single most common cause of CLS. Give the browser the aspect ratio up front: ```html ``` With both attributes present, modern browsers reserve the correct space before the image downloads. For responsive designs, add CSS: ```css .hero img { width: 100%; height: auto; aspect-ratio: 2 / 1; } ``` Do the same for `