Cara Menunda Pemuatan Komentar Disqus Untuk Mempercepat Loading Blog

Cara Menunda Pemuatan Komentar Disqus Untuk Mempercepat Loading Blog

Menunda komentar disqus untuk tidak eksklusif terload ketika 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 instruksi java scriptnya dengan menambahkan instruksi 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 instruksi java script komentar disqus sempurna di bawah goresan pena tersebut. Supaya tidak resah coba perhatikan instruksi 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 instruksi yang saya tandai dengan warna merah tersebut. Copy instruksi itu lalu letakkan di bawah goresan pena // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Sehingga kesudahannya 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 instruksi java script disqus yang saya marking dengan instruksi di atas. Sehingga instruksi 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;;    

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