Improve page rendering by deferring disqus loading (#891)

Author: KaitoHH

layout/_third-party/comments/disqus.swig

@@ -1,5 +1,14 @@
 {% if theme.disqus.count %}
-  <script id="dsq-count-scr" src="https://{{ theme.disqus.shortname }}.disqus.com/count.js" async></script>
+<script>
+  function loadCount() {
+    var d = document, s = d.createElement('script');
+    s.src = 'https://{{ theme.disqus.shortname }}.disqus.com/count.js';
+    s.id = 'dsq-count-scr';
+    (d.head || d.body).appendChild(s);
+  }
+  // defer loading until the whole page loading is completed
+  window.addEventListener('load', loadCount, false);
+</script>
 {% endif %}
 {% if page.comments %}
 <script>
@@ -22,7 +31,7 @@
       var offsetTop = $('#comments').offset().top - $(window).height();
       if (offsetTop <= 0) {
         // load directly when there's no a scrollbar
-        loadComments();
+        window.addEventListener('load', loadComments, false);
       } else {
         $(window).on('scroll.disqus_scroll', function() {
           // offsetTop may changes because of manually resizing browser window or lazy loading images.
@@ -38,7 +47,7 @@
       }
     });
   {% else %}
-    loadComments();
+    window.addEventListener('load', loadComments, false);
   {% endif %}
 </script>
 {% endif %}

layout/_third-party/comments/disqusjs.swig

@@ -8,12 +8,25 @@
 {% if theme.vendors.disqusjs_js %}
   {% set disqusjs_js_url = theme.vendors.disqusjs_js %}
 {% endif %}
-<script src="{{ disqusjs_js_url }}"></script>
 
 <script>
-  var dsqjs = new DisqusJS({
-    api: '{{ theme.disqusjs.api }}' || 'https://disqus.com/api/',
-    apikey: '{{ theme.disqusjs.apikey }}',
-    shortname: '{{ theme.disqusjs.shortname }}'
-  });
+  function initialDsq() {
+    window.dsqjs = new DisqusJS({
+      api: '{{ theme.disqusjs.api }}' || 'https://disqus.com/api/',
+      apikey: '{{ theme.disqusjs.apikey }}',
+      shortname: '{{ theme.disqusjs.shortname }}',
+      url: {{ page.permalink | json }},
+      identifier: {{ page.path | json }},
+      title: '{{ page.title | addslashes }}',
+    });
+  }
+
+  function loadDsqJS() {
+    var d = document, s = d.createElement('script');
+    s.src = '{{ disqusjs_js_url }}';
+    s.onload = initialDsq;
+    (d.head || d.body).appendChild(s);
+  }
+  
+  window.addEventListener('load', loadDsqJS, false);
 </script>