April 10, 2013

Upaya Optimasi Kecepatan Blog Dengan Lazyloader

Pernahkah temen-temen mencari gambar pada google???

Tentu temen-temen pernah melihat bagaimana proses penelusuran gambar tersebut ditampilkan oleh google...



Hal tersebut merupakan sebuah sistem yang diterapkan oleh google untuk mempercepat proses penelusuran gambar yang sangat banyak sehingga gambar-gambar yang masih dalam proses loading akan digantikan dengan sebuah tampilan gambar berwarna abu-abu.

Bandingkan dengan proses loading beberapa gambar pada sebuah blog atau website pada umumnya. Tentu berbeda bukan???


Nah, cara ini pun bisa kita terapkan pada blog milik kita sendiri, terutama bagi blog yang memiliki begitu banyak sekali gambar yang ditampilkan dalam sebuah halaman. Tutorial ini sendiri saya buat setelah saya menerapkan tutorial yang dibuat oleh Mas Taufik, dan ya benar optimasi blog menjadi lebih baik sehingga proses loading beberapa gambar yang banyak muncul dalam sebuah postingan blog saya menjadi lebih baik pula...

Baik, untuk menerapkannya di blog, silahkan ikuti langkah-langkah nya :

1. Login ke blogger.



2. Pilih Template - Edit HTML.






4. Cari kode </head> dan letakkan kode berikut diatasnya :

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

<script src='http://aiizahh.googlecode.com/files/lazyload.js'
type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
    $('img').lazyload({
        placeholder : 
"http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/
ztxIT1Fht4g/s1600/grey.png",
        effect      : "fadeIn",
        threshold   : 500
    });
});
</script>

5. Simpan Template.

6. Enjoy.

* Kode yang diberi garis bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa.

Bagaimana sob, apakah sudah berhasil menerapkannya???
Terima kasih, semoga bermanfaat...

7 comments

  1. artikel anda sangat bermanfaat,tetap semangat dan sukses!

    ReplyDelete
  2. langsung dicoba gan,, sorry baru balik berkunjung

    ReplyDelete
    Replies
    1. silahkan gan...
      terima kasih atas kunjungannya... ^_^

      Delete
  3. bagus nich..ijin copy scriptnya mas buat coba2 nanti.

    ReplyDelete
  4. Wahhh baguss ini gan,,,, jangan lupa berkunjung balik ya...

    ReplyDelete