Mempercepat Loading Blogger : jQuery Lazy Load Plugin


Ada banyak faktor kenapa lalu lintas blog kehilangan pengunjung, salah satunya adalah kecepatan loading blog yang memerlukan waktu lama. Hal seperti ini benar-benar akan berdampak buruk buat blog Anda, jadi penting buat Anda untuk memperhatikan beban dari template blog Anda. Salah satu yang membuat blog kita loading lebih lama karena gambar atau photo, lantas apa kita tidak harus menggunakan gambar untuk blog kita? Tentu saja tidak, seharusnya kita harus mengambil suatu langkah tertentu sehingga beban dari blog kita berkurang dan tampil lebih cepat.

Nah, pada posting ini saya akan berbagi satu tips untuk mempercepat loading blog Anda dengan menggunanakan Plugin jQuery Lazy Image Load. Cara kerja plugin ini adalah memperlambat atau menunda loading gambar di blog Anda. Gambar yang muncul hanya pada halaman yang terlihat dan gambar yang lain akan terlihat saat kita mengscroll halaman blog ke bawah. Dengan begitu loading blog akan lebih cepat dan dalam beberapa kasus tertentu dapat membantu mengurangi beban server. Untuk lebih jelasnya silahkan kunjungi Appelsiini.

Artikel Terkait :


  • Menambahkan Judul dan Atribut Alt Di Gambar Posting Agar Lebih SEO

 

Cara Install Lazy Image Load di Blogger



  1. Login  ke Blogger Anda
  2. Klik Temlate dan pilih Edit HTML
  3. Cari tag </head> gunakan Ctrl+F untuk mencari
  4. Selanjutnya salin javascript dibawah ini tepat sebelum tag </head> 

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

5. Langkah terakhir klik Simpan template - selesai !

Dengan menyelesaikan langkah diatas Anda telah berhasil menginstall lazy image load diblog Anda. Akhir kata semoga tips yang mudah ini bermanfaat buat Anda dan jangan lupa untuk memberi 1+, like atau share posting ini.
Comments

11 comments:

  1. Wah ntar aku install ah :D ini yang terbaru mas jquerynya?
    zakiiaydia.com

    ReplyDelete
  2. Mantaaab,,, Nambah ilmu blogging nie :)

    ReplyDelete
  3. Tutorial'ny sangat bermanfaat Sob, thnkz..

    ReplyDelete
  4. wah dengan ini blog saya bisa lebih cepet nih...
    thanks for share gan

    ReplyDelete
  5. ternyata mempercepati loading blog bisa menggunakan jQuery,, Nice Info sob

    ReplyDelete
  6. wah menarik nih kayanya.
    makasih sob atas infonya nih.

    ReplyDelete
  7. ternyata gak sesulit yang saya kira.,
    tinggal copas script aja.,.,
    thanks ya gan.,
    jangan lupa untuk berkomentarbalik di postingan terbaru saya.,.,

    ReplyDelete
    Replies
    1. iya memang mudah dan simple kok untuk mempercepat loading blog, siap meluncur

      Delete
Related posts

Masukan Email Anda Untuk Mendapatkan Update

Translate

Sedikit Motivasi

Tak selalu orang terpintar yang mendapatkan yang terbaik; orang yang mempunyai kegigihan membaca, orang yang terus bertahan dan tak pernah menyerahlah yang mencapai sukses.

Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN"
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf
Jika anda gagal dalam melakukan sesuatu, hanya satu yang harus anda lakukan, "TRY AGAIN" - See more at: http://blogjomblongenes.blogspot.com/#sthash.UYtxUzZP.dpuf

Total Pageviews

Judul Widget 35

Guestbook
Other
OrnoX (remake) design by Dark Ard | All rights is reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other