Cara Mudah Memasang Script Lazy Load Gambar di Blog untuk Mempercepat Loading Blog - Otak Kita

Cara Mudah Memasang Script Lazy Load Gambar di Blog untuk Mempercepat Loading Blog



Otak Kita - Cara Mudah Memasang Script Lazy Load Gambar di Blog untuk Mempercepat Loading Blog, yah sudah lama admin gak upload tentang blogger , sekarang waktunya untuk upload lagi , yaitu cara memasang lazy load adsense, nah untuk cara menggunakan lazy load js dan cara memasang lazy load gambar sangatlah begitu mudah, Penggunaan banyak gambar di dalam sebuah blog yang dapat membuat proses pemuatan blog menjadi berat dan lemot ketika halaman blog tersebut diakses oleh pengunjung. Pemuatan / loading dalam blog yang berat dapat membuat para  pengujung pergi dan meninggalkan halaman blog begitu saja tidak betah karena loading blog yang begitu lama.

Google sendiri menyarankan kepada para pemilik website maupun blog, untuk mengoptimalkan sebuah pemuatan halaman situs agar menjadi lebih cepat dan ringan ketika diakses oleh para pengunjung. Situs yang baik adalah situs web maupun blog yang memiliki kecepatan loading maksimal 5 detik. Apabila sobat blogger mempunyai blog dan memiliki kecepatan pemuatan lebih dari 5 detik, ada baiknya sobat mengoptimalkan tampilan sobat agar cepat dan ringan kembali.

Mengapa blog sobat harus memiliki proses pemuatan yang cepat dan ringat? berikut ini, admin jelaskan beberapa alasan kenapa blog Sobat harus memiliki akses pemuatan yang cepat.


  1. Blog dengan pemuatan akses yang lama dapat membuat penurunan visitor karena pengunjung cepat bosan menunggu ketika halaman termuat semua
  2. Blog dengan pemuatan akses yang lama dapat mempengaruhi kecepatan index artikel yang sobat buat
  3. Google lebih suka pada sebuah situs website maupun blog yang memiliki pemuatan ringan, seperti yang kita ketahui semua bahwa Google selalu berusaha untuk memberikan kenyamanan pengguna.


Lalu apakah bisa mempercepat Loading Blog sobat ? , tentu jawabannya bisa , dengan sobat menggunakan script Java Script lazyload , yang nantinya mengcompres gambar , maupun kode java script yang ada di blog sobat , agar mempercepat loading blog sobat ,nah untuk nama scriptnya ini yaitu script Lazy Load nah script Lazy Load ini banyak macamnya , akan tetapi admin akan memberikan yang script lazyload untuk Gambar dulu

Tetapi seperti biasa , apakah sobat sudah mengetahui apa yang dimaksud dengan script Lazy Load ?
jika belum mari sama - sma kita simak apa itu Lazy Load
Apa yang dimaksud dengan Script Lazy Load? sebuah java script yang digunakan untuk menyembunyikan suatu gambar sementara. Gambar akan muncul dan dimuat ketika pengunjung mengulir atau menscroll halaman blog sobat kebawah.

Dengan sobat menggunakan script Lazy Load dapat membuat proses pemuatan halaman blog sobat menjadi lebih cepat dan ringan, ini dikarenakan pengunjung tidak memuat semua data (gambar) yang ada dihalaman blog sobat dan data yang sebelumnya tidak dimuat, akan termuat secara otomatis ketikan pengunjung blog sobat menggulir halaman blog kebagian bawah.

Lalu bagaimana cara memasang dan menggunakan Lazy Load kedalam Blog? buat sobat yang tertarik untuk memasangnya agar halaman blog sobat lebih cepat dan ringan ketika diakses oleh para pengunjung. Sobat dapat mengikuti langkah - langkah berikut ini:



  • Pertama sobat buka dashboard blog sobat dan pilih tab Template > Edit HTML.
  • Setelah itu sobat cari kode script </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
  • Kemudian silahkan sobat copy kode dibawah ini dan taruh diatas kode yang head tadi.



<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://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>


  • Terakhir silakan Sobat klik tombol Simpan perubahan
Nah itulah bagaimana cara memasang dan menggunakan Script Lazy Load gambar untuk mempercepat loading blog sobat , mungkin pada kesempatan kali ini admin hanya bisa membagi tutorial ini , semoga bermanfaat ya
Salam Blogging,

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel