Trik Jitu Cara Mempercepat Loading Blog

Trik Jitu Cara Mempercepat Loading Blog - Tips seputar cara mempercepat loading blog/web mungkin sudah sering anda dengar sebelum. Banyak cara untuk membuat loading blog kita menjadi lebih cepat, misalnya dengan kompresi CSS atau javascript. Nah kali ini saya akan share cara terbaru untuk mempercepat loading blog yang saya dapati dari blognya Mbak Lina. Cara yang dimaksud disini yaitu dengan mempergunakan plugin Lazy Load sebagai salah satu cara dalam optimasi blog. Bagaimana cara penerapannya, silahkan anda simak penjelasannya dibawah ini.

 

Mohon maaf kalau untuk trik ini tidak ada demonya. Yang pasti saya sendiri juga menerapkan penggunaan plugin Lazy Load pada blog ini (silahkan cek di source code). Berdasarkan hasil tes yang saya lakukan di http://gtmetrix.com, dengan pemasangan plugin ini lumayan bisa nambah score page speed blog sekitar 2-3%.

Berikut ini cara mempercepat loading blog dengan Lazy Load :

1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini sebelum </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/AVvXsEiowRpnAH_4ZQ9j2UCEPezqD3NqdtHNjo8FuW6yep53GQJaQvn6MoWjsKhjhiVI9JOBaqN5ODqJz8-0NMb0ib59ps8swVUHvLlPz5AyEolvS1X5jw0eHUluacYijpe2g_lOmZ4WwC22cKKY/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});

//]]>

</script>

2. Simpan template dan lihat hasilnya.