Saturday, November 26, 2016

Cara Mempercepat Loading Blog Dengan Lazy Load

Cara Mempercepat Loading Blog Dengan Lazy Load - Salah satu dari 200 Faktor SEO google adalah kecepatan loading, semakin ringan dan cepat loading suatu blog maka akan semakin baik di mata google dan tentu saja itu akan menambah nilai seo dari blog itu sendiri.

Pernahkah anda mengunjungi satu blog yang loadingnya lama dan apakah anda merasa nyaman? jawabanya pasti tidak, saya sendiri ketika mengunjungi satu blog yang loadingnya lama akan lebih memilih untuk menutupnya dan mencari sumber bacaan lain.

Jadi bisa disimpulkan loading blog yang lama akan membuat pengunjung blog kita kabur dan tidak jadi membaca artikel yang kita posting di blog, bagi seorang blogger pembaca itu adalah raja jadi dalam hal ini kenyamanan pembaca harus jadi prioritas utama kita agar pengunjung betah.

Loading blog yang lama telah menjadi penyebab yang cukup besar untuk membuat pengunjung mengurungkan niatnya untuk membaca, oleh karena itu kita harus segera mengatasinya.
Jika loading blog anda termasuk berat atau lemod, kita bisa mengakalinya dengan menyisipkan kode jquery ke dalam template, kita bisa menambahkan Lazy Load untuk membuat loading blog menjadi lebih ringan daripada sebelumnya.

Baca juga: 4 Tips Brilian Jadi Blogger Profesional

Ada banyak kode lazy load yang bisa kita temukan di postingan tutorial tetapi jangan sampai salah pilih, anda harus melakukan pengecekan kecepatan sebelum dan sesudah memasang lazy load karena berdasarkan pengalaman, tidak jarang saya menemukan kode lazy load yang tidak ada efeknya sama sekali, justru kode yang tidak ada efeknya itu malah memberatkan loading blog karena adanya penambahan zonk kode di template.

Tapi tenang saja kode lazy load yang akan saya share ini adalah kode yang aktif alias bisa memberikan efek meringankan loading blog.

Cara memasangnya cukup mudah, anda hanya perlu menyisipkan kode di bawah ini tepat di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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/AVvXsEg7KEPxOoPKJqlp2llsLpfJlFW_tkY0734pIxc3IQxXoJplWOc985w6EQEBk_PKqG4YzhxfT6NxxslU0xDWBRaTD9GwGfISajEqP89TQLekw4ftdGOiijTcurhPAjXWxNu1x-OdVmHtTbU/s1600/aakshare.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Silahkan anda copy kode di atas dan pastekan tepat di atas kode </body>.
Cara cek kecepatan loading blog bisa mengunjungi halaman ini https://developers.google.com/speed/pagespeed/insights 

Dilihat dari hasilnya kecepatan blog saya ini bertambah 6 poin dari 70 menjadi 76 , meski masih banyak yang perlu di perbaiki agar lebih ringan lagi tapi kenaikan 6 poin ini terbilang lumayan dan mampu membantu menaikan performa blog.

Silahkan baca: Cara Cek Broken Link Secara Cepat

Demikianlah tips cara meringankan loading blog dengan menggunakan Lazy Load, semoga blog anda bisa menjadi lebih ringan.

No comments:

Post a Comment