Top Tips To Fix CLS Issues On Search Console

Table of contents

CLS: The Background

Cumulative Layout Shift measures unexpected layout movement. Every time a visible element shifts position while a page is loading or being interacted with, a layout shift score is calculated. The cumulative score is CLS.

Common culprits:

• Images or iframes without explicit width and height attributes
• Ads that expand after the surrounding content has already rendered
• Dynamically injected content (banners, cookie notices, chat widgets) inserted above existing content
• Web fonts that cause a flash and reflow when they load (FOUT/FOIT)
• Third-party JavaScript that appends UI elements after initial render

Related: How to fix LCP issues on Search Console

Measuring CLS

Google Search Console

Search Console’s Core Web Vitals report is the starting point. It surfaces pages flagged as “Poor” (CLS ≥ 0.25) or “Needs Improvement” (0.1–0.25), grouped by issue type. Use this report to get the list of affected URLs.

PageSpeed Insights

PageSpeed Insights (PSI) shows both lab data (Lighthouse simulation) and field data from real users via the Chrome UX Report (CrUX). The field data matters more for ranking purposes — it reflects actual user experiences, not just a synthetic test.

PSI only simulates the initial viewport on load, so it may not catch CLS triggered by scrolling or user interaction. For those cases, use Chrome DevTools.

Chrome DevTools and Web Vitals Extension

The Web Vitals Chrome extension (maintained by Google) displays live CLS scores as you scroll and interact with a page. This is the fastest way to reproduce layout shifts manually. Chrome DevTools’ Performance panel also highlights layout shift records with annotations showing which elements shifted and by how much.

Fixing CLS Issues

Add width and height to all images and iframes

This is the highest-leverage fix for most sites. Without explicit dimensions, the browser doesn’t know how much space to reserve while an image loads, so content below it gets pushed down when the image appears.

<!-- Bad: no dimensions -->
<img src="photo.jpg" alt="…">

<!-- Good: explicit dimensions let the browser reserve space -->
<img src="photo.jpg" alt="…" width="800" height="450">

Modern CSS (aspect-ratio) achieves the same effect for responsive images, but explicitly setting width and height attributes in HTML is the most reliable approach and is handled automatically by most modern frameworks and CMS image pipelines.

Reserve space for ads

Ads are the most common cause of high CLS on monetized sites. Ad networks serve dynamic sizes, and if no space is reserved the page reflows when the ad loads.

1. Reserve a fixed container (min-height matching your most common ad size) before the ad tag loads.
2. Do not collapse the container if no ad is served — an empty placeholder avoids a second reflow.
3. Be especially careful with ads placed near the top of the viewport. Non-sticky ads inserted above the fold cause the worst CLS scores.
4. Use historical impression data from your ad network to determine which ad sizes are most common for each slot, then size the container accordingly.

Avoid inserting content above existing content

Cookie consent banners, notification prompts, and chat widgets that load asynchronously and appear above existing content are a frequent CLS source. Options:

• Load them in a fixed-position overlay (they don’t affect document flow).
• Pre-allocate space in the layout if they must appear inline.
• For cookie banners specifically, consider a bottom-of-screen placement — it avoids CLS entirely and is equally compliant.

Fix web font loading (FOIT and FOUT)

FOIT (Flash of Invisible Text) occurs when a browser hides text until a custom font loads. FOUT (Flash of Unstyled Text) occurs when a fallback font is shown first, then swapped — the font metrics difference causes a layout shift.

The fix is font-display: swap combined with <link rel="preload"> for critical fonts:

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap causes FOUT (visible but unstyled text) rather than FOIT (invisible text), which is better for CLS because the text is visible immediately. To further reduce the metric impact of the swap, use the size-adjust CSS property to match fallback font metrics to the custom font — this minimizes the reflow when the custom font kicks in.

Third-party JavaScript

Third-party scripts (share buttons, comment widgets, live chat, analytics popups) load asynchronously and often inject UI elements after the page has already rendered. To minimize their CLS impact:

• Push third-party visual elements below the initial viewport when possible — content lower on the page has more time to load before the user reaches it.
• Pre-define container dimensions before the script runs, so the browser already knows how much space to reserve.
• Use Chrome DevTools’ Network tab filtered by third-party origins to identify which scripts are contributing to layout shifts.

Lazy loading and placeholders

Lazy loading defers image loading until an image is near the viewport, which saves bandwidth. But if no placeholder is set, the image container collapses to zero height and then jumps open when the image loads.

Always ensure lazy-loaded elements have explicit dimensions or aspect-ratio set via CSS, so the browser reserves the correct space even before the image loads. This applies both to native loading="lazy" and JavaScript-based lazy loaders.

CLS — 2026 FAQ

Is FID still a ranking signal in 2026?

No. Google officially retired FID (First Input Delay) as a Core Web Vital in March 2024 and replaced it with INP (Interaction to Next Paint). The current CWV trio is LCP, INP, and CLS. Update any internal documentation or tooling that still references FID.

What’s a good CLS score to target?

Google’s thresholds: below 0.1 is “good,” 0.1–0.25 is “needs improvement,” above 0.25 is “poor.” Aim for below 0.1. The score is measured at the 75th percentile of page loads in CrUX field data.

Does CLS affect rankings?

Yes, but it’s one signal among many. Core Web Vitals have been a page experience ranking factor since mid-2021. A poor CLS won’t tank a strong page, but it can be a tiebreaker and will directly hurt user engagement metrics (bounce rate, session depth) on its own merits.

My PSI score shows good CLS but Search Console flags the page as poor — which is right?

Trust Search Console (field data) over PSI lab data when they conflict. PSI lab tests only simulate the initial viewport load; it misses CLS triggered by user scrolling, font swaps on slower connections, or ads loaded after interaction. The CrUX field data in Search Console reflects real users across real conditions.

Related reading:

• How to fix LCP issues on Search Console
• How to optimize your website speed
• Technical SEO audit

The shorter version

If you’re reading this because the workflow it describes is eating your week, that’s the kind of loop I build AI agents for. Two build slots open at a time.

Updated for May 2026

Google’s 2026 story is AI Overviews everywhere: the SGE experiment from 2023 graduated to a default feature in May 2024 and now appears on an estimated ~60% of US informational queries. For SEO and ad operators:

• Organic CTR on queries with AI Overviews has dropped 15–30% on average per published studies from Ahrefs, Authoritas, and similar (2024–25 data).
• Google Ads rebranded several PMax features as AI-powered Search; the campaign management UI now defaults to AI bidding suggestions.
• Search Console added an “AI Overview impressions” filter in late 2025 — if a post here references GSC reporting, the playbook needs a refresh.
• Google’s ad revenue crossed ~$265B in 2024; Search remains ~57% of total Alphabet revenue.

The “how Google makes money” answer in 2026: still Search ads (dominant), but YouTube ads, Cloud, and Subscriptions (YouTube Premium + Google One) are all material lines now.