Cara Mempercepat Loading Blog Dengan Script Lazy Load

Cara Mempercepat Loading Blog Dengan Script Lazy Load - Hai sobat blogger, kalian diharapkan sudah mengetahui kecepatan loading blog kalian. Semakin cepat loading blog akan semakin baik untuk blog kalian.

Dikarenakan para blogger lain sudah menerapkan ini pada blognya, agar para visitor tidak terlalu menunggu lama hanya untuk membaca artikel blog. Saya sendiri sudah menerapkan di blog saya ini untuk mendapatkan hasil yang maksimal.

Untuk cara pemasangan script lazy load kedalam template apapun yang kalian gunakan itu sangatlah mudah sob, simak saja tutorial singkat pemasangan lazy load.

Memasang Script Lazy Load

1. Buka akun Blogger kalian.

2. Masuk ke Dasboard > Template > Edit HTML

3. Letakkan script dibawah ini, tepat sebelum kode </body> untuk mempermudah pencarian tekan CTRL+ F

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpToK7x6zqrblAVaoV_7M36r8QOJtMvrYPPgJvZOn-PnTtEAjtzxy_-1JDf9GWdZ-vimNNmFGKA_xazt3y4XiZWQmDzFvLYm5S5nhz-e2q8_Ya3SIQzf7v5TJ4XYIPXlgCoQS-M7HogxA/s1600/Bannerku.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Simpan

Cek Hasilnya Disini

Sudah jelas? jika masih kurang jelas silahkan tanyakan melalui kolom komentar dibawah artikel ini, tanyakan sesuai topik artikel.

Sekian dulu artikel dari Cara Mempercepat Loading Blog Dengan Script Lazy Load, semoga bisa bermanfaat bagi kalian semua.
Terima Kasih