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

Konten yang kamu baca gratis! Tapi kamu boleh kok, kasih tip donasi minimal 10k sebagai bentuk apresiasi untuk kreator via Lynk.ID / Whatsapp
10k 20k 25k 10k 20k 25k

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 & kirim tip donasi minimal 50k untuk kreator via Lynk ID / Whatsapp ;


50k 100k 150k 50k 100k 150k

Disclaimer untuk pembaca;

Hak Cipta Konten & Aturan Berkomentar

Semua lisensi hak cipta kepemilikan konten yang ada di website ini adalah milik Daily Blogger Pro. Dilarang keras menjiplak (Copy-Paste), Mencuri Konten, atau Diterbitkan Ulang di Website, blog, karya ilmiah (jurnal, skripsi, buku komersil). Aturan berkomentar mudah, cukup komentar sesuai topik artikel, semua komentar akan dimoderasi, komentar yang relevan & tidak SPAM akan diterbitkan.