How to Fix Cumulative Layout Shift (CLS)

Of all the Core Web Vitals, Cumulative Layout Shift (CLS) is perhaps the most frustrating for a user. It's that jarring experience of trying to click a link, only to have an ad or image suddenly load, pushing your target down the page and causing you to click the wrong thing.

This isn't just an annoyance; it's a breach of user trust. Google quantifies this frustration as CLS, and a poor score (anything above 0.25) is a direct signal that your site provides a poor, unpredictable experience.

As we covered in our Ultimate Guide to Core Web Vitals, fixing CLS is often the "lowest-hanging fruit" and can provide a significant boost to your page experience scores. This guide provides a definitive, step-by-step diagnostic workflow and the precise, copy-paste solutions to fix the most common causes of layout shift.

Chapter 1: How to Precisely Diagnose CLS (The SOP)

You can't fix a "feeling." You must use the right tools to identify the exact elements causing the shift.

Step 1: Find "What" to Fix (Field Data)

Start with your Google Search Console "Core Web Vitals" report. This shows you which URL groups (e.g., /products/ or /blog/) are failing CLS based on real-world user (CrUX) data. This is your priority list.

Step 2: Find "Why" it's Failing (Lab Data)

Take a problem URL from GSC and run it through PageSpeed Insights. Scroll down to the "Diagnostics" section and find the audit named "Avoid large layout shifts." This will often pinpoint the specific DOM elements (e.g., an or a

) that are responsible for the largest shifts.

Step 3: See it in Real-Time (Live Debugging)

This is the pro-level technique for catching shifts that lab tools miss.

Open your page in Google Chrome.
Open Chrome DevTools (F12).
Click the three-dot menu, go to More tools > Rendering.
Check the box for "Layout Shift Regions."
Now, as you reload and interact with your page, any element that shifts will be instantly highlighted with a blue box. This allows you to see the problem as it happens.

Chapter 2: The 3 Common Culprits of CLS (And How to Fix Them)

A high CLS score is almost always caused by one of these three issues. Here are the definitive, modern fixes.

1. The Culprit: Images Without Dimensions

The Problem: The browser starts rendering the text, but it doesn't know how much space to save for an image. When the image file finally downloads, it "pops" into place, pushing all the text down.
The Fix (Modern CSS aspect-ratio): While adding width and height attributes to your tag is the classic fix, the superior, responsive-friendly solution is to use the CSS aspect-ratio property. This tells the browser to maintain a specific shape (e.g., 16:9) while the image loads.

Code Solution:

CSS/* Add this to your stylesheet */ img.your-blog-image { width: 100%; /* Makes the image responsive */ height: auto; /* Lets the browser calculate height */ aspect-ratio: 16 / 9; /* Or 4/3, 1/1, etc. */ }This approach reserves the correct amount of space before the image loads, completely eliminating the layout shift.

2. The Culprit: Dynamically Injected Content (Ads, Banners)

The Problem: A third-party ad script, a "Sign up for our newsletter" banner, or a cookie consent form loads late and injects itself at the top of the page, pushing everything else down.
The Fix: Reserve the Space. You must allocate a "slot" for this content in your HTML/CSS before the script loads.
Code Solution: Wrap your dynamic content in a container div and give that container a specific min-height.

HTML

This min-height forces the browser to save 250px of vertical space. When the ad finally loads, it fills the empty container instead of pushing your main content down. CLS is eliminated.

3. The Culprit: Web Fonts (FOIT/FOUT)

The Problem: The browser first renders your text with a fallback system font (e.g., Arial). When your custom web font (e.g., Roboto) finally downloads, it "swaps" with the system font. If the two fonts are different sizes, this swap causes the entire block of text to reflow, creating a layout shift.
The Fix: Preload Key Fonts & Use font-display: swap
1. font-display: swap: This is the most common fix. It tells the browser to show the fallback font immediately, then "swap" in the web font when ready. It's good, but it can still cause the shift.
2. Preload (The Better Fix): A more robust solution is to preload your most important font files (like your main body text and headline fonts). This tells the browser to treat the font as a critical, high-priority resource, loading it much earlier in the process.

Code Solution (add to your site's ):HTMLBy preloading, you ensure the web font is available much sooner, often before the text is even rendered, which can prevent the "swap" and the resulting layout shift entirely.

Expert Insight from seopage.ai (A PSEO Case Study): *"We analyzed a large-scale PSEO site whose blog template had a CLS score of 0.31. Our DevTools diagnosis (using "Layout Shift Regions") pinpointed the problem: a 'Related Articles' widget at the end of each post was loading via JavaScript.
The Problem: The container div had no height, so when the 3 related articles loaded, the page footer would suddenly "jump" down by ~400px.
The Fix: We didn't touch the JavaScript. We simply applied a min-height: 400px to the container div in the site's CSS.
The Result: The CLS score for that entire URL group dropped to 0.01 within a week. This is a classic PSEO-related issue where templated, dynamic content is the culprit, and the fix is often a single line of CSS to reserve the space."*

Conclusion: Building Trust Through Stability

Fixing CLS is about more than just a performance metric; it's about building a stable, predictable, and trustworthy experience for your users. By using a precise diagnostic workflow and implementing these modern CSS solutions, you can eliminate layout shifts and send a strong, positive signal to Google that your site is a high-quality destination.This is a critical step in mastering your Core Web Vitalsand complements other performance work, like optimizing your LCPand INP.