Mempercepat Loading Blog Dengan Memasang Lazy Load

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

Masih dalam satu topik adalah mempercepat loading Blog, untuk mempercepat loading blog kali ini kita akan memakai 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, lantaran bila loading Blog berat sanggup menciptakan pengunjung mengurungkan niatnya mengujungi blog kita dan pengunjung tersebut menutup halaman.

Tentunya itu sebuah kerugian, oleh lantaran itu untuk meringankan loding Blog, kita sanggup 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 kau cari isyarat </body>, copy isyarat 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/AVvXsEgMuk3u2BZY2p7AHeBIoS-DCoUfBfQhYpIpHs6DMaxKZTVaacm3PmNQU4Z_cjB20HwIxPNyURVf_hKwSN54rX_xBS4xzr366jbqwj3iNEG__hWLfiUpPOzB8lIjOQtp4fpHeCIvc6AXz7o/s1600/aakshare.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Simpan template

Untuk mengecek kecepatan loading Blog kau sanggup memakai tools Google yakni PageSpeed Insights. Disana kau sanggup melihat strukur Blog kau apa yang perlu diperbaiki.

Share this post