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'>Silahkan anda copy kode di atas dan pastekan tepat di atas kode </body>.
//<![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>
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