6

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.

Owl Reporter
  • 63
  • 1
  • 5
  • Adsense implements that feature by default. If you have ads below the viewport - they will be loaded (ad request is sent) when user gets close to them. – Mikita Belahlazau Sep 03 '21 at 14:52
  • @MikitaBelahlazau I highly doubt that because if ads below the view port are lazy loaded, I won't get any notifications in optimization section of Adsense dashboard saying "Make sure your ads are seen". – Owl Reporter Sep 03 '21 at 17:24

1 Answers1

7

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/lazyhtml@1.2.3/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

Niresh
  • 611
  • 5
  • 16