How to Lazy Load Multiple Google AdSense Ads with Modern JavaScript

Displaying Google AdSense ads is a common way to monetize websites. However, many publishers are unaware that placing multiple ad units on a single page can significantly slow down their site, especially on mobile devices. This isn’t just about user experience—it also impacts your SEO, Core Web Vitals, and even AdSense revenue in the long run.

By default, each AdSense unit attempts to load the main adsbygoogle.js library, even if you’ve already included it once. This redundancy leads to heavy JavaScript payloads, render-blocking requests, and longer page load times. You might even see warnings like “Reduce unused JavaScript” or “Use efficient cache lifetimes” in Google PageSpeed Insights.

The Smarter Way: Lazy Loading AdSense with Intersection Observer

Instead of letting ads load immediately, you can delay them until users are about to scroll them into view. This technique is called lazy loading and can be achieved using the IntersectionObserver API. It’s lightweight, fast, and works in all modern browsers.

Here’s how you can implement it.

Step 1: Add the AdSense Code with a Custom Class

In your HTML or WordPress post, add your AdSense code as usual, but don’t load the script immediately. Give each ad unit a custom class like adsbygoogle-lazy:

<ins class="adsbygoogle adsbygoogle-lazy"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-3165041323892269"
     data-ad-slot="2942786084"></ins>

Do this for each ad slot on your page.

Step 2: Add the Lazy Load Script

Place the following JavaScript snippet near the footer of your site, or use a custom code injection plugin like WPCode:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lazyAds = document.querySelectorAll(".adsbygoogle-lazy");

  if (!lazyAds.length) return;

  let adScriptLoaded = false;

  const loadAdScript = () => {
    if (adScriptLoaded) return;

    const s = document.createElement("script");
    s.async = true;
    s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
    s.setAttribute("data-ad-client", "ca-pub-3165041323892269");
    s.crossOrigin = "anonymous";
    document.head.appendChild(s);
    adScriptLoaded = true;
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        loadAdScript();
        try {
          (adsbygoogle = window.adsbygoogle || []).push({});
          observer.unobserve(entry.target);
        } catch (e) {}
      }
    });
  });

  lazyAds.forEach((ad) => observer.observe(ad));
});
</script>

This code ensures that:

• The rest of your content loads faster, improving LCP and reducing unused JS.
• The AdSense script loads only once.
• Each ad appears only when it’s about to be viewed.

Why This Matters for SEO and Performance

This method reduces the number of critical render-blocking requests, avoids loading heavy scripts during the initial page load, and aligns with Google’s performance guidelines.

You’ll likely see improvements in:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Time to Interactive (TTI)

It also prevents your ad scripts from slowing down user interaction, especially on mobile.

A Few Final Tips

• If you’re using a WordPress caching plugin like LiteSpeed Cache, be sure to exclude this inline script from minification to prevent errors.
• Combine this method with local font loading, image lazy loading, and long cache lifetimes to maximize speed.
• Make sure your ad placements comply with AdSense policy and load within visible regions.

Conclusion

Lazy loading AdSense ads using Intersection Observer is a modern, SEO-friendly solution for websites with multiple ad units. It improves page speed, enhances user experience, and still allows you to fully monetize your content without bloating your load time.

If you’re running a WooCommerce store, blog, or digital media site, optimizing how and when ads load is no longer optional—it’s essential.