Mempercepat Loading Blog dengan Memasang Lazy Load

Dengan Salah satu masalah yang sering dialami oleh para Blogger adalah loading blog yang kurang optimal. Memaksimalkan loading blog sangatlah penting karena akan berpengaruh terhadap visitor yang berkunjung di blog kita. Oleh karena itu untuk mengoptimasi sebuah blog disarankan (bukan berarti wajib) untuk memasang atau menambahkan plugin Lazy Load.

Mempercepat Loading Blog dengan Memasang Lazy Load

Lalu, Apa Itu Plugin Lazy Load ?

Lazy Load adalah sebuah script yang akan menunda pemanggilan file sebelum adanya aktifitas tertentu yang dilakukan. Dengan kata lain fungsi dari Lazy Load adalah untuk menunda pemuatan gambar, video atau komponen lain di halaman web dan akan dimuat ketika pengunjung melakukan scroll. Sehingga dengan pemasangan plugin ini dapat mempercepat loading pada blog.

Apa Dampak Jika Menggunakan Plugin Lazy Load ?

Jika kita memasang plugin Lazy Load pada blog kita akan membuat loading pada halaman web menjadi lebih cepat dan juga dapat membantu mengurangi beban server. Tentunya hal ini akan berpengaruh terhadap visitor yang berkunjung karena blog menjadi lebih cepat diakses dan tidak membutuhkan waktu yang lama untuk memuat seluruh halaman. Dan plugin ini sangat cocok untuk blog tutorial yang rata-rata meyisipkan gambar dan video pada postingannya.

Cara Pasang Plugin Lazy Load di Blogger

Untuk memasang plugin Lazy Load sangatlah mudah dan script ini sudah diterapkan di blog Kang Tutorial. Jadi untuk demonya silahkan berselancar di blog ini.

1. Login ke akun Blogger, lalu pilih Tema > Edit HTML

2. Tambahkan kode berikut ini sebelum atau diatas kode </body>

<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://4.bp.blogspot.com/-cM8N_WT7cHk/XHNW4jeDUbI/AAAAAAAAFfg/0H2JKqJgl8U4orM9kkKrHbzdDR0HaTNlgCLcBGAs/s1600/kangtutorial.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Mempercepat Loading Blog dengan Memasang Lazy Load

3. Kemudian pilih Simpan

Sekian artikel tentang cara memasang Lazy Load di blogger dan dan silahkan cek kecepatan blog kalian (hapus terlebih dahulu cache browser). Apabila masih kurang paham silahkan bertanya di kolom komentar. Terimakasih dan semoga bermanfaat
Buka Komentar
Tutup Komentar

Belum ada Komentar untuk "Mempercepat Loading Blog dengan Memasang Lazy Load"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel