Layout Shift (CLS) Issues

Prevent Core Web Vitals CLS from ad slots by pre-reserving height with min-height CSS — recommended values per format, responsive media query variants, and how to collapse empty slots without causing a shift.

Cumulative Layout Shift (CLS) occurs when content moves unexpectedly after the page has loaded. Ad slots are one of the most common causes of CLS because they have no height until a creative renders. This article explains how to prevent it.

Why ad slots cause CLS

When the page first loads, a <div data-advlume-slot> has no height — it is a zero-height element. When an ad creative loads (which happens asynchronously after Prebid's auction), the slot expands to the height of the creative. If your page content comes immediately below the slot in the DOM, it gets pushed down. This produces a visible jump and contributes to your Core Web Vitals CLS score.

Google considers a CLS score above 0.1 "Needs Improvement" and above 0.25 "Poor". A single unfixed leaderboard slot can easily push a page above these thresholds.

Fix: reserve slot height with min-height

The simplest and most reliable fix is to give every slot container a min-height equal to the smallest creative you expect:

<div
  data-advlume-site="YOUR-SITE-UUID"
  data-advlume-slot="leaderboard"
  style="min-height: 90px"
></div>

Recommended min-height values:

Slot type	Recommended min-height
Desktop leaderboard (728×90 / 970×90)	90px
Billboard (970×250)	250px
Medium rectangle (300×250)	250px
Mobile leaderboard (320×50)	50px
Large mobile banner (320×100)	100px

Use CSS for a cleaner implementation:

/* In your stylesheet */
[data-advlume-slot="leaderboard"] { min-height: 90px; }
[data-advlume-slot="mid-content"]  { min-height: 250px; }
[data-advlume-slot="mobile-top"]   { min-height: 50px; }

Responsive min-height for multi-size slots

If a slot serves different sizes on mobile vs. desktop, use a media query to set the appropriate min-height for each breakpoint:

@media (max-width: 767px) {
    [data-advlume-slot="top-banner"] { min-height: 50px; }
}
@media (min-width: 768px) {
    [data-advlume-slot="top-banner"] { min-height: 90px; }
}

Handling unfilled slots

If a slot goes unfilled (no bid won), the slot div remains at its min-height as empty space. To collapse unfilled slots, you can use the Advlume wrapper's slot state class. The wrapper adds advlume-slot--empty to any slot div where no creative rendered after the auction:

/* Collapse empty slots (optional) */
.advlume-slot--empty { min-height: 0 !important; }

Note that collapsing empty slots can itself cause CLS if surrounding content moves to fill the space after the ad had already reserved it. Only use this if empty space is a worse UX than the shift.

Further reading

• Responsive Ad Sizing — how sizes are selected per viewport
• Best Practices for Ad Placement — placement guidance including CLS prevention
• Adding Ad Unit Divs — the full snippet reference