Cara Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger

Salah satu permasalahan yang sering kita temukan dan selalu menjadi keluhan blogger  adalah kecepatan loading halaman blog. Mereka sering memunculkan sebuah pertanyaan-pertanyaan bagaimana sih caranya untuk mempercepat loading blognya? Hampir beberapa para mastah menyarankan untuk menghapus CSS dan JavaScript yang tidak digunakan / sama sekali tidak berguna untuk blog kamu.


Penting atau tidaknya kecepatan itu? Kecepatan blog kamu sangat berpengaruh untuk visitor / pengunjung kamu, Kenapa? Karena dengan mempunya kecepatan yang bagus visitor pun menjadi nyaman berkunjung di blog kamu. Lalu bagaimana sih cara meringankan blog tanpa harus berkorban banyak untuk elemen-elemen dalam blog tersebut?

Sebelum kita memasuki pembahasannya, kali ini saya ingin memberitahukan apa sih itu Lazy Load ?

Apa Itu Lazy Load ?

Lazy Load adalah sebuah teknik yang menunda pemuatan blog dari resource yang tidak penting pada waktu pemuatan halaman. Biasanya lazy Load ini hanya memuat iklan dan gambar apabila seorang pengunjung menscrool kebawah.

beberapa kasus kenapa blog kita menjadi berat, dan pastinya beberapa penyebab yang sering terjadi pada kasus yang demikian.

Berikut ini beberapa faktor yang menyebabkan loading blog menjadi lelet, diantaranya sebagai berikut :
  • Halaman terlalu banyak gambar
  • Gambar pada halaman ukurannya terlalu besar, sehingga membutuhkan waktu untuk dimuat
  • Ada resource eksternal yang harus dimuat (misal : Framework, Iframe, CSS, atau JS)
  • Struktur halaman tidak valid, maksudnya tag html yang dimuat tidak sesuai format yang seharusnya. Misal salah meletakkan tag penutup pada heading, atau tag tidak disertai penutup.
  • Faktor eksternal (seperti bandwith hosting, storage hosting, internet down, dll)

Pada 2 poin terakhir ini jarang sekalikita menemukannya terjadi, namun pada poin-poin sebelumnya sangatlah sering terjadi contohnya di blog kamu sendiri.

Cara Mempercepat Loading Blog dengan Lazy Load Gambar

1. Silahkan buka dashboard blogger dan Login dengan menggunakan Email.

Login Email

2. Masuk ke menu Tema > Klik Edit HTML

3. Cari kode </body> dan pasang kode dibawah ini sebelum kode </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>

4. Kalau sudah silahkan klik Simpan dan selesai

Perubahan akan terlihat setelah kamu meng-refresh halaman kamu dan lihatlah perubahannya. Semoga bermanfaat bagi kamu yang memiliki blog yang memiliki kecepatan yang lambat.
Tampilkan Komentar
Sembunyikan Komentar

6 Responses to "Cara Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger"

  1. Thanks infonya gan. bisa dicoba di blog saya nih.

    ReplyDelete
    Replies
    1. Alhamdulillah, selamat mencoba terima kasih sudah berkunjung Chilmi

      Delete
  2. saya belum pernah menggunakan screept ini gan, sudah pernah denger dan baca baca juga artikel nya, hehe thanks infonya, blog nya sangat bermanfaat gan. salam mediaweb4u

    ReplyDelete
    Replies
    1. Alhamdulillah, terima kasih sudah berkunjung kak Eva

      Delete
  3. Thanks gan atas artikelnya bisa dicoba di blog ane nih semoga bisa cepat juga

    ReplyDelete
    Replies
    1. Iya sama-sama gan, Terima kasih sudah berkunjung mas Welcome

      Delete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel