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.
1. Memberikan Comment Pada Iframe
Silahkan perhatikan instruksi javascript hasil ekstrak dari JS SmartChatbox menyerupai di bawah ini sebagai contoh.
Kemudian kita berikan comment (kode yang aku marking) pada iframe-nya sehingga menjadi menyerupai di bawah ini.
2. Mengganti javascript loadChatbox
Untuk chatbox dengan tombol melayang:
Silahkan cari javascript menyerupai di bawah ini
Dan ganti dengan javascript di bawah ini
Silahkan ganti instruksi
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
Kemudian ganti dengan instruksi di bawah ini
Silahkan ganti instruksi
Kemudian cari kode
Lalu silahkan ganti instruksi
Selesai...semoga dapat dimengerti.
Sumber https://www.kompiajaib.com/
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.
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">+</span></div>
Lalu silahkan ganti instruksi
loadChatbox()
menjadi maxiChatbox()
Selesai...semoga dapat dimengerti.
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Load Onclick Atau Lazy Load Chatbox Untuk Meningkatkan Secara Optimal Blog"
Posting Komentar