Membuat Load OnClick Atau Lazy Load Chatbox Untuk Optimasi Blog

Membuat Load OnClick Atau Lazy Load Chatbox Untuk Optimasi Blog

Bola Hero Gawai

Membuat Load OnClick Atau Lazy Load Chatbox Untuk Optimasi Blog

Membuat Load OnClick Atau Lazy Load Chatbox Untuk Optimasi Blog
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.

Laverage browser caching
JS dari SmartChatbox menyebabkan Leverage Browser Caching di PageSpeed

Laverage browser caching
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.

Comment pada iFrame chatbox

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×