Percepat Loading Blog Pada Posting Dengan Memperkecil Avatar Komentar

Loading lambat saat memuat seluruh isi posting, mungkin inilah salah satu faktor yang kurang menyenangkan dari sebuah blog / website. Akan menghabiskan banyak kouta bagi yang tidak gratisan, hehe
Beberapa penyebab dari Lambatnya loading ketika memuat seluruh isi posting adalah:
1. Resolusi gambar posting yang besar dan banyak
2. Gambar emoticon komentar blog
3. Terlalu banyak javascript
4. Resolusi Avatar/Foto Profil komentator Terlalu besar

Dari beberapa faktor diatas, kali ini saya akan memberikan solusi agar loading blog ketika memuat seluruh isi posting jadi lebih ringan, dengan Memperkecil Avatar Komentar atau pada faktor nomor 4. yang lainnya nanti kita bahas pada tutor selanjutnya.

Tutorial kali ini tidak menggunakan CSS melainkan dengan Javascript, mengapa demikian, karena apabila kita mengecilkan ukurannya dengan css,ukuran gambar aslinya masih utuh seperti sedia kala. alias percuma


Nah mungkin disini anda akan melihat satu sosok keunikan dari blogger dalam merubah/menentukan ukuran gambar, simak saja !

Untuk ukuran gambar asli secara global ditandai dengan kode s1600 pada url gambar,, sebagai contoh silahkan klik kanan pada gambar dibawah ini dan pilih lihat gambar, lihat url nya di addres bar

Sory Agak Porno

Sory kalo fotonya porno,
terlihat kan kode nya


Gedi

nah sekarang coba ganti s1600 misal dengan s40, apa yang terjadi ?
mengecil bukan, nah demikian tutorial kali ini, wkwkwk (bercanda)

Sekarang kita langsung saja penerapannya di blogspot,
cari kode </body> copy kode dibawah ini dan letakkan diatasnya.


<script type='text/javascript'>
//<![CDATA[
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s65-c/")).removeAttr('longdesc width height');
});
//]]>
</script>

silahkan atur angka s65 yang saya beri warna merah diatas untuk mengatur ukuran gambar sesuai keinginan.
Script diatas sudah saya modifikasi untuk diterapkan pada Thread Komentar Hack v3 dari kang ismet, untuk Thread Komentar versi yang lainnya, silahkan pelajari sendiri.

Thanks to : Markus Kono

25 Responses to "Percepat Loading Blog Pada Posting Dengan Memperkecil Avatar Komentar"

  1. Ijin coba gan, nice infonya

    ReplyDelete
  2. wah mantap nih lumayan image gambar bisa jadi di compress makasih gan :)

    ReplyDelete
  3. Nah ini memang penting, size image memang bikin loading blog menjadi berat

    ReplyDelete
  4. wah mantep nih caranya wajib di coba gan soalnya blog saya loadingnya lama terimkasih gan sangat lah bermanfaat

    ReplyDelete
  5. Wah Loading Blog Jadi Lebih Cepat :)
    Izin Coba Mas :-bd

    ReplyDelete
  6. Ane pake default aja ah :v

    ReplyDelete
  7. wah cakep nih blog saya lambat,, jadi bisa makin cepet kalau pake tutorial disini :D

    ReplyDelete
  8. Wah mantap gan :-bd izin coba yah gan :D

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. wkwk ancir :v itu ada gambar silit pitik :v ngakak gan..nice nice

    ReplyDelete
  11. mantap nih.... izin nyobakkk akh

    ReplyDelete
  12. \o/ mantab gan
    pingen coba udah malem ni

    lanjut besok aja lah

    ReplyDelete
  13. nah ini yang saya cari :)
    oke, nanti aku praktekin

    ReplyDelete
  14. bisa dicoba nih cara'a, kadang" blog ane lambat, entah dr koneksi atau loading blog'a :D
    makasih gan udah share

    ReplyDelete
  15. wah mantap gan tutorialnya :D skrg blog ane jdi cepat loadingnya :D

    ReplyDelete
  16. Wih Mantep Gan :D
    Ijin Praktek nih :D

    ReplyDelete
  17. Kalau diimplementasikan di thumbnail posting blogger dengan menyesuaikan id/class work ga nih? btw, terimakasih sharenya.. Bermanfaat!

    ReplyDelete
    Replies
    1. bisa, namun ada cara lain, tanpa menggunakan Javascript

      <b:if cond='data:post.thumbnailUrl'>
      <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
      </b:if>

      Delete