How to Lazy Load Adsense Ads?

Show Details

Solution 1: [1]

Yes it is possible to Lazy Load Adsense, You need to use opensource libraries like LazyHTML to Lazy Load Adsense Ads without modifying Adcode.

In the following example replace ca-pub-xxx with your Google Adsense client ID, You must also replace the slot ID. Make changes as per your need.

Add the Following Code into Head.

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyhtml.min.js" crossorigin="anonymous"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxx" crossorigin="anonymous"></script>

Wrap the adcode in lazyhtml wrapper.

<div class="lazyhtml" data-lazyhtml onvisible>
  <script type="text/lazyhtml">
  <!--
  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYY"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
  -->
  </script>
</div>

Steps & Notes:

  1. Add LazyHTML & adsbygoogle.js Javascript into Head, It is Async loaded.
  2. Wrap all Adsense Codes in LazyHTML Wrapper.
  3. If you want to Lazy Load all Adsense ads, You must wrap all the Adsense Tags in LazyHTML wrapper
  4. Note that No HTML, CSS or JS comments are allowed inside the wrapper.
  5. onvisble attribute loads the Adsense adunit when it is exactly visible to user.
  6. Try to avoid Adsense Autoads.

Help Links:

Source: Lazy Loading Adsense Ads

Lazy HTML Wrapper: LazyHTML Converter



Credits

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Credit
Solution 1 Niresh