Tutorial LifeAfter And Android Mobile Gaming

Faster loading blog with Lazy Load

|
In addition to focusing on quality content, a blogger must also pay attention to the health of the blog that he manages, pay attention to the health of the blog by continuously optimizing its website so that the display, loading and content continue to develop for the better.

Optimizing blog loading is indeed a problem that is always faced by bloggers, especially bloggers who use blogspot flatform, may not be so problematic for those who use flatform wordpress with self host, because many plug-ins can be installed to optimize blog loading to be fast even though many files and images uploaded in it.

Then how for bloggers with a blogspot flatform? Is it possible to optimize blog loading to be faster like wordpress? the answer is very possible, because on this occasion I will give a tutorial on how to install plug-in lazy load.

Benefits and how to use Lazy Load

Then what is lazy load? Lazy load is a plug in or script that was built and developed specifically for the blogspot flatform, its function is to delay calling objects when objects are still not needed. In other words, images, videos and other components in the blog will not be loaded before you touch or direct the content.

So with this, loading the blog will be slightly reduced because it only contains pages that are open, when you scroll your cursor down, only then will all pages be loaded in its entirety.

Of course, if your blog is faster to access, it will potentially attract the attention of visitors because blogs do not require a long time to load the entire page, so that visitors will be more comfortable surfing on your blog.

Examples of lazy load you can see on this blog. This method can also be used in adsense scripts to speed up loading your blog. If you apply Lazy Load to your site, please clear the browser cache first to do lazy load testing.

I think you already understand what lazy load is and how lazy it works in a blog, then now how do you install it on a blog? very easy, you only need to install the script that I will share below in the HTML of your blog. The following are the results:

How to use Lazy Load on a Image Blog


Benefits and how to use Lazy Load

There are many ways to speed up loading a blog, one of them is by installing the Lazy Load plugin. This trick is one of the optimization of a blog with a jQuery Lazy Load plug-in to ease the loading load when loading images on your blog page.

1. Open Blogger > Themes > Edit HTML > add the code below before </ body>


<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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(b){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(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

2. Save the template and see the results.
source : Arlinadzgn.com

How to Speed up Loading Blog with AdSense Lazy Load


Benefits and how to use Lazy Load

For friends who use their blogs as one of their income sources, they are certainly familiar with Google AdSense. Yes, Google AdSense is a Google product that is one of the reasons and attractiveness of publishers to further develop their site. Although not all of them have the same reason.

On the other hand AdSense is one of the contributors to loading because the ads displayed JS AdSense will reduce the loading speed of our blog even though JS AdSense already uses asynchronous, but still it will still make the blog wait longer to load.

The way the code works is quite simple, that is, the ad will appear after we scroll the page. So AdSense JS will not appear before we scroll the site page.

Open Blogger > Themes > Edit HTML > add the code below before </ body>

 <script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script> 

If not work, make sure to delete all AdSense links that are usually attached to the AdSense ad unit code. Like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

After adding click the Save theme button and finish.
source : Arlinadzgn.com

Maybe someone is asking, is this code safe for our AdSense?

The answer is of course safe. Because Google also recommends to speed up loading the blog as well as installing the Lazy Load Image code to speed up image loading on the site page.

And will it affect the AdSense revenue of our blog?

I don't know for this one, because I just installed it myself. We'll see the progress, if the income decreases maybe it really isn't our fortune hehe .. The solution is that you can revoke the code and restore it as before.

In conclusion, prioritize what you think your friend needs. If you want to blog faster, you can do the above trick, but if you are still unsure of AdSense revenue (which might be), you will just drop the intention to install it. But for me, I consider this as a new experience, what I value here is the progress "Will installing this code affect AdSense?" Well, that curiosity makes me more excited even though there are risks that need to be accepted.

Okay, I have enough for posting, hopefully it will be useful for all of us.

Related Posts