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負面影響的相關結果都會消失,網頁載入速度明顯提升不少。