Home
Blogger Tutorials

How to Speed Up AdSense Ad Loading on Blogger for Better Performance

Techno Praveen

Welcome back to a new tutorial on our blog! Today’s guide explains how to speed up the loading of Google AdSense ads on your Blogger website. As you know, AdSense ads are the main source of income for most blogs, and slow-loading ads can reduce revenue and affect user experience.

Google AdSense allows publishers to add multiple ad units, search boxes, and various scripts inside the blog. However, adding too many elements can slow down page loading, especially if the theme is not well optimized. So, what is the solution?

Speed Up AdSense Ads on Blogger
Speed Up AdSense Ads on Blogger

Why You Should Speed Up AdSense Ads

Slow ads negatively affect:

  • Blog loading speed
  • SEO ranking
  • User experience
  • Ad revenue performance

To solve this issue, we will use a JavaScript code that delays loading images and ads until the visitor scrolls — improving overall speed.

How to Add AdSpeed Code to Blogger

  1. Go to your Blogger Dashboard → Theme → Edit HTML
  2. Press Ctrl + F and search for the tag: <head/>
  3. Paste the code below directly above the <head/> tag
<script type='text/javascript'>
//<![CDATA[
(function(a) {
  a.fn.lazyload=function(b){
    var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};
    if(b){a.extend(c,b);}
    var d=this;
    if("scroll"==c.event){
      a(c.container).bind("scroll",function(){
        var e=0;
        d.each(function(){
          if(a.abovethetop(this,c)||a.leftofbegin(this,c)){
          } else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){
            a(this).trigger("appear");
          } else {
            if(e++>c.failurelimit){return false;}
          }
        });
        var f=a.grep(d,function(a){return !a.loaded;});
        d=a(f);
      })
    }
    this.each(function(){
      var b=this;
      if(undefined==a(b).attr("original")){
        a(b).attr("original",a(b).attr("src"));
      }
      if("scroll"!=c.event || undefined==a(b).attr("src") || c.placeholder==a(b).attr("src") || a.abovethetop(b,c) || a.leftofbegin(b,c) || a.belowthefold(b,c) || a.rightoffold(b,c)){
        if(c.placeholder){a(b).attr("src",c.placeholder);}
        else{a(b).removeAttr("src");}
        b.loaded=false;
      } else {
        b.loaded=true;
      }
      a(b).one("appear",function(){
        if(!this.loaded){
          a("<img />").bind("load",function(){
            a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);
            b.loaded=true;
          }).attr("src",a(b).attr("original"));
        }
      });
      if("scroll"!=c.event){
        a(b).bind(c.event,function(){if(!b.loaded){a(b).trigger("appear");}});
      }
    });
    a(c.container).trigger(c.event);
    return this;
  };

  a.belowthefold=function(b,c){
    var d = (c.container===undefined || c.container===window)
      ? a(window).height() + a(window).scrollTop()
      : a(c.container).offset().top + a(c.container).height();
    return d <= a(b).offset().top - c.threshold;
  };

  a.rightoffold=function(b,c){
    var d = (c.container===undefined || c.container===window)
      ? a(window).width() + a(window).scrollLeft()
      : a(c.container).offset().left + a(c.container).width();
    return d <= a(b).offset().left - c.threshold;
  };

  a.abovethetop=function(b,c){
    var d = (c.container===undefined || c.container===window)
      ? a(window).scrollTop()
      : a(c.container).offset().top;
    return d >= a(b).offset().top + c.threshold + a(b).height();
  };

  a.leftofbegin=function(b,c){
    var d = (c.container===undefined || c.container===window)
      ? a(window).scrollLeft()
      : a(c.container).offset().left;
    return d >= a(b).offset().left + c.threshold + a(b).width();
  };

  a.extend(a.expr[":"], {
    "below-the-fold":"$.belowthefold(a,{threshold:0,container:window})",
    "above-the-fold":"!$.belowthefold(a,{threshold:0,container:window})",
    "right-of-fold":"$.rightoffold(a,{threshold:0,container:window})",
    "left-of-fold":"!$.rightoffold(a,{threshold:0,container:window})"
  });
})(jQuery);

$(function(){
  $("img").lazyload({
    placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",
    effect:"fadeIn",
    threshold:"-50"
  });
});
//]]>
</script>

Done!
This concludes our guide on "Speeding Up AdSense Ads on Blogger". We hope this tutorial helps improve your blog’s performance and revenue. See you in the next guide — stay safe! 🙂

Post a Comment