Trik Mengatasi Laverage Browser Caching Pada Komentar Disqus Onclick Load

Trik Mengatasi Laverage Browser Caching Pada Komentar Disqus Onclick Load

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

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

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

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

Jika sehabis cek Anda menemukan hal menyerupai di atas, silahkan lanjut ikuti tutorial ini. Namun kalau blog Anda tidak ada problem berarti itu sudah bagus. Untuk mengatasi problem 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 aba-aba berikut ini:

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

3. Hapus aba-aba tersebut kemudian ganti dengan aba-aba 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 semoga 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 aba-aba 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 ialah aba-aba pemanggil komentarnya. Silahkan copy aba-aba pemanggil tersebut sempurna di atas aba-aba </article>. Sehingga alhasil kurang lebih menyerupai 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 aba-aba </article> sudah ada aba-aba

<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
Sumber https://www.tipsdantrik.web.id/