What is lazy loading (and why it helps)
Lazy loading defers an ad’s request and render until the user is about to scroll it into view, rather than loading every ad slot the moment the page opens. That does two good things at once: it removes ad work from the critical initial page load — helping Core Web Vitals — and it means ads load closer to when they’re actually seen, which lifts viewability and the CPMs buyers will pay.
The catch: load too late and the ad isn’t ready when the user arrives, hurting viewability and fill. The whole skill is in the threshold.
Step-by-step implementation
Step 1: Identify which slots to lazy-load
Lazy-load below-the-fold slots. Leave above-the-fold ads (the ones visible on load) eager, so they’re ready immediately and don’t cause layout gaps.
Step 2: Set a sensible load threshold
Configure how far before the viewport a slot should start loading (a “root margin” or fetch margin). Start with a buffer of roughly a viewport or so of distance — enough that the ad is ready by the time the user reaches it, but not so early that you’re loading ads no one sees.
Step 3: Use your ad stack’s built-in lazy loading
Most stacks support this natively — Google Ad Manager (via GPT) and Prebid.js both have lazy-loading configuration. Prefer the built-in mechanism over hand-rolled scroll listeners, which are error-prone and can hurt performance themselves.
Step 4: Reserve space to prevent layout shift
Always reserve the ad slot’s dimensions in CSS before the ad loads. An ad that pops in and pushes content down causes Cumulative Layout Shift (CLS) — one of the Core Web Vitals you’re trying to protect. Reserved space is non-negotiable.
Step 5: Measure both revenue and Web Vitals
After rollout, watch both sides: LCP/CLS/INP and viewability, fill, and eCPM. Lazy loading that improves speed but craters fill is a net loss — tune the threshold until both are healthy.
Common mistakes that cost revenue
- Lazy-loading above-the-fold ads. These should load immediately; deferring them delays viewable impressions and hurts revenue for no speed gain.
- Loading too late. An aggressive threshold means ads aren’t ready when users arrive — low viewability, lost fill.
- Not reserving slot space. Causes layout shift, defeating the purpose.
- Hand-rolled scroll handlers. Use the ad stack’s native lazy loading instead.
Why it’s worth doing
Lazy loading is one of the few optimizations that helps yield and user experience simultaneously: fewer wasted impressions, better viewability, faster initial load, and stronger Core Web Vitals (which feed SEO). For content sites where page speed affects rankings, it’s close to essential.
The bottom line
Lazy loading defers below-the-fold ad requests until they’re about to be seen — improving Core Web Vitals and viewability together. Implement it via your ad stack’s native config, keep above-the-fold slots eager, always reserve slot space to avoid layout shift, and tune the load threshold on both speed and fill. It’s a foundational part of running a fast, high-yield ad stack.