Ditulis oleh: Ditulis pada: 11/06/2015
Postingan kali ini masih berkutat dengan ChatBox. Ternyata beberapa JS dari ChatBox ini mengurangi kecepatan loading blog karena terdeteksi Leverage Browser Caching di PageSpeed seperti pada gambar di bawah ini. Untuk itu saya mencoba untuk mengakali agar JS dari chatbox ini tidak terdeteksi dengan beberapa percobaan dan ternyata berhasil. Masih ingat dengan trik lazy load untuk video Youtube? Nah, trik ini ternyata bisa juga diterapkan pada chatbox ini.
JS dari SmartChatbox menyebabkan Leverage Browser Caching di PageSpeed
Leverage Browser Caching dari JS SmartChatbox teratasi
Dengan memberi Comment pada iFrame chatbox, maka ketika halaman diakses iFrame chatbox tidak dibaca oleh browser. Kemudian iframe baru tampil ketika tombol lazy load diklik seperti bisa Anda lihat di animasi GIF di bawah ini.
Nah, untuk menggunakan lazy load pada chatbox ini, silahkan ikuti langkah-langkahnya di bawah ini. Namun sebelumnya simak dulu postingan tentang membuat chatbox agar tidak bingung, silahkan pilih salah satunya.
Silahkan perhatikan kode javascript hasil ekstrak dari JS SmartChatbox seperti di bawah ini sebagai contoh.
document.write('<div id="smartchatbox_img90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #000000; background: url(\'http://www3.smartchatbox.com/shoutbox/img/backgrounds/16_small.jpg\') 50% 50%; ">');
document.write('<div id="smartchatbox90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border:0; ">');
document.write('<iframe src="http://www3.smartchatbox.com/shoutbox/sb.php?key=90162xxxx" scrolling="no" frameborder="0" width="220px" height="450px" style="border:0; margin:0; padding: 0;">');
document.write('</iframe></div></div>');
Kemudian kita berikan comment (kode yang saya marking) pada iframe-nya sehingga menjadi seperti di bawah ini.
document.write('<div id="smartchatbox_img90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #000000; background: url(\'http://www3.smartchatbox.com/shoutbox/img/backgrounds/16_small.jpg\') 50% 50%; ">');
document.write('<div id="smartchatbox90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border:0; ">');
document.write('<!--<iframe src="http://www3.smartchatbox.com/shoutbox/sb.php?key=90162xxxx" scrolling="no" frameborder="0" width="220px" height="450px" style="border:0; margin:0; padding: 0;">');
document.write('</iframe>--></div></div>');
2. Mengganti javascript loadChatbox
Untuk chatbox dengan tombol melayang:
Silahkan cari javascript seperti di bawah ini
function loadChatbox(){var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
Dan ganti dengan javascript di bawah ini
function loadChatbox(){var e=document.getElementById("smartchatbox90162xxxx");e.innerHTML=e.innerHTML.replace('<!--','').replace('-->','');var e=document.getElementById("chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
Silahkan ganti kode
smartchatbox90162xxxx dengan id yang berada tepat di atas iframe-nya seperti di bawah ini yang saya kasih marking
document.write('<div id="smartchatbox_img90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border: 1px solid #000000; background: url(\'http://www3.smartchatbox.com/shoutbox/img/backgrounds/16_small.jpg\') 50% 50%; ">');
document.write('<div id="smartchatbox90162xxxx" style="width: 220px; height: 450px; overflow: hidden; margin: auto; padding: 0; border:0; ">');
document.write('<!--<iframe src="http://www3.smartchatbox.com/shoutbox/sb.php?key=90162xxxx" scrolling="no" frameborder="0" width="220px" height="450px" style="border:0; margin:0; padding: 0;">');
document.write('</iframe>--></div></div>');
jika Anda menggunakan chatbox selain dari SmartChatbox, silahkan ganti dengan id dari element yang ada di atas iframe. Jika tidak ada, silahkan buat sebuah div dengan id unik di atas iframe.
Untuk chatbox dengan tombol di header blog:
Silahkan cari javascript seperti di bawah ini
<script>
//<![CDATA[
function loadChatbox(){var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
function closeChatbox(){var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
function minimChatbox(){var e=document.getElementById("minim-chat");e.style.display="none";var e=document.getElementById("maxi-chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -460px 0";}
//]]>
</script>
Kemudian ganti dengan kode di bawah ini
<script>
//<![CDATA[
function loadChatbox(){var e=document.getElementById("smartchatbox90162xxxx");e.innerHTML=e.innerHTML.replace('<!--','').replace('-->','');var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}
function closeChatbox(){var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}
function minimChatbox(){var e=document.getElementById("minim-chat");e.style.display="none";var e=document.getElementById("maxi-chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -460px 0";}
function maxiChatbox(){var e=document.getElementById("chatbox");e.style.margin="0";var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";};
//]]>
</script>
Silahkan ganti kode
smartchatbox90162xxxx dengan id yang berada tepat di atas iframe-nya seperti pada langkah untuk chatbox dengan tombol melayang.Kemudian cari kode
<div id="maxi-chat" onclick="loadChatbox()"><span class="maxi-button">+</span></div>Lalu silahkan ganti kode
loadChatbox() menjadi maxiChatbox()Selesai...semoga bisa dimengerti.