Mempercepat Loading Halaman Page

Dipagi yang cerah ini setelah saya mengganti template lama dengan yang sekarang, rasanya ingin berbagi ilmu dengan sobat AjatShare. Sewaktu bereksperimen dengan berbagai macam template saya menemukan salah satu cara untuk Mempercepat Loading Halaman Page yang simple namun cukup efektif yaitu dengan cara memasang script lazy load pada blog kita. Memang banyak cara untuk mempercepat loading blog kita, seperti dalam posting saya sebelumnya yaitu dengan mengkompress kode css atau dengan cara membuat blog menjadi valid html5 ataupun valid css3. Nah pada kesempatan ini saya akan membahas Lazy Load Script.

Lazy Load Script ini merupakan script yang membuat kinerja pemuatan blog berjalan secara efektif, dengan adanya Lazy load ini blog kita akan memuat element element penting dahulu , yang membuat elemet gambar akan dimuat terakhir, memang terlihat blog kita lebih cepat dengan memakai ini tetapi menurut saya sama saja namun jika kita memakai ini blog kita akan langsung terlihat (tidak lama blanknya).

Mempercepat Loading Halaman Page :

1. Masuk Ke Dasboard , Rancangan di pilih edit HTML
2. Centang Expand Template Widget, dan tunggu
3. setelah menunggu copy paste kode berikut diatas kode </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> 
<script charset='utf-8' type='text/javascript'> 
$(function() { 
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHzFGhuBntfVIcYF6m0YiuX1LIh__yetE_d6htg6Mpm9EsRi1JM6zHYOLnPzn3Low7t7QNN2Vc8c3VWVQcZl-3MWDf3wDsllcI77QRYeac1ktnewpe-MYAof6F9VVMaglUEDgx1mH3qrA/&quot;,threshold : 200}); }); 
</script> 

   atau bisa juga dengan menggunakan kode script di bawah ini :

<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3gq3oPPPjR7VzGjvQ1ahqa-uYt2jeQeWFHRSj-nVtWy7fBOtW8b-ghT7pRUc1eKvVxW7nu2htQ0ta2_Aonljd7vJQNGuI2ZXvp-wdAeWCwUJTYniry8OrDsYJZDW50Q9QTTpmeI9cHE/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})
//]]></script>

4. Simpan Template

SHARE SHARE SHARE

Unknown

• 
• 
• 
• 
•