Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Memasang Lazy Load Image di Blogger / Blogspot

Cara Memasang Lazy Load Image di Blogger

Cara Memasang Lazy Load Image di Blogger / Blogspot - Pada umumnya gambar merupakan salah satu atribut terpenting yang sering digunakan untuk keperluan, melengkapi sekaligus memperindah tampilan blog contohnya seperti: logo header, thumbhail postingan, banner afiliasi dan sebagainya.

Dan salah satu niche blog yang mengharuskan untuk menggunakan banyak gambar adalah tekno atau tutorial. Yang mana mereka diharuskan untuk menggunakan gambar yang tidak sedikit pada setiap postingan mereka untuk memperjelas serta mempermudah bagi pengunjung yang sedang mencari informasi yang ingin mereka terapkan.

Namun bagaimana kalau blog tutorial tidak menggunakan gambar sama sekali?. Tentu saja hal tersebut akan sangat berpengaruh terhadap para pengunjung yang sedang membacanya. Karena kebanyakan orang khususnya warga (+62) akan sangat kebingungan apabila hanya di suruh untuk mem-praktekan tutorial berupa kata-kata saja.

Tapi kan menggunakan banyak gambar bisa mempengaruhi loading blog?. Nah, mungkin salah satu alasan inilah yang membuat kebanyakan blog tekno/tutorial diluar sana tidak memakai gambar atau memakai hanya sedikit gambar.

Memang memakai banyak gambar dapat mempengaruhi kecepatan dari blog dan setiap halaman blog. Namun apabila kita sudah tahu bagaimana cara mengoptimasi gambar dengan baik sebelum digunakan pada setiap postingan blog, maka tidak akan mengganggu performa pagespeed blog.

Dan salah satu cara untuk mengoptimasi kecepatan loading blog agar lebih cepat khusunya di blogger adalah dengan cara memasang Lazy Load Image. Namun sebelum itu ada baiknya disini kalian membaca terlebih dahulu mengenai penjelasan tentang lazyload image.

Apa itu Lazy Load Image?

Lazy Load Image adalah plugin serta teknik yang dapat membantu untuk menunda pemuatan gambar pada suatu halaman web/blog. Maksudnya, gambar yang tidak diperlukan di awal tidak akan dimuat sebelum seorang pengguna melakukan scrolling pada halaman tersebut.

Fungsi Lazy Load Image

Fungsi dari script Lazy Load Image ini tidak jauh berbeda dengan Lazy Load Adsense, yang mana dapat membatasi pemuatan gambar yang tidak diperlukan pada halaman awal. Sehingga bisa menunda pemuatan gambar yang tidak terlihat oleh pengguna pada saat halaman dimuat, yang mana gambar tersebut akan dimuat apabila pengguna menggulirnya (scroll). 

Namun jika tidak melakukan scrolling ke bawah maka gambar tidak akan pernah dimuat. Jadi kesimpulan dari fungsi memasang Lazy Load di blog adalah bisa menunda pemuatan gambar yang tidak terlihat pada halaman awal, sehingga dapat mengoptimalkan performa loading blog.

Keuntungan Memasang Lazy Load Image

  • Loading Blog Menjadi Lebih Cepat dan Optimal
  • Memerbaiki Skor Kecepatan Loading Blog di PageSpeed Insights dan GTmetrix
  • Mengatasi masalah Leverage Browser Caching

Cara Memasang Lazy Load Image di Blog

Apabila sudah membaca semua pengertian tentang Lazy Load Image dari Fungsi sampai Keuntungannya, langsung saja berikut ini adalah langkah cara untuk memasang lazy load image di blogger atau blogspot : 

1. Pertama-tama masuk ke halaman Dashboard blogger kalian.

2. Selanjutnya masuk ke TemplateEdit HTML.

3. Kemudian tekan CTRL+F untuk mencari kode </body>.

4. Setelah itu Letakkan kode Script Lazy Load Image berikut tepat diatas kode </body> tadi.

<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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>

5. Jika sudah langsung tekan Simpan Tema.

Setelah memasang scriptnya jangan lupa untuk mengecek apakah sudah bekerja dengan baik atau belum. Caranya kalian bisa akses blog yang sudah kalian pasang lazyload image.

Jadi itulah cara memasang lazy load image di blog, pastikan kalian melakukan langkah cara tersebut dengan benar supaya tidak mengalami kerusakan pada template blog. Dan untuk mengantisipasi hal-hal yang tidak di inginkan kalian bisa melakukan pem-backup-an template terlebih dahulu.

Penutup : Baiklah mungkin segitu saja pada postingan kali ini mengenai Cara Memasang Lazy Load Image di Blogger / Blogspot, semoga bisa bermanfaat. Dan jangan lupa juga ikuti terus blog Tutorapik.com untuk mendapatkan artikel menarik dan bermanfaat lainnya pada kesempatan selanjutnya.