Memperkecil Avatar Komentar dan Meringankan Blog

Memperkecil Ukuran Avatar Komentar

Alternative baru cara memperkecil ukuran avatar komentar blogger yang terbukti paling efektif dengan mengambil data dari (data-src) element div Alternative Baru Memperkecil Ukuran Avatar Komentar. Kemarin saya coba tes berat blog ini di gtmetrix.com ternyata berat blog ini membengkak sampai 980 kb coba cari-cari penyebabnya ternyata image avatar pada komentar. Padahal sebelumnya sudah saya pasang script untuk mengecilkan ukuran avatar komentar. Saya kira itu berhasil, soalnya ketika di inspect elemen ukuran natural avatar sama dengan ukuran avatar diblog ini. Tapi setelah saya cek di gtmetrix.com ternyata tidak ngefek sama sekali. Avatar yang termuat ukurannya kb nya masih sama besar dengan profil avatar aslinya.

Script yang pertama kali saya gunakan seperti ini :

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');
});

Bagi teman-teman yang memakai script seperti di atas coba tes ukuran blog anda menggunakan gtmetrix atau tools.pingdom.com. Saya ingin tahu apakah blog anda juga sama yang seperti blog ini alami atau cuma blog ini saja yang seperti itu dan bermasalah?

Sambil menunggu jawaban dari sobat semua? saya mencoba menggunakan alternative lain :

Alternative Lain Cara Memperkecil Ukuran Kb Avatar Komentar Blogger

1. Cari kode <div class='avatar-image-container vcard'> atau lebih lengkapnya yang mirip seperti ini

<div class='avatar-image-container'><img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32' width='32'/>
    </div>

2. Menambahkan expr:data-src='data:comment.authorAvatarSrc' pada element a<div class='avatar-image container'> menjadi seperti ini.

<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>

3. Membungkus img seperti ini<noscript><img src=" .... "/></noscript>

4. Dari ketiga langkah di atas kurang lebih hasilnya menjadi seperti :

<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>
    <noscript>
        <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32px' width='32px' />
    </noscript>
</div>

5. Langkah terakhir adalah mengambil url dari data-src pada elemen <div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'> dengan menggunakan Script di bawah ini.

$(window).on("load", function () {
    $('.avatar-image-container').each(function () {
        $(this).html('<img width="50" height="50" src="' + $(this).data('src').replace(/\/s[0-9]+(\-c)?/,"/s50-c") + '"></img>');
    });
});

6. Simpan dan silahkan cek perbedaannya...

Apabila kode <div class='avatar-image-container vcard'> tidak ditemukan coba cari kode ini  <data:comment. authorAvatarImage/> Kemudian ganti dengan kode ini
<div class='avatar-image-container' expr:data-src='data:comment.authorAvatarSrc'>
    <noscript>
        <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' height='32px' width='32px' />
    </noscript>
</div>
Perlu diingat untuk komentar balasannya biasanya harus di sesuaikan lagi kode ini (data:comment.authorAvatarSrc)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel