Cara Mudah Mempercepat Loading Blog dengan Lazy Load

Cara Mudah Mempercepat Loading Blog dengan Lazy Load - Lazy load merupakan sebuah kode javascript untuk mempercepat loading sebuah website/blog. Lazy Load ini berfungsi untuk menunda pemuatan gambar sekaligus, lebih tepatnya gambar akan diload saat kita scrolling/menggulirkan tampilan blog. Oleh karena itu, Lazy Load akan membuat loading web kamu semakin cepat.

Sebenarnya ada banyak cara yang bisa digunakan untuk menggunakan lazy load, tetapi saya akan memberikan cara yang termudah untuk memasang lazy load ini.

Cara Memasang Lazy Load di Blog

1. Seperti biasa, masuk ke dashboard blogger, lalu pilih menu Tema kemudian Edit HTML.
2. Kemudian copy kode dibawah ini, lalu pastekan tepat diatas kode </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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYiRzsnDtBmhOVLD4AHZmr5CPmw5KtMdJxFOapNiIatW1SKB7G1_6Azccx_VwPU-mquAMvT0lXKB-4MC1oA3C0QYVILQ4e3NyKnRXEkSIIWMGgC4ALS7uBwDqYgAfij-g5LH0zrqjr8jf7/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script>  

3. Jika sudah, jangan lupa klik Simpan Template.

Script Lazy Load tersebut dapat meringankan halaman yang memiliki artikel panjang dan banyak gambar. dengan menggunakan lazy load ini, gambar hanya akan di load/muat setelah pengunjung scroll/menggulirkan halaman kebawah.

Nah, itu dia Cara Mudah Mempercepat Loading Blog dengan Lazy Load. Semoga bisa bermanfaat. Selamat mencoba.

Berbagi :