Lazy Loading Ads: Implementation and Impact

What Is Lazy Loading?

Lazy loading is a technique for deferring resource requests until they are needed. For images, this means downloading the image only when it scrolls near the viewport. For ads, it means firing the bid request only when the slot is about to be visible. The idea is to avoid wasting bandwidth and user attention on resources that may never be seen.

For ads specifically, lazy loading also improves viewability, because slots that load only when about to be seen are far more likely to actually be viewed. This makes lazy loading one of the few optimization techniques that improves both performance and revenue at the same time.

Most modern ad servers and header bidding wrappers support lazy loading natively. Google Publisher Tag has a built-in lazy loading mode. Prebid.js supports lazy bid requests via custom code or the lazy loading helper module.

For background on the broader monetization context, see our AdSense optimization guide and our piece on ad viewability best practices.

Why Lazy Loading Helps Revenue

The revenue case for lazy loading rests on two effects: higher viewability and better page speed.

Viewability Effect

An ad slot that loads only when about to enter the viewport is almost guaranteed to be seen. Compare this to a slot that loads at page initialization but sits below the fold for the entire session. The first slot might achieve 95% viewability; the second might be 30%.

Higher viewability translates directly into higher CPMs because programmatic bidders pay more for inventory they expect to be seen.

Page Speed Effect

Loading fewer ads on initial pageload means fewer network requests competing with content. This improves LCP and INP scores, which improves rankings and engagement. See our piece on Core Web Vitals and ad revenue for the full mechanics.

Implementation Patterns

Lazy loading can be implemented in several ways depending on your ad stack.

Native GPT Lazy Loading

Google Publisher Tag exposes a built-in lazyLoad configuration with three parameters: fetchMarginPercent, renderMarginPercent, and mobileScaling. These control how far below the viewport bid requests fire and how far below they render.

Prebid Lazy Loading

Prebid.js does not have lazy loading built into the core library, but the lazy loading helper module wraps slots in IntersectionObserver logic that fires bids when slots approach the viewport.

Custom IntersectionObserver

For maximum control, implement your own IntersectionObserver around each ad container. Fire bid requests when the observer reports the slot is within your chosen root margin. This is the most flexible approach but requires custom code.

Tuning Root Margin

Root margin is the single most important parameter in lazy loading. It controls how far below the viewport a slot must be before its bid request fires. Set it too aggressive and you defeat the purpose; set it too conservative and ads arrive after the user has scrolled past.

Recommended Starting Values

Adaptive Margins

Advanced setups use the Network Information API to adjust root margin dynamically based on the user's connection speed. This delivers the best balance between viewability and fill rate across diverse audiences.

Implementation in GPT and Prebid

Most publishers run a combination of Google Publisher Tag and Prebid.js. Lazy loading needs to be coordinated between the two.

GPT-Only Setup

Enable native GPT lazy loading via googletag.pubads().enableLazyLoad with appropriate fetchMarginPercent and renderMarginPercent values.

Prebid + GPT Setup

Wrap each ad slot in an IntersectionObserver. Inside the observer callback, call both pbjs.requestBids and googletag.pubads().refresh in the correct order so that header bidding completes before the ad server call.

For deeper context on header bidding mechanics, see our header bidding explainer.

Tradeoffs and Risks

Lazy loading is one of the safer optimization techniques but it does have tradeoffs to manage.

Fast Scroll Risk

Users who scroll quickly may pass through slots before bid requests complete. If your root margin is too conservative, fill rate suffers on these users.

Initial Auction Pressure

Lazy loading shifts demand from page load to scroll moments. Some demand partners are slower to respond mid-session than at page load, which can subtly shift bid mix.

Refresh Logic Conflicts

If you also run auto-refresh on slots, lazy loading interacts with the refresh timer in ways that can produce unexpected results. Test combinations carefully.

Use the Sentinel Bounce Rate Bot to monitor whether lazy loading changes affect engagement signals.

Measuring Success

Measure four metrics before and after enabling lazy loading: average viewability, slot fill rate, RPM, and Core Web Vitals scores. Run an A/B test with at least three weeks of data to capture variability.

Troubleshooting

Viewability Did Not Improve

Check that your root margin is not so large that slots are still loading well above the fold. Aggressive root margins effectively disable lazy loading.

RPM Dropped

Likely a fill rate issue. Try a more generous root margin or add fallback fill from a backup network.

Layout Shifts Appeared

Slot dimensions are not properly reserved. Lazy loading exposes existing CLS issues that were masked by initial-load timing.

Bidders Stopped Responding

Some bidders have session caps or staleness rules. Verify with your demand partners that they support mid-session bid requests.

FAQ

Does lazy loading work with AdSense?

Yes. AdSense Auto Ads include lazy loading by default. Manual AdSense placements can use GPT-style lazy loading.

What is a good root margin?

Start at 300 pixels for most setups. Tune up or down based on viewability and fill rate measurements.

Can lazy loading hurt my CPM?

Generally no. By improving viewability, lazy loading typically lifts CPM. Only severe misconfiguration produces drops.

Do I need IntersectionObserver?

For custom implementations, yes. For native GPT lazy loading, the browser handles observation internally.

Will lazy loading help my Core Web Vitals scores?

Yes, particularly LCP and INP. Fewer initial network requests and less main-thread work both improve CWV.