How to: Lazyload Adsense Ads in Blogger Site

Rate this post
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.

How to: Lazyload Adsense Ads in Blogger Site

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: Lazyload Adsense Ads in Blogger Site

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”>
    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);

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

Implement Adsense Ad Unit

Now it’s time to implement the Adsense Ad Unit in your Blog to show the ads.

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.

How to: Lazyload Adsense Ads in Blogger Site

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. 

How to: Lazyload Adsense Ads in Blogger Site

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.

 এই রকম আরও তথ্য পেতে আমাদের ফেসবুক পেজে লাইক দিয়ে যুক্ত থাকুন। এর পাশাপাশি গুগল নিউজে আমাদের ফলো করুন। 


This is RIMON Proud owner of this blog. An employee by profession but proud to introduce myself as a blogger. I like to write on the blog. Moreover, I've a lot of interest in web design. I want to see myself as a successful blogger and SEO expert.

মন্তব্য করুন

Related Articles

Back to top button