Memperbaiki laverage browser caching pada komentar disqus

Selamat Datang di Blog Orang IT. Memasang gadget komentar dari disqus cukup digemari oleh pengguna blogger akhir-akhir ini

Hal ini disebabkan karena opsi komentar via google plus telah ditutup dan komentar default blogger sering error

Cara pemasangan komentar disqus keblog ada berbagai macam , ada yang menggunakan sistem defer yakni kotak komentar baru akan load ketika pengunjung melakukan scroll kebawah

Dan ada juga yang menggunakan cara onlick load dimana seluruh komentar disqus akan tampil setelah pengguna menekan tombol button. Semua itu dilakukan agar sistem komentar disqus tidak memberatkan loading blog

Sebenarnya kedua cara diatas sering diaplikasikan oleh pemilik website untuk mengatasi masalah komentar disqus yang berat, meski demikian terdapat beberapa masalah yang tidak begitu penting tetapi sedikit mempengaruhi loading blog artinya jika masalah ini diperbaiki maka kecepatan blog anda akan bertambah

Yaahh meski itu cuma 2-3% saja , namun menurut saya segala sesuatu mengenai blog sekecil apapun peluangnya harus diperbaiki agar performa blog meningkat

Masalah yang saya maksud adalah laverage browser caching alias tayangan aset statis terkait kebijakan cache browser yang efisien untuk menghemat waktu pemuatan halaman blog , saran ini muncul dialat pengujian Gtmetrix dan pagespeed insight

Lihatlah hasil contoh pengujian berikut :

Bagi anda yang merasa menggunakan sistem komentar disqus silahkan lakukan pengecekan pada alat penguji Gtmetrix atau googlepagespeed insight apakah ada saran untuk memperbaiki laverage caching untuk javascript yang mengarah ke kode disqus ?

Cara memperbaiki laverage browser caching untuk komentar disqus demi meningkatkan kecepatan loadig blog

Apabila anda mengalami masalah yang sama dengan saya coba ikuti tutorial yang saya berikan untuk mengatasi masalah tersebut

Sebaliknya jika blog anda tidak terdapat masalah berarti baik-baik saja ya hehe

Silahkan ikuti step by step agar tidak terjadi error

1. Backup template terlebih dahulu kemudian silahkan hapus seluruh script untuk menampilkan komentar disqus yang sebelumnya telah terpasang diblog anda

2. Selanjutnya cari kode berikut dengan kombinasi ctrl+F

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

3. Jika ketemu silahkan langsung dihapus dan diganti dengan kode dibawah ini :

<b:includable id='comments' var='post'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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. Selanjutnya letakkan script berikut tepat diatas tag </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;helmykediri&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 silahkan tambahkan css berikut agar tampilanya lebih elegan dan menarik

/* 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}

Klik simpan dan coba uji sekali lagi

Jangan lupa mengganti Helmykediri dengan username disqus anda

Jika anda sudah menerapkan cara ini seharusnya hasil tes pengujian digooglepagespeed insight tidak terjadi masalah lagi

Sekian dan terimakasih