How to Fix CLS Caused by Ads (Without Killing Your Ad Revenue)
A visitor is three paragraphs into your article. An ad finishes its auction, renders, and shoves everything down 250 pixels. They tap where a link used to be, hit the ad instead, and now they're on an advertiser's landing page wondering what happened.
That's the experience behind a failing CLS score — and on ad-supported sites, ads cause almost all of it. The mechanism is always the same: the ad script injects or expands an element that had no space reserved for it, and the content around it pays the price.
The fix is not removing ads. Publishers with heavy ad loads pass CLS all the time. The fix is making every ad slot occupy its final space before the ad arrives. Here's how to do that on AdSense, Google Ad Manager, and managed networks — with the trade-offs stated honestly, because there are some.
TL;DR
- CLS fails when ads render into space that wasn't reserved. Reserve the space with
min-heighton a wrapper div and the shift disappears. - Size the reservation from your actual ad reporting: the most common creative size served in each slot, not the biggest possible one.
- Never inject ads above content near the top of the viewport, and never let refreshed ads change size in place.
- Style empty slot space (label + background) so unfilled reservations look deliberate, not broken.
- Your lab CLS can read 0.00 while field CLS fails — lab tests only watch page load, but real users scroll into your lazy-loaded ads. Trust field data.
Why Ads Are the Perfect CLS Machine
CLS scores every unexpected layout shift as impact fraction × distance fraction — how much of the viewport moved, times how far it moved — accumulated over the worst burst of shifts in the page's lifetime. You need under 0.1 (at the 75th percentile of real visits) to pass.
Ads trigger this more than anything else because of how they load: the container renders at 0 px height, the ad script runs async, an auction happens, and one to several seconds later a creative of initially unknown size expands the container. Every element below it moves. Multiply by three or four slots per page and a mid-article shift of 0.15+ is routine.
One measurement trap before you fix anything: lab tools will tell you the problem doesn't exist. Lighthouse only observes the first seconds of load, often with ads unfilled — so lab CLS reads 0.00 while real users, who scroll into lazy-loaded slots mid-session, accumulate the shifts that CrUX records. If your PageSpeed score and your assessment disagree here, that's the lab-versus-field gap. Diagnose ad CLS with field data or by watching the page yourself with DevTools' Layout Shift regions enabled.
The Core Fix: Reserve the Space
Wrap every ad slot in a container that already has its final height:
.ad-slot-wrapper {
min-height: 280px; /* the tallest creative this slot commonly serves */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f6f6f6; /* makes unfilled space look intentional */
}
.ad-slot-wrapper::before {
content: "Advertisement";
position: absolute;
font-size: 11px;
color: #999;
text-transform: uppercase;
}Three decisions make or break this:
Use min-height, not height. If a larger creative wins the auction, height clips it (and can violate network policy); min-height lets it expand. You may still take a small shift on oversized creatives, but you've eliminated the 0-to-280px catastrophe, which is what fails the metric.
Size from data, not fear. Pull each slot's serving history from your ad reporting and reserve for the most frequently served size — usually 300×250 in-content on mobile, 728×90 or 970×250 on desktop leaderboards. Reserving for the tallest possible creative wastes viewport and depresses viewability; reserving for the typical one captures nearly all the CLS benefit.
Make empty space look deliberate. Slots don't always fill. A grey background and an "Advertisement" label turn an unfilled reservation from "the page looks broken" into furniture nobody notices. This also removes the temptation to collapse empty slots — collapsing is itself a layout shift.
Per-Setup Instructions
AdSense
Responsive AdSense units are the classic 0 px → 280 px offender, and there's a known quirk: AdSense's script can strip min-height from parent elements when applied loosely — target the wrapper with an ID (#ad-wrapper-1 { min-height: 280px; }) and it holds. Alternatively, constrain the unit itself with an explicit style (display:inline-block; width:100%; height:280px) to cap what can serve there.
Auto ads deserve a separate warning. Auto ads insert themselves wherever Google's model predicts revenue — by definition into unreserved space, which makes them structurally hostile to CLS. If you run them, exclude in-page formats on templates where CLS is failing, or switch those templates to fixed, manually placed units. This is the single highest-impact AdSense change we make on failing publisher sites.
Google Ad Manager (GPT)
GAM gives you the control AdSense hides. Prefer fixed-size slots over fluid wherever the demand allows. Where you use multi-size slots, reserve for the most common size and accept the rare oversize shift. Keep fluid slots below the fold only, and request them as early as possible so they're resolved before the user scrolls to them. Use collapseEmptyDivs() with care: collapsing after a slot fails to fill is a shift; if you must collapse, do it before display via the initial page render, not retroactively.
Two placement rules that outrank any code fix:
- Never inject an ad above existing content near the top of the page. Late-loading anchor/leaderboard units that push the whole page down are the largest single shifts we see in the wild. Top-of-page units must have hard reservations, or be overlays (bottom anchors) that don't displace content at all.
- Refreshing slots must swap same-size in place. If your refresh setup allows a 250px creative to be replaced by a 600px one mid-session, every refresh is a dice roll against your CLS budget. Lock refresh to same-size creatives.
Managed networks (Raptive, Mediavine, Ezoic)
Your network controls the ad code, so the fix is configuration, not CSS. Raptive and Mediavine both ship CLS/space-reservation optimisation settings — turn them on and confirm in field data that they're working on your templates. Ezoic's placeholder system does the same job if placeholders are actually defined for every location. If a managed partner won't reserve space properly on your highest-traffic template, escalate with the CrUX numbers; retention teams respond to churn risk backed by data.
The Revenue Objection
Someone will argue that reserved space costs revenue — unfilled reservations "waste" viewport that a dynamic layout could monetise. The evidence points the other way. Layout shift depresses the metrics advertisers pay for: accidental clicks poison conversion data, and content that jumps hurts session depth and viewability. Google's own publisher guidance pushes reserved space precisely because stable layouts sustain long-term monetisation. A passing CLS score and a healthy ad stack aren't in tension; sloppy ad implementation and both are.
Verifying the Fix
Real users see the improvement instantly; your Core Web Vitals report won't. CrUX runs a rolling 28-day window, so expect first movement in a few days and a clean assessment in up to four weeks. To confirm early, watch CLS in the web-vitals JS library (the attribution build names the exact element that shifted — if it still names your ad wrappers, the reservation isn't holding on some template).
Frequently Asked Questions
What CLS score do ads need to stay under?
The whole page needs CLS ≤ 0.1 at the 75th percentile of real visits. Ads share that budget with everything else (fonts, embeds, banners), so in practice your ad stack should contribute close to zero — which full space reservation achieves.
Do sticky/anchor ads cause CLS?
Bottom-anchored overlay ads don't — they float over content rather than displacing it. Top anchors that push the page down when they load are among the worst offenders. If you run a top anchor, its space must be reserved before first paint.
Why is my CLS bad in Search Console but 0 in Lighthouse?
Lighthouse only measures during page load, usually before ads fill and always before the user scrolls to lazy-loaded slots. Field data measures the full session. For ad-driven CLS, only field data tells the truth.
Will fixing ad CLS lower my ad revenue?
Reserving space can marginally reduce impressions on unfilled slots, but it removes accidental clicks, improves viewability consistency, and protects the rankings that supply your traffic. Across publisher clients we've not seen a properly sized reservation strategy reduce net revenue.
Failing CLS Across an Ad-Monetised Site?
It's a template problem — fix the slot architecture once, and thousands of URLs pass together. That's the work we do.
LinkedIn