如何在Lighthouse/Page Speed Insights扫描结束后加载第三方脚本优化LCP得分

核心逻辑：Lighthouse/PageSpeed Insights的性能指标采集窗口会在页面load事件触发、且网络/主线程空闲5秒左右自动结束，同时LCP指标会在用户首次交互后停止更新。我们可以利用这两个特性，在指标采集窗口完全关闭后再注入第三方脚本，完全不影响性能得分。

方案1：监听LCP完成后加载（最准确，无副作用） #

这个方案直接监听LCP指标的上报，LCP触发即代表最大内容绘制已经完成，此时加载任何脚本都不会影响LCP得分。同时搭配用户交互兜底，几乎不会影响Hotjar等工具的正常数据采集。

// 标记加载状态，避免重复注入
let thirdPartyScriptsLoaded = false;

// 第三方脚本加载逻辑，这里以Hotjar为例，其他脚本可以放在这个函数里
function loadThirdPartyScripts() {
  if (thirdPartyScriptsLoaded) return;
  thirdPartyScriptsLoaded = true;
  
  // 替换为你自己的Hotjar初始化代码
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:替换为你的HotjarID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
}

// 监听LCP事件，LCP上报后立即加载脚本
if ('PerformanceObserver' in window) {
  const lcpObserver = new PerformanceObserver((entryList) => {
    loadThirdPartyScripts();
    lcpObserver.disconnect();
  });
  lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
}

// 兜底1：浏览器不支持PerformanceObserver时，用空闲回调加载，超时3秒强制执行
if ('requestIdleCallback' in window) {
  requestIdleCallback(loadThirdPartyScripts, { timeout: 3000 });
}

// 兜底2：用户首次交互时立即加载（用户交互后LCP已经锁定，不会影响得分）
['click', 'scroll', 'mousemove', 'keydown', 'touchstart'].forEach(eventName => {
  window.addEventListener(eventName, loadThirdPartyScripts, { once: true, passive: true });
});

方案2：基于空闲等待加载（无性能API依赖） #

如果不想依赖性能API，可以利用Lighthouse的采集超时逻辑：Lighthouse在load事件触发后最多等待5秒的空闲时间就会结束采集，我们把脚本加载的超时时间设为6秒，就可以保证脚本加载发生在采集结束之后。

let thirdPartyScriptsLoaded = false;
function loadThirdPartyScripts() {
  if (thirdPartyScriptsLoaded) return;
  thirdPartyScriptsLoaded = true;
  // 注入Hotjar等第三方脚本
}

if ('requestIdleCallback' in window) {
  // 最长等待6秒，超出时间即使非空闲也强制加载
  requestIdleCallback(loadThirdPartyScripts, { timeout: 6000 });
} else {
  // 低版本浏览器兜底：load事件后3秒加载
  window.addEventListener('load', () => setTimeout(loadThirdPartyScripts, 3000));
}

为什么你之前的方案没用？ #

• defer属性的脚本会在DOM解析完成后、DOMContentLoaded触发前执行，仍然在Lighthouse的采集窗口内，会被检测到占用主线程，同时未被使用的部分会被标记为冗余JS。
• 直接监听load事件注入脚本也没用：Lighthouse默认会等待load事件触发，此时注入的脚本仍然会被纳入检测范围。

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