Membuat Load Onclick Atau Lazy Load Chatbox Untuk Meningkatkan Secara Optimal Blog

Postingan kali ini masih berkutat dengan ChatBox. Ternyata beberapa JS dari ChatBox ini mengurangi kecepatan loading blog sebab terdeteksi Leverage Browser Caching di PageSpeed menyerupai pada gambar di bawah ini. Untuk itu aku mencoba untuk mengakali supaya 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 dapat juga diterapkan pada chatbox ini.

JS dari SmartChatbox menjadikan Leverage Browser Caching di PageSpeed

Leverage Browser Caching dari JS SmartChatbox teratasi

Dengan memberi Comment pada iFrame chatbox, maka dikala halaman diakses iFrame chatbox tidak dibaca oleh browser. Kemudian iframe gres tampil dikala tombol lazy load diklik menyerupai dapat Anda lihat di animasi GIF di bawah ini.

Nah, untuk memakai lazy load pada chatbox ini, silahkan ikuti langkah-langkahnya di bawah ini. Namun sebelumnya simak dulu postingan perihal menciptakan chatbox supaya tidak bingung, silahkan pilih salah satunya.

• Chatbox Dengan Tombol Chat Melayang
• Chatbox Dengan Tombol Chat Di Header Blog

1. Memberikan Comment Pada Iframe
Silahkan perhatikan instruksi javascript hasil ekstrak dari JS SmartChatbox menyerupai 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 aku marking) pada iframe-nya sehingga menjadi menyerupai 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 menyerupai 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 instruksi smartchatbox90162xxxx dengan id yang berada sempurna di atas iframe-nya menyerupai di bawah ini yang aku 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>');

jikalau Anda memakai 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 menyerupai 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 instruksi 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 instruksi smartchatbox90162xxxx dengan id yang berada sempurna di atas iframe-nya menyerupai 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 instruksi loadChatbox() menjadi maxiChatbox()

Selesai...semoga dapat dimengerti.


Sumber https://www.kompiajaib.com/

Share this post