How to Lazy Load Adsense Ads?

Question

Is there any working method of Lazy loading Adsense Ads?

I have checked few answers in stack overflow & Google, All Those methods are only defer loading, I need to load Ads only when it is visible to user in the viewport; Like lazy loading an Image.

Answer 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