Hexo主題使用Lazyload來延遲載入Disqus

Hexo大多數的主題參照〈使Disqus不再拖累性能和页面加载〉的程式碼來修改,基本上應該都能套用。簡單來說,就是把原本Disqus其中一段程式碼另外包成一個loadDisqus()函數使用Lazyload來延遲載入Disqus。因為Disqus整體實在很臃腫,拖累網頁載入速度。

以Hexo Light主題為例,編輯/themes/light/layout/_partial/after_footer.ejs,Disqus程式碼如下:

<% if (config.disqus_shortname){ %>
<script type="text/javascript">
var disqus_shortname = '<%= config.disqus_shortname %>';
  var disqus_config = function() {
    this.page.url = '<%= page.permalink %>';
    this.page.identifier = '<%= page.path %>';
    this.page.title = '<%= page.title %>';
  };
(function(){
  var dsq = document.createElement('script');
  dsq.type = 'text/javascript';
  dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<% } %>

改成:

<% if (config.disqus_shortname){ %>
<script type="text/javascript">
var disqus_shortname = '<%= config.disqus_shortname %>';
  var disqus_config = function() {
    this.page.url = '<%= page.permalink %>';
    this.page.identifier = '<%= page.path %>';
    this.page.title = '<%= page.title %>';
  };
function loadDisqus() {  //新增的loadDisqus()函數
(function(){
  var dsq = document.createElement('script');
  dsq.type = 'text/javascript';
  dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
}  //到此為止將這段程式碼包起來
//底下程式碼為新增功能,整段複製貼上即可
var runningOnBrowser = typeof window !== "undefined";
var isBot =
    (runningOnBrowser && !("onscroll" in window)) ||
    (typeof navigator !== "undefined" &&
        /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(
            navigator.userAgent
        ));
var supportsIntersectionObserver =
    runningOnBrowser && "IntersectionObserver" in window;
setTimeout(function() {
    if (!isBot && supportsIntersectionObserver) {
        var disqus_observer = new IntersectionObserver(
            function(entries) {
                if (entries[0].isIntersecting) {
                    loadDisqus();
                    disqus_observer.disconnect();
                }
            },
            { threshold: [0] }
        );
        disqus_observer.observe(document.getElementById("disqus_thread"));
    } else {
        loadDisqus();
    }
}, 1);
</script>
<% } %>

程式碼註解請參考原文。最後用PageSpeed Insights測試,Disqus負面影響的相關結果都會消失,網頁載入速度明顯提升不少。