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

Artikel Terkait

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

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel