Percepat Loading Blog dengan Plugin Lazyload

Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gambar asli pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu tidak mungkin bisa dilakukan. Plugin ini tidak bisa hanya ditempel begitu saja:

Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. — Changelog #1.6.0

Alternatif yang lebih sederhana untuk mengetahui cara kerja plugin ini bisa dibaca pada halaman ini ⇒ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Jika kalian mengunjungi Google untuk mencari gambar, mungkin kalian akan menemui situasi semacam ini saat hasil penelusuran gambar ditampilkan:

Lazyload pada Google
Halaman penelusuran gambar Google.

Itu adalah salah satu cara Google untuk mempercepat muat halamannya walau dengan hasil temuan gambar yang begitu banyak. Setiap gambar yang masih berada di bawah layar (sebut saja begitu) tidak akan diakses, melainkan hanya akan digantikan dengan sebuah gambar kelabu. Sampai sesaat kemudian layar digulung ke atas dan gambar-gambar kelabu di bawahnya muncul, gambar-gambar kelabu itupun akan menghilang lalu mengubah dirinya menjadi gambar yang asli. Dan, ya, itu adalah sistem Google yang sempat membuat Saya sangat terkesan. Dengan cara ini, maka kita tidak perlu lagi mengeklik tautan Halaman Sebelumnya atau Halaman Berikutnya, kita cukup menggulung layarnya saja ke atas dan gambar-gambar di halaman sebelumnyapun masih tetap ada pada tempatnya. Tidak perlu membolak-balik halaman, dan tentu saja itu akan lebih menghemat waktu dan biaya.

Anda juga bisa menerapkan sistem ini ke dalam blog. Diutamakan untuk blog-blog yang memiliki begitu banyak gambar dalam satu halaman. Percaya tidak percaya, sistem ini hanya melibatkan JQuery

Masuk ke tab Rancangan, kemudian pilih Edit HTML.

Pertama-tama, pastikan dulu bahwa blog Anda sudah dilengkapi dengan JQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, salinlah skrip tersebut, kemudian letakkan di atas kode </head>

Setelah itu salin juga kode ini, lalu letakkan tepat di bawah skrip tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'></script>https://github.com/tuupola/jquery_lazyload/commit/3f123e96020e9678af15bbf57bf0787339c8eaa5
<script type='text/javascript'>
$(function() {
  $('img').lazyload({
    placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    effect      : "fadeIn",
    threshold   : 500
  });
});
</script>

Klik Simpan Template dan selesai sudah.

Anda lihat URL gambar yang Saya beri tanda itu? Itu adalah gambar kelabu yang Saya maksud. Coba saja akses URL tersebut, Saya jamin Anda tidak akan mememukan apapun kecuali hanya sebuah titik kelabu. Ya, itu adalah gambarnya. Ukurannya hanya 1 × 1 piksel, jadi tidak akan memberatkan.

28 Komentar

  • Unknown

    manteb mas :D sip2 blogny keren thanks buat infony
    visitback y

  • Unknown

    kok gk fungsi sob?

  • Unknown

    uda fungsi sob, thank ye ---

  • IZAL

    cihuyy.. informasi baru.. thanks om hompimpa.. :p

  • Unknown

    Kok nggak berhasil ya? mohon pencerahannya Mas

  • Taufik Nurrohman

    @Mivt elRahman Kok di blog Saya bisa ya? Hehe... :p
    Yang selama ini Saya lihat sih memang masalahnya ada di gambar. Berat sekali pemuatannya:

    Selain itu juga untuk latar ini: http://themes.googleusercontent.com/image?id=1JnaUR617vN187sHsY6g8xNVF6pVifULShzBF9uPMSFikevM4uUZDbk_YpKb1eq7yvnoA besar sekali. Sampai 100KB :'( Jadi membuka halaman rasanya seperti mendownload lagu. Dilihat dari bentuk URLnya saja juga bukan merupakan URL searah (maksudnya URL yang memiliki akhiran nama file seperti .jpg, .png dan .gif). Lebih baik diganti saja sama pattern yang kecil kemudian diduplikasi.

    Saya tidak begitu tahu cara kerjanya, tapi Saya rasa untuk tipe URL yang mengarahkan ke gambar tapi URLnya tidak berakhir dengan ekstensi gambar biasanya membutuhkan komunikasi yang rumit terlebih dahulu sama hostnya (dalam hal ini: http://themes.googleusercontent.com)

    Atau mungkin ini juga karena JavaScript. Kalau JavaScript terasa lambat, coba pindah letaknya dari yang tadinya di atas </head> menjadi ke bagian paling bawah (di atas </body>). Setidaknya, diharapkan peramban akan berhasil membaca yang cepat terlebih dahulu. Sedangkan untuk bagian-bagian yang cukup berat akan diakses belakangan.

  • Unknown

    Iya mas, itulah makanya. Aku juga kesel. Tapi untung ada artikel ini: http://hompimpaalaihumgambreng.blogspot.com/2012/04/optimasi-thumbnail-pada-auto-read-more.html
    Jadi membantu sekali.

  • Anonim

    Mas maksudnya threshold apaan ya....? :p ~x(

  • Putra

    harus jquery/1.4.3/ ? yayayah? :/

  • Taufik Nurrohman

    @Alam Perwira Nggak juga kok. Saya pakai versi 1.7.2 juga masih jalan » Lihat Demo!

  • Putra

    @Taufik Nurrohman efek di blog saya maslahnya gak terasa 100% soalnya, masih ragu brhasil kagaknya :D

  • Unknown

    Mas Taufik, ko aku malah gambar di blog aku malah jadi kaya yng ditunjukan gambar ini... Padahal loading sudah selesai mas ???
    apanya ya mas ???

    apakah gambarnya terlalu berat ya mas taufik... :(

    • Surga Kenari

      nah ini kasus sama seperti saya, mirip.

      tepat di element posting, gambar ga muncul padahal sdh di gulung..

      jadikanpinter.blogspot.com/2012/07/suatu-saat-insya-allah.html

      tapi buat sidebar dll. setelah di gulung sih aman(nongol)

      @_@ jadi bingung buat masalah yg satu ini..

      ada solusinya kah mas Taufik?

  • Taufik Nurrohman

    @trii waluyo Mungkin akses internetnya. Gambar asli baru bisa tampil kalau layar digulung. Coba gulung-gulung sampai tampil. Kalau tetap tidak tampil berarti ada yang salah. Tapi kalau JQuery sudah bisa mengganti gambar asli menjadi gambar dari nilai placeholder harusnya sih jadi.

  • Surga Kenari

    pak gue udah pasang, tp gue masih ga ngerti sama cara kerjanya??

    wkwkwkw... blom faham betul nih

  • Surga Kenari

    pak yg value 500 itu maksudnya apa?

    threshold : 500

  • Taufik Nurrohman

    @Isnan Nugrah Lastiko Itu batas minimum pemicu pemuatan gambar. Kalau nggak salah, gambar placeholder akan berubah menjadi gambar asli saat jarak tengah layar berada 500 piksel di atas gambar target. Kalau nggak salah begitu. Cek dokumentasinya: http://www.appelsiini.net/projects/lazyload

  • Surga Kenari

    ohh makasih pak penjelasannya

    gue sempet rubah jadi 1,

    tapi mending gue rubah lagi ajah ya value nya menjadi 500

    hehe

  • tes

    mas apa beda jquery 1.7.2 dengan versi lain ?

    • Taufik Nurrohman

      Itu cuma sejarah versi pembaharuan saja. Semakin baru semakin bagus.

  • tes

    heheheh makasih mas :D saya setiap hari mantau ke sini :D mencari hal2 baru

  • IM

    berhasil di semua blog saya :D \o/

  • Unknown

    om mau tanya, ada pengaruh nya gak sih ke SEO?
    soal nya, untuk alt nya kan kita ganti jadi loading?
    bertentangan sama ilmu seo...
    :p

  • neylan

    http://reader-download.googlecode.com
    tidak bisa diakses
    bagaimana solusinya

  • Anonim

    di blog saya terbalik mas, untuk gambar profil yang tadinya sudah termuat ko berbubah menjadi abu tetapi untuk di komentar saja untuk yang lainnya normal-normal saja. boleh dikasih pencerahannya mas?

    • Taufik Nurrohman

      Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gambar asli pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu tidak mungkin bisa dilakukan. Plugin ini tidak bisa hanya ditempel begitu saja:

      Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. — Changelog #1.6.0

      Alternatif yang lebih sederhana untuk mengetahui cara kerja plugin ini bisa dibaca pada halaman ini ⇒ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

      • you

        terima kasih mas atas tanggapannya.. v sudah kembali normal.. ternyata ada salah sedikit... mhon jawab cara menampilkan input pada emoticon ya mas.. terima kasih sebelumnya

  • Anonim

    ini berfungsi untuk semua gambar di halaman blog kita ya pak?? otomatis akan terload abu2 sampai proses halaman bener2 selesai?

Komentar telah ditutup.