Cara Mempercepat Loading Blog Dengan jQuery

Assalamu'alaikum wr.wb
Kali ini saya akan menjelaskan tutorial Cara Mempercepat Loading Blog Dengan jQuery

Loading blog lama adalah salah satu faktor blog kehilangan pengunjung, banyak faktor penyebab loading blog menjadi lama, bisa karena banyaknya konten yang terdapat pada blog anda ataupun template yang agak berat. jadi saya sarankan hapus beberapa konten yang anda pikir tidak begitu berguna dan gunakan template yang ringan.

Salah satu faktor lain adalah karena adanya gambar/photo. gambar/photo yang terdapat pada blog anda sangat berpengaruh pada kecepatan loading blog. lantas apa yang harus kita lakukan? apa kita harus tidak menggunakan gambar? tentu saja tidak, kita bisa meminalisir loading gambar dengan jQuery

jQuery akan membuat kita me-load gambar di web atau blog kita ketika di scrol atau di dekati saja sehingga loading untuk memuat halaman dalam satu waktu berkurang.

Langkah-langkah memasang jQuery:

1.  Copy code dibawah ini

<!-- lazy load start www.dabel-x.blogspot.com -->
<script type='text/javascript'>//<![CDATA[
(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:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.dabel-x.blogspot.com -->

2. Login ke akun blogger sobat
3. Klik Template > Edit HTML
4. Cari tag </head>
5. Lalu paste code tadi tepat sebelum tag </head>

Untuk lebih jelassnya bisa kunjungi web applesiini atau web resminya disini jQuery

Semoga bermanfaat!
Wassalamu'alaikum wr.wb