Cara Mempercepat Loading Blog Dengan Plugin Lazy Load Di Blogger.com

Pernah dengar plugin Lazy Load di Blogger? Saya pikir tidak semua penulis blog yang menggunakan platform blogger.com tahu plugin ini, kenapa? Mudah saja, kalau kamu mencarinya di menu tata letak dan widget, atau bahkan di setelan Blogger, saya jamin kamu tidak akan menemukan plugin JQuery Lazy Load, plugin ini memang tidak disediakan di blogger.com.

Oleh karenanya, plugin ini dibuat oleh pihak ketiga, khususnya mereka yang mengerti mengenai web programming. Saya sudah googling banyak web dan blog hanya untuk mencari script plugin Lazy Load yang berfungsi dengan baik, kebanyakan tidak berjalan, baru setelah saya mengunjungi salah satu web yang ahli di bidang web programming bernama Arlina Design, saya mendapatkan script plugin yang terbukti bekerja di template blog saya. Karena saya sudah menerapkan dan merasakan manfaat dari penggunaan plugin Lazy Load, maka dari itu, saya ingin membagikan tips ini buatmu supaya loading blog milikmu bisa ringan dan cepat.

 

Bagaimana cara plugin Lazy Load membantu mempercepat blog milikmu? Plugin ini sangat berguna untuk meringankan beban blog yang memiliki artikel yang banyak menggunakan gambar berkualitas tinggi dalam jumlah banyak. 

Sebagai contoh, mari kita gunakan blog ini sebagai ilustrasinya, hampir seluruh artikel di Daily Blogger Pro selalu menyematkan gambar berukuran maksimal dengan ukuran file besar yang belum dikompres, alhasil, bagi sebagian pembaca yang kebetulan akses internetnya tidak cepat, blog ini akan termuat lebih lama, beda halnya bila plugin Lazy Load sudah diterapkan, pembaca yang koneksi internetnya lambat dan menengah bisa mengakses blog ini lebih cepat karena pembaca, baru akan melihat gambar begitu mereka melakukan scroll ke halaman bawah.

Bagaimana cara memasang plugin Lazy Load di Blogger.com? Mudah saja, kamu hanya tinggal mengikuti panduan berikut ini:

Cara Mempercepat Loading Blog Dengan Plugin Lazy Load Di Blogger.com

Pertama, login ke akun blogger milikmu. 

Kedua, pilih Tema (Template)

Ketiga, pilih Edit Html.

Keempat, tambahkan kode Plugin Lazy Load dibawah ini sebelum </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/AVvXsEgZrbAbK_yRR4A0wqcdlDzmKoWmrp3JI1fQ5bB_YGxnNLfMSqGDVJ6sfeCT-DarMrQWfubB9RrTyLPwAOyCbKCZZq_XQhjmDso3AW6DZpb4qmjtm81-vnf_ZrIIJCP86wxCKK7nTEM_WOJT/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Read: Untuk mempermudah mencari kode </body> di editor Html Blogger, kamu bisa menggunakan fitur pencarian, caranya mudah, kamu hanya tinggal mengklik editor Html dimana saja, lalu tekan kombinasi tombol CTRL + F di editor Html, maka, kotak pencarian kode pun tampil, silahkan masukkan kode </body>, lalu tekan enter, begitu menemukan kodenya, letakkan kodenya sebelum kode </body> ya.

Kelima, simpan template dan lihat hasilnya.

Sebagai penutup, begitu kamu selesai menerapkan plugin Lazy Load di Blogger, maka, kamu akan mendapati gambar di blogmu baru akan termuat begitu kamu melakukan scroll kebawah, optimasi ini cocok sekali untuk blog yang banyak menggunakan ilustrasi gambar dalam setiap artikelnya. Semoga artikel ini bermanfaat untukmu ya. Kamu udah nerapin optimasi Lazy Load di blogmu belum?