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