Cara Menunda Pemuatan Komentar Disqus Untuk Mempercepat Loading Blog

Baca Juga

Menunda komentar disqus untuk tidak eksklusif terload dikala membuka halaman merupakan salah satu cara untuk mempercepat loading blog. Cara ini juga dikenal dengan nama defer! Dengan melaksanakan penundaan ini maka pengunjung tidak akan meload komentar disqus sebelum scroll ke bawah hingga dihalaman komentar. Sehingga beban load halaman menjadi berkurang.

Untuk demonya silahkan kau lihat situs samehadaku atau tedieka.com yang memakai cara ini.

Cara mendefernya juga sangat mudah. Kamu hanya perlu mengganti arahan java scriptnya dengan menambahkan arahan ini.

     var disqus_loaded = false;     function load_disqus() {          // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI             disqus_loaded = true;     };     window.onscroll = function(e) {         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight 800)) {             //hit bottom of page             if (disqus_loaded==false)                 load_disqus()         }     }; 

Perhatikan goresan pena // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Letakkan arahan java script komentar disqus sempurna di bawah goresan pena tersebut. Supaya tidak resah coba perhatikan arahan komentar disqus berikut.

 <script type="text/javascript">                 var disqus_shortname = &quot;ttechfo&quot;;                 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;; (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })(); (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })();     var disqus_shortname = &#39;ttechfo&#39;;     (function () {         var s = document.createElement(&#39;script&#39;); s.async = true;         s.type = &#39;text/javascript&#39;;         s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;         (document.getElementsByTagName(&#39;HEAD&#39;)0  document.getElementsByTagName(&#39;BODY&#39;)0).appendChild(s);     }());                 </script> 

Perhatikan arahan yang saya tandai dengan warna merah tersebut. Copy arahan itu lalu letakkan di bawah goresan pena // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Sehingga kesannya akan menyerupai ini:

                   var disqus_loaded = false;     function load_disqus() {          // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })(); (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })();             disqus_loaded = true;     };     window.onscroll = function(e) {         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight 800)) {             //hit bottom of page             if (disqus_loaded==false)                 load_disqus()         }     }; 

Selanjutnya ganti arahan java script disqus yang saya marking dengan arahan di atas. Sehingga arahan komentar disqus di template menjadi menyerupai ini.

 <script type='text/javascript'>                 var disqus_shortname = &quot;xxxxx&quot;;                 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;;                  var disqus_loaded = false;     function load_disqus() {          // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })(); (function() {     var bloggerjs = document.createElement('script');     bloggerjs.type = 'text/javascript';     bloggerjs.async = true;     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';     (document.getElementsByTagName('head')0  document.getElementsByTagName('body')0).appendChild(bloggerjs); })();             disqus_loaded = true;     };     window.onscroll = function(e) {         if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight 800)) {             //hit bottom of page             if (disqus_loaded==false)                 load_disqus()         }     };     var disqus_shortname = &#39;xxxxx&#39;;     (function () {         var s = document.createElement(&#39;script&#39;); s.async = true;         s.type = &#39;text/javascript&#39;;         s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;         (document.getElementsByTagName(&#39;HEAD&#39;)0  document.getElementsByTagName(&#39;BODY&#39;)0).appendChild(s);     }());                 </script> 

Selesai! Sekarang coba tes salah satu postingan, apakah komentar disqus hanya terload kalau scroll ke halaman komentar? Jika iya berarti penundaan load komentar disqus yang kau pasang berhasil.