Originally published at https://cristiandeluxe.dev/blog/mobile-cls-ad-slot-reservation/.
An ad-size change exposed a layout shift on a financial-media site I worked on. Google Search Console flagged roughly 2,000 mobile URLs. The ad framework inserted a slot above the article after the page had painted, pushing the content down.
I kept the larger ad sizes and changed how the page made room for them.
Reproduce the shift under mobile conditions
I measured with Puppeteer using an iPhone 14 viewport, Fast 3G network throttling and a 4× CPU throttle. The run included scrolling so it could catch shifts from lazy-loaded slots.
That was an emulated test profile. The roughly 2,000 URLs came from Search Console; I did not run a before-and-after test on every one of them. The reproduced baseline CLS was 0.181.
I inspected which element moved and what appeared above it. The ad code created its own wrapper in JavaScript after the initial document loaded. Increasing the ad size made the missing reservation more visible.
A shifted element is a clue to the cause. It can be the content displaced by a new element, rather than the element responsible for the insertion. Google's layout-shift debugging guidance makes the same distinction.
Render the space before the ad arrives
I changed the server-rendered template to emit the ad placeholder, with CSS reserving its height for the relevant layout. The ad code then checked for that slot and reused it instead of inserting a second wrapper.
Both sides had to agree on the slot's identity and geometry. If the client couldn't find the server-rendered element, it would still insert its own. If it found the element but changed its size, content could still move. Reserving space only after JavaScript ran would also leave the initial paint exposed.
I kept the existing insertion path for slots without a server-rendered placeholder. That made it possible to apply the fix to the affected layouts without changing every ad placement at once.
Check where a placeholder does not belong
Some layouts had no leaderboard ad. Those needed to stay out of the placeholder path. Reserving a blank band on a page that would never fill it would have introduced a visible regression.
This is the part I would check carefully on another site: test both the layout with the slot and the layout without it. On the first, inspect the document before the ad request finishes, then confirm that initialization reuses the same element. On the second, confirm that the template leaves no reserved gap.
I would also repeat the throttled run through a scroll, rather than stopping at first paint. Later ad loading can still move content below the fold.
Top comments (0)