Lazy Loading

What is Lazy Loading?

Lazy loading is a performance optimization technique where resources (images, videos, ads, iframes) are not loaded when the page initially renders but instead are deferred until they are about to become visible in the user's viewport as they scroll. This dramatically reduces the initial page load time and bandwidth consumption because only the content the user actually sees gets loaded.

Modern browsers support native lazy loading for images and iframes through the loading="lazy" HTML attribute. For more complex implementations (including lazy-loading ads), developers typically use the Intersection Observer API to detect when elements approach the viewport and trigger loading dynamically.

Why It Matters for Publishers

Lazy loading is one of the most impactful optimizations for ad-heavy publisher sites. Without lazy loading, a page with 5-8 ad units loads all ads simultaneously on page load, even ads far below the fold that the user may never scroll to. This wastes bandwidth, slows the page, hurts Core Web Vitals, and generates low-viewability impressions that don't benefit anyone.

By lazy-loading ads below the fold, publishers improve initial page load speed (helping LCP), reduce resource competition between ads and content, and ensure that loaded ads are more likely to be viewed — improving viewability scores and potentially earning higher CPMs.

Tips for Optimization

• Don't lazy-load ATF content: Above-the-fold images, ads, and content should load immediately. Lazy-loading the LCP element actually hurts your LCP score. Only lazy-load below-the-fold resources.
• Set appropriate loading margins: Trigger lazy loading when elements are 200-500px from the viewport, not when they enter it. This gives resources time to load before the user scrolls to them, preventing visible loading delays.
• Use native lazy loading for images: The loading="lazy" attribute is supported by all modern browsers, requires no JavaScript, and handles the viewport detection automatically.
• Reserve space for lazy-loaded elements: Even though the resource hasn't loaded yet, the container should have explicit dimensions to prevent CLS when the resource loads and expands.
• Measure the impact: Track LCP, page load time, and viewability before and after implementing lazy loading to quantify the improvement and catch any unintended regressions.

Further Reading

See how lazy loading fits into a broader ad strategy in our guide to lazy loading ads, and learn more about page speed optimization for ad-supported sites.