How to Lazyload Adsense Ads in Blogger

How to Lazyload Adsense Ads in Blogger

In this article, I'll show you how to Lazyload Adsense ads on the Blogger website. So, carefully follow the steps to make sure this works right on your website.

So, before we do that, let's talk about what lazyloading is and why it's a good idea to use it to speed up Blogger pages.

What is Lazyloading Adsense?

Lazyloading is a way to improve performance by waiting to load a script until the user needs it. So, instead of loading the whole page at once, we only load the heavy scripts when they're needed to show the content above the fold.

For example, if a user opens the page, reads the first few lines, and then clicks "Back," that's an example. Since the user doesn't scroll the page, the images and videos that load below the page are wasted. So, you can save resources and make the page load faster by delaying the loading of images, videos, and ads below them.

Adsense is one of the main reasons why pages take so long to load, and it also loads javascript that isn't needed when a page loads.

When we use the page speed insight tool to check our Blogger site, it shows that Adsense takes up more than half of the page size and loads script that isn't needed, as shown below.

How Lazyload Adsense script works?

When you add the Lazyload Adsense script to your website, it will put off loading the ads and only load the ones that are needed to show the page.

When the user does something like scroll the page, the Adsense code will start to run in the browser and your ads will show up on the page.

So, the page speed insight tool won't be able to tell when an Adsense script loads because it loads when the user clicks on something.

So, you can reduce the total size of your page and make it load faster on mobile devices with slow internet connections.

So, let's look at how you can speed up the loading time of your Blogger site by adding the latest lazyload Adsense script.

How to Lazyload Adsense In Blogger?

Step 1: Open the Theme section of the Blogger dashboard.

Step 2: At this point, create a backup of your theme, then select Edit HTML.

Step 3: Remove all of the previous Adsense code from your blogger theme.

Step 4: Copy the code below and replace it with your Adsense publisher ID.

<script type='text/javascript'>

//<![CDATA[

var lazyadsense2 = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {

(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();

lazyadsense2 = true;

  }

}, true);

//]]>

</script>