Trik Mengatasi Laverage Browser Caching Pada Komentar Disqus Onclick Load

Komentar disqus adalah salah satu sistem komentar blog yang lagi ngetren sekarang ini. Cara pemasangannya pun juga beraneka ragam. Ada yang menggunakan sistem defer (dimuat setelah pengunjung scrol ke bawah) dan ada juga yang menggunakan sistem onclick load. Semua itu tujuannya yaitu agar komentar tersebut sebisa mungkin supaya tidak memberatkan loading blog.



Sebenarnya dua cara tersebut sudah cukup untuk mengatasi masalah loading yang memberatkan blog. Namun ada masalah lain yang tidak terlalu penting, tapi cukup berpengaruh terhadap peningkatan kecepatan blog. Mungkin pengaruhnya sekitar 2% saja, namun saya rasa itu harus diperbaiki jika kita bisa memperbaikinya. Masalah tersebut adalah laverage browser caching di gtmetrix atau tayangkan aset statis dengan kebijakan cache yang efisien pada google pagespeed. Masalah yang saya maksud adalah seperti berikut:

Bagi Anda pengguna komentar disqus silahkan cek blog Anda menggunakan gtmetrix atau google pagespeed. Apakah ada laverage browser caching java script komentar disqus seperti pada gambar di atas?

Cara mengatasi laverage browser caching script komentar disqus untuk mempercepat loading blog

Jika setelah cek Anda menemukan hal seperti di atas, silahkan lanjut ikuti tutorial ini. Namun jika blog Anda tidak ada masalah berarti itu sudah bagus. Untuk mengatasi masalah tersebut silahkan ikuti langkah-langkah berikut ini.

1. Hapus terlebih dahulu semua atribut komentar disqus Anda yang telah terpasang (jangan lupa untuk backup template).

2. Cari kode berikut ini:

<b:includable id='comments' var='post'>…</b:includable>

3. Hapus kode tersebut kemudian ganti dengan kode di bawah ini.

    <b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load Disqus Comment</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
            </div>
</b:if>
</b:includable>
    <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>

4. Kemudian letakkan script berikut di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    //<![CDATA[
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
    //]]>
var disqus_shortname = &quot;ttechfo&quot;;
function loadDisqus(){var e=document.getElementById(&quot;disqus-loader&quot;);e.style.display=&quot;none&quot;;var e=document.getElementById(&quot;disqus-showhide&quot;);e.style.display=&quot;block&quot;;!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();}
    </script>
</b:if>

5. Terakhir tambahkan css berikut agar tampilannya lebih elegan:

/* Disqus Onclick Load*/
.comments{clear:both;line-height:1em;padding:0 12px;}
#comments{padding:12px 20px;margin-top:0;display:none}
.disqus-loader,#disqus-showhide{position:relative;overflow:hidden;display:block;text-align:center;font-weight:700;font-size:18px;cursor:pointer;letter-spacing:0;line-height:55px;margin:25px auto 0;padding:0!important;background:linear-gradient(to right, #E91E63, #2c3e50);color:#fff;transition:all .3s;width:94%;}
#disqus-showhide{display:none}

Jika cara di atas komentar disqus tidak muncul coba perhatikan kode berikut:

    <b:includable id='comments' var='post'>
<b:if cond='data:view.isPost'>
<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load Disqus Comment</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
            </div>
</b:if>
</b:includable>

Kode yang saya tandai dengan warna merah di atas adalah kode pemanggil komentarnya. Silahkan copy kode pemanggil tersebut tepat di atas kode </article>. Sehingga hasilnya kurang lebih seperti berikut.

<b:if cond='data:view.isPost'>
<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load Disqus Comment</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span>  
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
</div>
</b:if>

</article> 

Perhatikan juga apakah di atas kode </article> sudah ada kode

<div class='comments' id='comments'>.
Jika sudah ada hapus salah satunya.

Sekarang silahkan klik simpan tema dan lihat hasilnya. Jangan lupa untuk mengganti ttechfo dengan username disqus Anda dan tes kembali kecepatan blog di google page speed. Kode tersebut saya dapatkan dari blog iwanberbagi dengan beberapa perubahan yang saya lakukan.

*Update 15 juni 2019