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

Konten yang kamu baca gratis! Tapi kamu boleh kok kasih tip biar kreator hepi dan makin semangat update bikin konten edukasi buat Kamu;
10k 20k 25k 50k 100k 150k

Cara Mempercepat Loading Blog Dengan Plugin Lazy Load Di Blogger.com
Credit Picture: Freepik.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:"http://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/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?

Suka dengan konten ini? Yuk kasih rating terbaikmu atau kirim tip donasi sebagai bentuk apresiasi kepada kreator;


10k 20k 25k 50k 100k 150k

Disclaimer untuk pembaca;

Hak Cipta Konten

Semua lisensi hak cipta kepemilikan konten yang ada di website ini adalah milik Daily Blogger Pro. Dilarang menjiplak (Copy-Paste), Mencuri Konten, atau Diterbitkan Ulang di Website atau blog lain. Apabila kamu ingin menggunakan konten kami sebagai referensi karya ilmiah baik itu; jurnal, skripsi, buku komersil, harap ajukan izin terlebih dahulu kepada admin website DBP.

Aturan Berkomentar

Pembaca bebas berdiskusi dan konsultasi terkait materi edukasi sesuai topik konten. Semua komentar akan dimoderasi dan hanya komentar yang relevan saja yang akan terbit, untuk komentar spam yang dikirim spammer, maaf, komentar Anda tidak akan lolos dan semua link aktif di komentar sudah dinon-aktifkan melalui sistem website kami.