Fixing Layout Shift Caused by Display Ads

Why ads shift the page

An ordinary image comes from your own server and its size is known in advance. An ad is different. The page asks an ad server what to show, an auction or selection takes place, the winning creative is fetched, and only then is it drawn. That can take well over a second on a phone, by which time the reader has started scrolling through the text around the slot.

If the container is a plain <div> with no height, it takes up no space until the creative arrives. When a 250-pixel-tall unit is written into it, everything below drops by 250 pixels. That is one layout shift, often a large one, because it moves most of the visible screen.

Several things make ads harder than other late content:

• Unknown size. Many slots accept several sizes, such as 300 by 250 or 300 by 600, and you do not know which will win until it arrives.
• No fill. Sometimes no ad is returned. If the empty slot then collapses, content moves back up, which is another shift.
• Refresh. Some setups swap in a new creative every so often. If the new one is a different height, the page moves again, long after load.
• Automatic placement. Some networks decide where to insert ads themselves, adding new containers into the article as the script runs.
• Resizing creatives. Rich media and native units can change their own height after they render.

Tracing a shift back to an ad

The CLS Debugger names the elements that moved. With ads, those are usually your own paragraphs, headings or sidebar blocks, not the ad itself, because the ad is what appeared and pushed them. Look for a slot container directly above the moved element.

1. Compare with ads blocked. In Chrome DevTools, open the Network panel, find the requests to your ad provider's domains and block them, then reload. If most of the CLS disappears, ads are the main source. Remember to unblock them afterwards.
2. Record a throttled load. In the Performance panel with network and CPU throttling on, record a reload and scroll through the article. The Layout shifts track shows each shift; select one and the highlighted nodes show what moved and by how far.
3. Check the served sizes. Right-click each filled slot and inspect it. Note the width and height of the creative's iframe. Do this several times across different page loads, because the size can change from one visit to the next.
4. Look at the empty cases. Reload a few times on a low-traffic page or use a test ad unit with no campaigns. If the slot container shrinks to zero, you have a no-fill shift as well.

If you use Google Ad Manager, its publisher console, opened from the browser console or with a URL parameter, lists each slot, the sizes requested and the size delivered, which saves a lot of manual inspecting.

Choosing how much space to reserve

Reserving space means giving the slot container a min-height (and usually a min-width) before any ad code runs, so the box is already the right size when the creative lands. The hard part is picking the number when the slot can take several sizes.

A simple, readable pattern is a class per slot type, sized with media queries that mirror your ad server's size mapping:

<div class="ad ad--in-article" id="ad-article-1"></div>

.ad { display: flex; align-items: center; justify-content: center;
      margin: 24px auto; background: #f3f3f3; }
.ad--in-article { min-width: 300px; min-height: 250px; }
.ad--leaderboard { min-height: 50px; }
@media (min-width: 768px) {
  .ad--leaderboard { min-height: 90px; }
}
@media (min-width: 1024px) {
  .ad--in-article { min-height: 280px; }
}

A light background and a small "Advertisement" label make the reserved box look intentional while it waits, and tell readers what is coming. Keep the label outside the ad container if your network does not allow extra content inside it.

Slots that come back empty

When there is no ad to show, many set-ups hide the slot. That feels tidy but it moves content twice: down if something briefly appeared, or up when the reserved box disappears.

In Google Publisher Tag the behaviour depends on how you call collapseEmptyDivs:

• Not called. The container stays at whatever size your CSS gives it. With a reserved height, nothing moves. This is the most stable choice.
• googletag.pubads().collapseEmptyDivs() collapses a slot after the ad server says there is nothing to show. Your reserved space disappears and the content below jumps up.
• googletag.pubads().collapseEmptyDivs(true) keeps slots collapsed until an ad is returned, then expands them. That turns every filled slot into a downward shift.

Keeping the space is better for CLS. To avoid a blank rectangle, fill it with a house advert for your own newsletter or products, or a neutral placeholder. Other networks have similar settings; look for options named along the lines of "collapse empty" or "hide unfilled".

Where slots sit matters as much as their size

A shift is scored by how much of the screen moved and how far. A leaderboard at the very top of the page, above the headline, moves the entire visible page when it opens. The same unit halfway down an article, loaded before the reader reaches it, may move nothing they can see.

• Above the first screen: reserve exact space or remove the slot. Every visitor sees these shifts.
• In the article body: reserve space and load the ad a little before it scrolls into view. GPT's lazy loading setting can fetch slots a set distance ahead of the viewport.
• Sidebars: a slot in its own column pushes only the sidebar, which is a smaller area, but a sticky sidebar can still move. Reserve its height too.
• Sticky and anchor units: these should use position: fixed or sticky and sit on top of the content. If a "sticky" unit is actually inserted at the top of the page and pushes everything down, it is not implemented as an overlay.

Automatically placed ads

Features that choose ad positions for you, such as automatic placement in some ad networks, insert new containers wherever the script decides. You cannot reserve space for a slot you do not know about. If they cause heavy shifting, reduce the formats they may use, exclude areas of the page where your network allows it, or replace in-page automatic units with fixed, manually placed slots that you can size.

Refreshing and expanding units

If slots refresh while visible, request only sizes that fit the reserved box so a refresh cannot change the height. Expanding creatives should expand over the content rather than pushing it, which most ad policies already require.

The fix, step by step

Notes for common set-ups

• WordPress ad plugins. Plugins that insert ads between paragraphs usually let you add a wrapper class or custom CSS for each placement. Put the min-height there. Check whether the plugin hides empty placements and turn that off. The WordPress CLS guide covers the other plugin-related shifts.
• Managed ad partners. If a partner manages your ad code, ask them for their layout-stability options. Many can add reserved heights per slot on request.
• Single-page apps. When routes change without a full page load, destroy old slots and define new ones in containers that are already sized, otherwise every navigation repeats the shift.
• Consent. Where ads wait for a consent choice, reserve the space anyway. The box should not depend on whether personalised ads are allowed.

Keeping ad shifts under control

• Make reserved space a rule for new slots. No slot goes live without a sized container in the stylesheet.
• Review size mappings with the CSS. When someone adds a size in the ad server, the matching min-height needs checking too.
• Test more than once. Because creatives vary, one clean test proves little. Check a handful of loads per template after any ad change.
• Keep an eye on field data. Ad campaigns change constantly, so a sudden rise in mobile CLS in Search Console with no site release is often a new creative or format.