如何让Page Speed Insights忽略指定脚本不计入性能评分

核心逻辑 #

PSI及其底层的Lighthouse评分体系，仅会统计影响用户核心交互体验的加载、执行耗时，只要将非核心的装饰类脚本的运行时机调整到所有核心性能指标触发完成后，就不会被纳入评分统计。

可落地的实现方案 #

• 方案1：使用requestIdleCallback在浏览器空闲时段运行脚本
  这个API会在浏览器没有优先级更高的任务时才执行传入的回调，完全不会影响核心交互的加载判定，示例代码如下：

  // 你的渐变效果执行函数
  function initStripGradient() {
    // 原有Kevin Hugnagl版本的效果逻辑放在这里
  }
  
  if ('requestIdleCallback' in window) {
    // 最长延迟3秒后执行，避免浏览器长期繁忙无法运行效果
    window.requestIdleCallback(initStripGradient, { timeout: 3000 })
  } else {
    // 低版本浏览器降级：页面所有核心资源加载完成后再执行
    window.addEventListener('load', initStripGradient)
  }
  

• 方案2：动态注入脚本
  如果是外部独立脚本，可以等到页面核心加载完成后再动态创建script标签引入，不会被计入初始加载耗时：

  function loadGradientScript() {
    const script = document.createElement('script')
    script.src = '你的strip-gradient脚本本地路径'
    script.async = true
    document.body.appendChild(script)
  }
  
  // 页面加载完成后再加载脚本
  window.addEventListener('load', loadGradientScript)
  

• 方案3：本地测试时配置Lighthouse忽略规则
  如果你是本地跑Lighthouse做测试，可以在配置项中添加该脚本的忽略规则，正式线上PSI评分只要做好前两个方案的时机调整就不会被影响。

额外优化建议 #

你提到该脚本运行耗时约28秒，耗时过长，建议可以同步排查脚本本身的性能问题：比如是否存在不必要的循环计算、是否可以用CSS渐变替代部分JS逻辑、是否可以限制效果仅在可视区域内运行，进一步降低性能损耗。

上述方案同时适用于GTmetrix测试，GTmetrix底层同样基于Lighthouse统计核心性能指标，调整脚本运行时机后即可通过测试。

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