Agar Loading Page menjadi Cepat dengan Javascript

adscblog

Memang benar kecepatan sebuah laman ketika di buka menjadi salah satu paktor penentu untuk kesuksesan sebuah blog,semakin cepat loading blog anda maka semakin bagus di mata para pengunjung,bahkan tidak hanya di mata pengunjung saja yang mengharuskan loading blog anda cepat dan ringan,bahkan ketika anda mendaftar kan blog ke Google Adsense salah satu paktor di terima blog anda adalah dengan Loading blog atau kecepatan blog juga

Ada sebagian dari Pari Blogger yang menceritakan pengalaman nya ketika dia mendaftarkan blog nya ke Google Adsense dan di tolak nya karena pengaruh dari Loading blog yang berat atau lambat sehingga Google pun menyarankan agar blog nya menjadi cepat dan ringan

Seperi pada atikel sebelum nya saya pernah share tentang bebrapa cara agar laman blog bisa cepat ketika di kunjungi para pengunjung,dan memang benar untuk mempercepat loading blog banyak cara baik itu mengurangi tampilan Widget,mengurangi ukuran Image ataupun lain sebagai nya

Namun disini saya akan memberikan sebuah Script untuk mempercepat loading blog,dan ini adalah salah satu experimen ketika saya mencoba berbagai template yang saya gunakan di blog yang lain nya dan hasil nya lumayan cukup membanggakan

Loading Halaman/page menjadi cepat dengan Javascript

Javascript ini pernah saya coba di templat yang lain nya dan lumayan bisa membantu untuk loading page nama nya adalah Lazy Load,dengan menambahkan Javascript Lazy Load ini maka loading blog sobat akan terasa berbeda ketika sebelum menggunakan Javascript Lazy Load ini,dan andapun dapat mencoba untuk menggunakan di template sobat yang sekarang di pakai agar lebih Cepat lagi dan loading page menjadi ringan

Untuk penerapan Lazy Load ini lumayan gampang sekali seperti anda menerapkan berbagai Javascript di template anda,namun jika anda masih bingung untuk penerapan nya bisa anda ikuti langkah langkah penerapan nya di bawah ini

• Silahkan anda masuk ke Blogger anda
• Kemudian pilih template > Edit Html
• Setelah anda berada di bagian edit Html kemudian silahkan anda cari kode </head> dan untuk mempermudah pencarian anda silahkan anda tekan Ctrl+F secara bersamaan kemudian letakan kode Lazy Load ini sebelum kode </heda> tersebut

 <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/AVvXsEhTnGP8LBYn8k5xzYY_HeztWmMI1xoobq0f170qKhw94wCC9qdZQ2AAzIVcqoO7Mr79ac26lSD8rDI-4aJ5v8UasGWduXZCCxPqd6FcOHywjxDxYyuygwuWmo6b_trb1WKtojqIbG671xk/&quot;,threshold : 200}); });
</script>

• Kemudian Save template

Namun jika menurut anda Javascript tersebut tidak membawakan efek samping ( tidak membantu loading menjadi cepat ) anda bisa gunakan kode kedua ini dan cara penyimpanan nya sama hal nya Lazy Load yaitu di atas atau sebelum </head>

<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/AVvXsEhoTNoBQ0doRlZuBvvnw-JGJzwoHHndPk67x4TTti-WJij955dR33oWejnRijjHBsP2DtuY54RtMMK5D9YJs8Umu_H9HSYsM_kCWQdc5AKyxqksV-q-H0hdEmSK4RSA42afmprcHQyqrhw/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})
//]]></script>

• Kemudian save template dan lihat hasil nya dengan cara membuka salah satu halam blog anda apakah ada perubahan

Atau sebelum anda menerapkan kedua Javascript di atas,untuk melihat apakah ada perubahan atau tidak nya di blog sobat,alangkah baik nya sobat cek dulu kecepatan loading blog sobat di situs yang menyediakan mengukur kecepatan loading blog,dan kemudian setelah anda menge cek nya lalu banding kan dengan blog yang telah di terapkan Lazy Load tersebut,maka disitu anda akan melihat ada perubahan sbelum dan sesudah di pasangi Lazy Load tadi

Nah itulah agar loading blog menjadi cepat dengan menggunakan Javascript Lazy Load semoga artikel nya bisa membantu sobat blogger,selamat mencoba.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 13 November and have 0 komentar