Delay Disqus loading

_includes/2017/comments-area.html

@@ -13,10 +13,10 @@
         <div class='comments-section'>
           <div class='comments'>
             <div id='disqus_thread'></div>
-            <noscript data-js-disqus='{"host":"{{ site.data.disqus.host }}","url":"{{ site.url }}/{{ identifier }}","identifier":"{{ identifier }}"}'></noscript>
           </div>
         </div>
       </details>
     </div>
+    <noscript data-js-disqus='{"host":"{{ site.data.disqus.host }}","url":"{{ site.url }}/{{ identifier }}","identifier":"{{ identifier }}"}'></noscript>
   </section>
 {% endif %}

_js/behaviors/disqus.js

@@ -2,12 +2,21 @@ import onmount from 'onmount'
 import injectDisqus from '../helpers/inject_disqus'
 import ready from 'dom101/ready'
 
+/**
+ * Delay disqus by some time. It's at the bottom of the page, there's no need
+ * for it to load fast. This will give more time to load more critical assets.
+ */
+
+const DISQUS_DELAY = 10 * 1000
+
 /**
  * Injects Disqus onto the page.
  */
 
 onmount('[data-js-disqus]', function () {
   const data = JSON.parse(this.getAttribute('data-js-disqus'))
+  const $parent = this.parentNode
+  $parent.setAttribute('hidden', true)
 
   window.disqus_config = function () {
     this.page.url = data.url
@@ -16,6 +25,9 @@ onmount('[data-js-disqus]', function () {
 
   // Disqus takes a while to load, don't do it so eagerly.
   ready(() => {
-    injectDisqus(data.host)
+    setTimeout(() => {
+      injectDisqus(data.host)
+      $parent.removeAttribute('hidden')
+    }, DISQUS_DELAY)
   })
 })