Home » Tips and Trick » Tutorial » Cara Mempercepat Loading Blog dengan jQuery Lazy Load Plugin

Thursday 2 April 2015

Cara Mempercepat Loading Blog dengan jQuery Lazy Load Plugin

19:15  ,  

image

Cara mempercepat loading blog kali ini yaitu dengan menggunakan script jQuery Lazy Load Plugin. Mungkin Anda merasakan bahwa blog Anda begitu sangat lambat sehingga pengunjung merasa kurang nyaman sehinnga Anda akan kehilangan visitor karena beban blog yang terlalu lambat yang menyebabkan blog Anda menjadi lambat. Pengunjung akan suka dengan blog Anda jika blog Anda memiliki artikel yang bermanfaat tentunya dengan loading blog yang cepat. Pada kesempatan kali ini NTechno akan menjelaskan cara mempercepat loading blog dengan menggunakan script jquery lazy load. Script jQuery Lazy Load merupakan salah satu plugin yang ada pada wordpress tetapi kali ini akan saya jelaskan untuk blog agar loading blog Anda menjadi lebih cepat dari sebelumnya. Dengan mempercepat loading blog Anda menggunakan script jquery lazy load ini juga termasuk salah satu Optimasi SEO On Page karena mengedit atau menambahkan beberapa kode script pada kode script blog Anda. Silahkan Anda juga bisa mengeceknya seberapat berat blog Anda dengan mengklik ini Speed Test .

Ada beberapa faktor yang menyebabkan blog Anda menjadi lama loadingnya atau sangat berat sehingga memerlukan waktu yang cukup lama untuk mengakses website atau blog Anda, namun faktor-faktor tersebut akan saya bahas di artikel selanjut tentang Penyebab Loading Blog Menjadi Lama. Untuk mempercepat loading blog Anda hanya perlu mengcopy dan paste script jQuery lazy load plugin ini pada script blog Anda. Fungsi dari script ini untuk meringankan loading blog Anda sehingga tidak memerlukan waktu yang cukup lama untuk mengakses blog Anda. Langsung saja bagaimana cara mempercepat loading blog ?
Silahkan simak penjelasannya di bawah ini mengenai cara mempercepat loading blog :

<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)&amp;&amp;!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("").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().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>

1. Login ke Blogger.com
2. Klik Template => Edit HTML
3. Cari tag </head> (gunakan Ctrl + F untuk mempercepat pencarian)
4. Copy javascript yang ada di atas 
5. Letakan kode javascript sebelum tag </head> atau di atas tag </head>
6. Klik Simpan Template
7. Cek kecepatan loading blog Anda disini Speed Test . 

Sekian artikel mengenai Cara Mempercepat Loading Blog oleh NTechno . Kurang lebihnya mohon maaf.
Semoga Bermanfaat ^^


Masukan email Anda untuk Dapatkan Update terbaru dari Newbie Techno.Gratis!
Share this article to your friends