Loading...

Mempercepat Loading Halaman Page


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://lh5.googleusercontent.com/_u4rBCfM4eII/TXksAi6R_OI/AAAAAAAABZY/2k63Mrtswf0/grey.png&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/AVvXsEjjcXN6bdSv0VfMIGTvm2EPbSEoIZylXt4t4UkfsG1Lh6iG9bnbJa0OJvNSC7pqy4t9YIzqQzoUxZMVW9t29ko3QbETEVeXvDry6Dp4TaPqSnAKon_jzl9-5M7dcnuRGLi5MCDT5h1Lt9c/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})
//]]></script>


4. Simpan Template
Masukan email Anda untuk Dapatkan Update terbaru dari AjatShare BloggerPrint PDF
Mempercepat Loading Halaman Page
Mempercepat Loading Halaman Page - written by ajatshare, published at 07:01, categorized as Blogging, Javascript, JQuery, Tips Trik . And have 8 comments
Facebook Twitter Google+ Linkedin Technorati Digg DMCA.com

8 comments

Tambah komentar

Mempercepat Loading Halaman Page

Terimakasih atas tutornya

salam dari blog http://cangkallax-corporation.blogspot.com

Terima kasih sudah berkunjung.

Wah mantap, kalau ane perhatikan, perbedaan kecepatan blog ane dengan yang belum dan sesudah dipasang lumayan jauh gan..

ok, berarti scriptnya bekerja dengan baik.

Makasih petunjuknya sobat,saya sudah menerapkanya dengan baik

  • Berkomentarlah dengan baik, sopan dan sesuai dengan isi konten serta tidak [SPAM].
  • Untuk menyisipkan kode dalam komentar harap di [Konversi] terlebih dahulu.
  • Jika ingin bertanya di luar judul artikel "Mempercepat Loading Halaman Page". Harap menggunakan tombol [OOT].

Forum DiskusiOut Off Topic (OOT)Formulir KontakArsip Blog
-->