如何延迟加载Gist聊天组件JS脚本以提升Ghost博客速度

针对Gist聊天组件脚本拖慢网站加载速度的问题，以下是几种实用的延迟加载方案，可根据需求选择：

方案1：用户交互触发加载（推荐） #

仅在用户第一次滚动页面或移动鼠标时加载组件，完全不阻塞初始页面渲染，同时避免重复加载：

<!-- 延迟加载Gist聊天组件：用户交互触发 -->
<script>
function loadGistWidget() {
    if (window.gist) return;
    
    var gist = window.gist = window.gist || [];
    gist.methods = ['trackPageView','identify','track','setAppId'];
    gist.factory = function(t){
        return function(){
            var e = Array.prototype.slice.call(arguments);
            e.unshift(t);
            gist.push(e);
            return gist;
        };
    };
    for(var i=0;i<gist.methods.length;i++){
        var c = gist.methods[i];
        gist[c] = gist.factory(c);
    }
    
    var s = document.createElement('script');
    s.src = "https://widget.getgist.com";
    s.async = true;
    document.getElementsByTagName('head')[0].appendChild(s);
    
    s.addEventListener('load', function() {
        gist.setAppId("a2o4vdjf");
        gist.trackPageView();
    });
    
    window.removeEventListener('scroll', loadGistWidget);
    window.removeEventListener('mousemove', loadGistWidget);
}

window.addEventListener('scroll', loadGistWidget);
window.addEventListener('mousemove', loadGistWidget);
</script>

方案2：页面加载完成后延迟固定时间加载 #

等页面所有资源加载完成后，延迟指定时间再加载组件，给主页面留足加载时间：

<!-- 页面加载完成后延迟3秒加载Gist -->
<script>
window.addEventListener('load', function() {
    setTimeout(function() {
        var gist = window.gist = window.gist || [];
        gist.methods = ['trackPageView','identify','track','setAppId'];
        gist.factory = function(t){
            return function(){
                var e = Array.prototype.slice.call(arguments);
                e.unshift(t);
                gist.push(e);
                return gist;
            };
        };
        for(var i=0;i<gist.methods.length;i++){
            var c = gist.methods[i];
            gist[c] = gist.factory(c);
        }
        
        var s = document.createElement('script');
        s.src = "https://widget.getgist.com";
        s.async = true;
        document.getElementsByTagName('head')[0].appendChild(s);
        
        s.addEventListener('load', function() {
            gist.setAppId("a2o4vdjf");
            gist.trackPageView();
        });
    }, 3000); // 可自行调整延迟毫秒数，3000=3秒
});
</script>

方案3：滚动到指定元素时加载 #

利用Intersection Observer API，当用户滚动到页面特定元素（如页脚）时才加载组件：

<!-- 滚动到页脚时加载Gist组件 -->
<script>
function loadGistWidget() {
    if (window.gist) return;
    
    var gist = window.gist = window.gist || [];
    gist.methods = ['trackPageView','identify','track','setAppId'];
    gist.factory = function(t){
        return function(){
            var e = Array.prototype.slice.call(arguments);
            e.unshift(t);
            gist.push(e);
            return gist;
        };
    };
    for(var i=0;i<gist.methods.length;i++){
        var c = gist.methods[i];
        gist[c] = gist.factory(c);
    }
    
    var s = document.createElement('script');
    s.src = "https://widget.getgist.com";
    s.async = true;
    document.getElementsByTagName('head')[0].appendChild(s);
    
    s.addEventListener('load', function() {
        gist.setAppId("a2o4vdjf");
        gist.trackPageView();
    });
    
    observer.disconnect();
}

// 替换为你希望触发加载的元素选择器，比如'.site-footer'
var target = document.querySelector('footer');
var observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) loadGistWidget();
    });
});

if (target) observer.observe(target);
</script>

部署方法 #

在Ghost后台进入「设置」→「代码注入」，将上述任意一种脚本粘贴到「站点页脚」区域，保存即可。页脚脚本会在页面主体内容加载完成后执行，进一步减少对初始加载的影响。

内容的提问来源于stack exchange，提问作者Sam Cassman