Mempercepat Loading Blog dengan Memasang Lazy Load

Cara Memasang Lazy Load di Blogger - Banyak cara yang dapat kita lakukan untuk mempercepat loading Blog seperti memasang script Compression Gambar.

Masih dalam satu topik yakni mempercepat loading Blog, untuk mempercepat loading blog kali ini kita akan menggunakan Script jQuery Lazy Load. Dengan memasang Lazy Load tentunya sangat bermanfaat untuk Blog kita, mengapa? Karena loading Blog menjadi lebih ringan.

Membuat loading Blog menjadi lebih ringan merupakan salah satu yang di sarankan oleh Google, karena jika loading Blog berat bisa membuat pengunjung mengurungkan niatnya mengujungi blog kita dan pengunjung tersebut menutup halaman.

Tentunya itu sebuah kerugian, oleh sebab itu untuk meringankan loding Blog, kita bisa menggunakn Lazy Load untuk di pasangkan di Blog kita. Adapun caranya sebagai berikut :

1. Login ke akun Blogger
2. Pilih Template, Edit HTML
3. Selanjutnya kamu cari kode </body>, copy kode di bawah ini dan pastekan diatasnya.

<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/AVvXsEjviNPMV7EGS7qvkRnqN7SciMbXAkvz_mFwoL7R26S731cqtCPMepryxHUuNyoJer21ECsnqr7dOL2iKJI_WRkpUo6Z3KiI7Fgeaxml2zI1auQwq1nIwmFmCCWRwoO9vTv7DSe7unuO7fw/s1600/aakshare.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Simpan template

Untuk mengecek kecepatan loading Blog kamu bisa menggunakan tools Google yakni PageSpeed Insights. Disana kamu bisa melihat strukur Blog kamu apa yang perlu diperbaiki.

Share this post