How to Lazy Load AdSense Ads in 3 Steps to 10x Website Speed

If your website is loading slowly, especially with Google AdSense ads, then you are not alone, thousands of people like you are facing this problem. Traditional ad scripts load instantly and block important page content, which hurts your user experience and SEO rankings.

But there's a smart solution: lazy load AdSense ads. This technique delays loading ads until the user scrolls or interacts with your page, making your site up to 10x faster without impacting ad revenue.

We have tested and proven this solution on WordPress, Blogger, and custom websites. Let's take a look at the easiest and most effective method.

What is Lazy Loading?

Lazy loading is a smart technique that delays the loading of non-essential resources, like images, videos, AdSense ads, until they're actually needed on the screen. This approach helps to speed up the initial page load time and improves user experience.

• Example 1: Lazy Load Image. This image will load only when the user scrolls near it.

  <img src="placeholder.jpg" src="real-image.jpg" loading="lazy" alt="Beautiful Nature">

• Example 2: Lazy Load Iframe (e.g., YouTube Video). The video iframe loads lazily to reduce page load time.
  

  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" title="YouTube video"></iframe>

Ready to speed up your WordPress, Blogger, or custom website? Let's get started!

How to Lazy Load AdSense Ads (Step-by-Step)

Before you begin, be sure to replace ca-pub-XXXXXXXXXXXXXXXX with your actual Google AdSense publisher ID in the provided code snippet.

// Example of a basic AdSense ad unit code (simplified)
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-YOUR_PUBLISHER_ID" crossorigin="anonymous"></script>
<!-- Your Ad Unit Name -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
  data-ad-slot="YOUR_AD_SLOT_ID"
  data-ad-format="auto"
  data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Step 1: Choose Your Lazy Loading Code

Below are two tried-and-tested lazy load code snippets for AdSense. Use either one based on your preferences and performance needs. Review their pros and cons to determine which one best suits your needs.

Method 1: With Local Storage (Recommended)

This script waits for the user to scroll or click, then loads the AdSense script and saves a flag in localStorage. On future visits, the ad script is loaded immediately without waiting for interaction.

<script>
(function(){
  let stored = localStorage.getItem("lazyAdsense");
  let loadScript = function(){
    let s = document.createElement("script");
    s.setAttribute("crossorigin", "anonymous");
    s.async = true;
    s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
    document.head.appendChild(s);
  };
  let triggerLoad = function(){
    loadScript();
    localStorage.setItem("lazyAdsense", 1);
  };
  if(stored != 1){
    let triggered = false;
    let once = function(){
      if(!triggered){ triggerLoad(); triggered = true; }
    };
    window.addEventListener("scroll", once, {passive:true});
    window.addEventListener("click", once, true);
  } else {
    loadScript();
  }
})();
</script>

• Improves initial page speed by delaying AdSense until user action.
• Uses localStorage to remember loading, so repeat visits show ads faster.
• Reduces data usage and boosts Core Web Vitals for better SEO.

• Relies on localStorage, which may be disabled in some browsers or private modes.
• User must scroll or click before ads load, potentially reducing impressions.
• More complex code with extra logic for storage and events.

Method 2: Event-Based Trigger

This shorter script listens for the first scroll or click, then loads the AdSense script. It does not store any state, so every page load waits for interaction before loading ads.

<script>
(function(){
  let loaded = false;
  let loadScript = function(){
    if(loaded) return;
    let s = document.createElement("script");
    s.setAttribute("crossorigin", "anonymous");
    s.async = true;
    s.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
    document.head.appendChild(s);
    loaded = true;
  };
  let trigger = function(){ if(!loaded) loadScript(); };
  window.addEventListener("scroll", trigger, {passive:true});
  window.addEventListener("click", trigger, true);
})();
</script>

• Very simple and easy to maintain.
• Delays ad script until user interaction to speed up page load and improve SEO.
• No dependency on browser storage or cookies.

• Ads load only after interaction on every page view, which may lower ad revenue.
• No caching between visits, so repeat visitors see delayed ads each time.

Info:
Both codes use passive:true for the scroll event listener. This is a performance optimization that tells the browser the event listener will not call preventDefault(), allowing the browser to perform scrolling without blocking. The click event is also used as a trigger, as user interaction often indicates readiness for content loading.

Step 2: Apply the Code on Your Website

Once you've chosen your favorite code snippet, it's time to integrate it into your website. The procedure varies slightly depending on your platform:

For WordPress:

1. Using a Plugin (Recommended for Beginners): Go to your WordPress Dashboard, navigate to "Plugins" > "Add New." Search for "AdSense" or "Ad Inserter." Popular choices include "Ad Inserter" or "WPCode" (formerly "Insert Headers and Footers").
   

   

2. Manually (Advanced Users):
   1. Go to Appearance > Theme File Editor (or use an SFTP client).
   2. Locate your theme's functions.php file.
   3. Add the chosen code snippet within a function hooked to wp_footer or wp_head (wp_footer is generally preferred for performance). For example:

      function custom_adsense_lazy_load() {
          // Paste your chosen Code 1 or Code 2 here
      }
      add_action('wp_footer', 'custom_adsense_lazy_load');

      

   4. Alternatively, you can add it to a custom JavaScript file that's enqueued correctly.

For Blogger:

1. Go to Theme > Edit HTML.
2. Locate the </body> or </body> tag (usually towards the bottom).
3. Paste your chosen code snippet just before the </body> or </body> tag.
4. Save the theme.

For Any Website (HTML/PHP/JSP, etc.):

1. Open your main HTML template file or the files where you want AdSense ads to appear.
2. Paste the chosen code snippet just before the closing </body> tag (</body>). This ensures the core page content loads first.
3. Save your changes.

Important Warning:
Always back up your website files or theme before making any direct code edits. Incorrect code can break your site.

Step 3: Test Your Website Performance

After implementing the lazy loading code, it's crucial to test your website's performance and ensure AdSense ads are still displaying correctly. Here's how:

1. Clear Caches: If you're using a caching plugin or server-side caching, clear all caches after making changes.
2. Visit Your Website: Open your website in an incognito or private Browse window to avoid any cached versions.
3. Check Initial Load: Observe the initial page load. You should notice a significant speed improvement.
4. Scroll Down: Slowly scroll down your page. As you approach the location of your AdSense units, they should load dynamically.
5. Use Performance Tools:
   1. Google PageSpeed Insights: Analyze your page before and after implementing lazy loading. Look for improvements in metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
   2. GTMetrix: Provides detailed performance reports, including waterfall charts that can show when your AdSense scripts are loading.
   3. Browser Developer Tools (F12): In your browser's developer console, go to the "Network" tab. Reload your page and observe the network requests. Initially, you shouldn't see adsbygoogle.js. As you scroll, you should see it appear.

Tip:
If ads are not loading, double-check that you've replaced ca-pub-XXXXXXXXXXXXXXXX with your correct AdSense Publisher ID. Also, ensure there are no JavaScript errors in your browser's console that might be preventing the script from running.

Conclusion

Loading AdSense ads is one of the simplest yet powerful steps to improve load speed, reduce bounce rate, and increase SEO rankings.

Now it's your turn, speed up your website by using lazy loading for AdSense ad units and achieve better performance and a happier visitor experience!

Was this guide helpful? Share it, bookmark it, and leave a comment now!