如何检测当前访问者是否为PageSpeed Insights或Lighthouse工具

嘿，这个问题我之前优化性能评分的时候也踩过坑！单纯用isbot有时候确实不太灵光，大概率是它的UA库没及时更新这两个工具的标识。下面分享几个我亲测有效的检测方法，结合起来用更可靠：

1. 直接检测User-Agent中的特征关键词 #

Lighthouse和PageSpeed Insights（PSI）的请求都会在UA里留下明显标识，我们可以手动判断这些关键词，比依赖第三方库更直接：

function isPerformanceTool() {
  const ua = navigator.userAgent.toLowerCase();
  // 匹配Lighthouse和PSI的核心标识
  return ua.includes('lighthouse') || ua.includes('pagespeed insights');
}

PSI其实是基于Lighthouse运行的，所以很多时候UA里也会包含lighthouse，但加上pagespeed insights能覆盖更多场景。

2. 结合后端请求头检测（如果有后端的话） #

如果你的项目有后端服务，通过请求头检测会更准确——Lighthouse在发起请求时会携带x-lighthouse这个自定义请求头，PSI的请求也可能附带相关标识。你可以在后端先判断，再把结果传递给前端：

// 举个Node.js/Express的例子
app.use((req, res, next) => {
  const isTool = 
    req.headers['x-lighthouse'] || 
    req.headers['user-agent'].toLowerCase().includes('lighthouse') ||
    req.headers['user-agent'].toLowerCase().includes('pagespeed insights');
  // 把判断结果传给前端模板或者通过接口返回
  res.locals.isPerformanceTool = isTool;
  next();
});

前端拿到这个标识后，就可以决定是否加载GA代码了。

3. 补充：为什么isbot可能失效？ #

isbot这类库的规则是基于维护者收集的UA列表更新的，如果Lighthouse或PSI的UA有调整，而库没及时更新，就会出现检测失败的情况。所以手动补充这两个工具的关键词，反而比单纯依赖库更稳定。

最终使用示例 #

在加载Google Analytics之前加上判断：

if (!isPerformanceTool()) {
  // 正常加载GA代码
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '你的GA跟踪ID');
}

备注：内容来源于stack exchange，提问作者React-beginner