How to: Lazyload Adsense Ads in Blogger Site

I’ll demonstrate how to Lazyload Adsense Ads on the Blogger website in this article. Therefore, carefully follow the instructions to apply this on your website.

Let’s first examine what lazyloading is and why it is advised to increase Blogger’s page speed before moving on.

What is Lazyloading Adsense?

Lazyloading is an optimization strategy that holds off on loading the script until the user actually needs it. Therefore, we lazyload the bulky script and only load the necessary script for displaying the above-the-fold material, rather than loading the complete page at once.

Assume that a person loads the page, reads the first few paragraphs, and then clicks the Back button. As a result, the user does not scroll down the page, wasting the graphics and videos that load below the webpage. Therefore, you may conserve resources and speed up page loading by slow loading the graphics, videos, and below-the-fold advertising.

One of the biggest causes of delayed page loading is Adsense, which also loads extra javascript.

The Page Speed Insight tool reveals that Adsense is using more than 50% of the page space and loading extra script on our Blogger website, as illustrated in the example below.

As you can see, the page size here is approximately 707KB, and when we check the page speed score, it only scores 31 on mobile devices.

How to  Setup Lazy Loading for AdSense in Blogger

Follow the instructions carefully below to lazyload Adsense on Blogger.

Lazyload JavaScript Setup

STEP 1: Navigate to the Blogger dashboard and click Theme.

STEP 2: Make a backup of your theme now, then select Edit HTML.

STEP 3: All existing Adsense code should be deleted from your blogger theme.

STEP4: After that, copy the code below and replace your own Adsense publisher ID. Paste it before </body> tag.

[<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>]

Now Save your theme. Nice, You have successfully setup Lazyload JavaScript.

Implement Adsense Ad Unit

STEP 5: Log in to your AdSense account and choose your desired ad unit. 

As seen in the image below, you must eliminate a certain section of the manual AdSense ad unit code. because your Blogger website does not need to include the Adsense Javascript file more than once.

STEP 6: Copy the ads code (again remember don’t copy the Adsense Javascript, highlighted part ) and paste it where you want to display ads. Save your theme.

We have now correctly integrated Lazyload Adsense onto our Blogger website. It is time to run another test using the page speed insight tool.

Furthermore, as shown in the screenshot below, the page speed has increased from 31 to 74. Thus, you can speed up your Blogger blog in this way. 

Hope the tutorial will be useful for you. Lazyload AdSense is a great solution for those who are worried about blog page speed. If you have any difficulty in understanding the tutorial, please comment.