GO Blog

Load/waktu muat blog memang mempengaruhi trafic, faktanya pengunjung malas membuka sebuah halaman blog yang menyita waktu load yang lama yang bila mungkin digunakan untuk membuka halaman blog lain bisa sudah membaca beberapa halaman. Maka dari itu, banyak para blogger bekerja keras menerapkan berbagai cara untuk menjadikan blog mereka memiliki waktu muat yang singkat, dengan meringkas css, mengurangi gadget, memperkecil image atau memasang script tertentu.

tapi jangan salah arti, untuk sebuah halaman web/blog yang belum pernah di kunjungi rata - rata akan sedikit memakan waktu muat yang lumayan, tetapi dengan catatan anda baru pertama mengunjungi dan jika sudah untuk kedua dan seterusnya akan terasa ringan, kecuali jika halaman blog tersebut memang berat dalam load akan seterusnya begitu.

Kali ini saya akan berbagi salah satu trik untuk membuat load/waktu muat blog menjadi lebih ringan dengan cara mengubah ukuran avatar komentar menjadi lebih kecil agar waktu muat komentar pun menjadi cepat. kenapa kok tidak memakai css saja? kenapa tidak ukuran avatarnya langsung yang di crop? pertanyaan tersebut sering sekali hadir.

Begini, Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar yang akan diproses oleh mesin browser setelah itu barulah ditampilkan sesuai perintah tampilan css, sedangkan pemotongan untuk ukuran kecil terkadang akan membuat tampilan avatar pecah. Blogger mempunyai cara yang unik dalam menentukan ukuran gambar, untuk ukuran gambar asli biasanya ditandai denga kode s512 atau s1600 pada URL gambar. Gambar yang sobat upload memiliki beberapa ukuran yang mungkin berbeda, dengan merubah ukurannya sobat bisa menentukan berapa pixel gambar yang akan di tampilkan.

Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar dibawah ini :

Setelah saya rubah, maka ukuran avatar berganti menjadi seperti berikut ini :

Dibawah ini adalah url avatar saya

http://lh6.googleusercontent.com/-PGirmW8eUT4/AAAAAAAAAAI/AAAAAAAAAVU/vCdAXXjNDaY/s512-c/photo.jpg

silahkan di copy dan paste di addres bar anda untuk mencoba, kemudian ganti s512 menjadi s65 misalkan kemudian muat, gambar akan berubah menjadi 65x65px ( pixel ).

Jadi semua yang saya tulis di atas adalah cara memperkecilnya bukan dengan CSS, melainkan dengan JavaScript. Untuk memasangnya, simpan kode dibawah ini pada template anda, letakkan diatas kode tag </body>

<script type='text/javascript'>
//<![CDATA[
var avatar=$("#comments");
avatar.find('.avatar-image-container 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>

ubah ukuran s65-c sesuai dengan keinginan anda atau sesuai template komentar, misalkan bisa s75, s80, s90 dan seterusnya.

Semoga berguna untuk anda...