Mempercepat Loading Komentar dengan Memperkecil Avatar

Cara mempercepat loading komentar - Diantara yang membuat beratnya komentar untuk diload adalah besarnya ukuran gambar / image pada komentar. Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar adalah 512x512px. Untuk mencobanya, silahkan klik kanan pada avatar komentar yang ada di blog sobat, kemudian klik kanan pada buka gambar di tab baru. Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar ini :

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

Blogger mempunyai cara yang unik dalam menentukan ukuran gambar, untuk ukuran gambar asli biasanya ditandai denga kode s1600 pada URL gambar. Gambar yang sobat upload memiliki beberapa ukuran, dengan merubah ukurannya sobat bisa menentukan berapa pixel gambar yang akan di tampilkan. Sebagai contoh, avatar saya mempunyai URL :

http://lh4.googleusercontent.com/-H08EqbNhKPo/AAAAAAAAAAI/AAAAAAAAADs/jLmlB6cRb8s/s1600/photo.jpg

silahkan copy paste untuk mencoba, kemudian ganti s1600 menjadi s50 misalkan, gambar akan berubah menjadi 50x50px.

Selanjutnya, kita akan merubah ukuran avatar yang tadinya 512px menjadi 65px misalkan, silahkan simak caranya.

Cara Memperkecil Avatar Komentar

Sebagaimana dijelaskan di atas, cara memperkecilnya bukan dengan CSS, melainkan dengan JavaScript. Untuk memasangnya, simpan kode dibawah ini pada template sobat diatas </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>

Ganti angka s65 sesuai ukuran avatar pada blog sobat.

Setelah di save, coba kunjungi postingan yang sudah mempunyai komentar, kemudian buka gambarnya di tab baru. Berubah bukan?