Make OnClick Or Lazy Load Load chatbox For Optimization Blog

Updated on June 27, 2016 - Post a Comment

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.

Author: Adhy Suriady

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.

1. Memberikan Comment Pada Iframe
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">&plus;</span></div>

Lalu silahkan ganti kode loadChatbox() menjadi maxiChatbox()

Selesai...semoga bisa dimengerti.