Cara Menunda Pemuatan Komentar Disqus untuk Mempercepat Loading Blog

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

Untuk demonya silahkan kamu lihat situs samehadaku atau tedieka.com yang menggunakan cara ini.

Cara mendefernya juga sangat mudah. Kamu hanya perlu mengganti kode java scriptnya dengan menambahkan kode 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 tulisan // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Letakkan kode java script komentar disqus tepat di bawah tulisan tersebut. Supaya tidak bingung coba perhatikan kode 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 kode yang saya tandai dengan warna merah tersebut. Copy kode itu kemudian letakkan di bawah tulisan // SIMPAN KODE JAVASCRIPT DISQUS DI BAWAH INI. Sehingga hasilnya akan seperti 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 kode java script disqus yang saya marking dengan kode di atas. Sehingga kode komentar disqus di template menjadi seperti 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 jika scroll ke halaman komentar? Jika iya berarti penundaan load komentar disqus yang kamu pasang berhasil.