Google PageSpeed移动端性能优化：LiveChat第三方脚本加载问题解决方案咨询

问题概述 #

你当前使用的LiveChat初始化脚本会显著拖慢移动端页面的Time to Interactive指标，导致PageSpeed评分偏低。以下是针对该问题的具体优化方案：

优化方案 #

1. 按需加载：仅在用户点击聊天按钮时加载脚本 #

这是最有效的优化方式，完全避免了脚本在页面初始加载阶段占用资源。修改后的代码如下：

$(".openChat").on("click", function (event) {
    event.preventDefault();

    // 避免重复加载脚本
    if (window.LC_API) {
        LC_API.open_chat_window();
        return;
    }

    // 初始化LiveChat配置
    window.__lc = { license: XXXXXX };
    
    // 动态加载脚本
    const lcScript = document.createElement("script");
    lcScript.type = "text/javascript";
    lcScript.async = true;
    lcScript.src = `${document.location.protocol === "https:" ? "https://" : "http://"}cdn.livechatinc.com/tracking.js`;
    
    // 脚本加载完成后初始化API回调并打开聊天窗口
    lcScript.onload = function() {
        window.LC_API = window.LC_API || {};
        
        LC_API.open_chat_window = function () {
            $(".chatbox").show();
            $("#chat-widget-container").show();
        };
        LC_API.on_chat_window_minimized = function () {
            $(".chatbox").show();
            $("#chat-widget-container").hide();
        };
        LC_API.on_chat_window_opened = function () {
            $(".chatbox").hide();
            $("#chat-widget-container").show();
        };
        LC_API.on_chat_window_hidden = function () {
            $(".chatbox").show();
            $("#chat-widget-container").show();
        };

        // 加载完成后立即打开聊天窗口
        LC_API.open_chat_window();
    };

    // 插入脚本到页面
    document.getElementsByTagName("script")[0].parentNode.insertBefore(lcScript, document.getElementsByTagName("script")[0]);
});

注意：我修正了你代码中jQuery选择器多余的转义符（$("\.chatbox") → $(".chatbox")），这些转义符是不必要的，可能会导致选择器解析异常。

2. 延迟加载：页面空闲时加载脚本 #

如果你希望聊天窗口能快速响应点击，也可以选择在页面加载完成且用户无操作的空闲时段加载脚本，比如页面加载后延迟2秒，或者用户滚动页面后加载：

let chatScriptLoaded = false;

// 定义加载脚本的函数
function loadLiveChat() {
    if (chatScriptLoaded) return;
    chatScriptLoaded = true;

    window.__lc = { license: XXXXXX };
    const lcScript = document.createElement("script");
    lcScript.type = "text/javascript";
    lcScript.async = true;
    lcScript.src = `${document.location.protocol === "https:" ? "https://" : "http://"}cdn.livechatinc.com/tracking.js`;
    
    lcScript.onload = function() {
        window.LC_API = window.LC_API || {};
        // 初始化API回调（和上面一致）
        LC_API.open_chat_window = function () {
            $(".chatbox").show();
            $("#chat-widget-container").show();
        };
        LC_API.on_chat_window_minimized = function () {
            $(".chatbox").show();
            $("#chat-widget-container").hide();
        };
        LC_API.on_chat_window_opened = function () {
            $(".chatbox").hide();
            $("#chat-widget-container").show();
        };
        LC_API.on_chat_window_hidden = function () {
            $(".chatbox").show();
            $("#chat-widget-container").show();
        };
    };

    document.getElementsByTagName("script")[0].parentNode.insertBefore(lcScript, document.getElementsByTagName("script")[0]);
}

// 页面加载完成后延迟2秒加载
window.addEventListener('load', () => {
    setTimeout(loadLiveChat, 2000);
});

// 或者监听用户滚动，触发一次后加载
window.addEventListener('scroll', () => {
    loadLiveChat();
}, { once: true });

// 聊天按钮点击事件
$(".openChat").on("click", function (event) {
    event.preventDefault();
    if (window.LC_API) {
        LC_API.open_chat_window();
    } else {
        // 如果脚本未加载，先加载再打开
        loadLiveChat();
        // 轮询检查脚本是否加载完成
        const checkInterval = setInterval(() => {
            if (window.LC_API) {
                clearInterval(checkInterval);
                LC_API.open_chat_window();
            }
        }, 100);
    }
});

3. 优化主线程阻塞 #

• 确保脚本使用async属性（你的代码已经做到了，但要确保动态创建的脚本也保留这个属性）
• 避免在初始阶段执行不必要的API回调绑定，把绑定逻辑放到脚本加载完成后

额外建议 #

• 可以考虑隐藏初始的聊天按钮，直到脚本加载完成后再显示，避免用户点击时出现延迟
• 测试优化后的脚本，确保聊天功能正常工作，同时再次运行PageSpeed Insights验证性能提升

内容的提问来源于stack exchange，提问作者Mittul At TechnoBrave