修复 Lighthouse 'reduce unused JavaScript' 警告

什么是 Lighthouse 'reduce unused JavaScript' 警告？

什么是 Lighthouse 中的 reduce unused JavaScript 警告？Lighthouse 会标记超过 20kb 未使用字节的脚本。

'reduce unused JavaScript' 警告会直接影响 Lighthouse 评分。

未使用的 JavaScript 对通过 Core Web Vitals 评估也非常重要，因为未使用的 JavaScript 是有代价的！它会争夺网络资源并阻塞主线程。这将拖慢 Core Web Vitals，尤其是 Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP)。

什么导致了未使用的 JavaScript？

未使用的 JavaScript 可能有多种原因。通常由以下原因造成：

• CMS 中过多的插件。
• 无用代码。
• 编码质量差。
• 不受限制的 Google Tag Manager 访问
• 不必要的导入
  
• 立即加载但实际上可以在使用前再加载的代码。

'unused JavaScript' 如何影响页面速度

未使用的 JavaScript 会直接影响 Lighthouse 指标。它会使网页渲染变得不必要地复杂，几乎不可能获得高 Lighthouse 评分。您的浏览器在网页显示到屏幕上之前需要做更多的工作。 

但请记住，Lighthouse 评分不是 Core Web Vitals 评分。Core Web Vitals 是通过 CrUX 数据来衡量的。

未使用的 JavaScript 存在两个问题。

• 首先，这些 JavaScript 需要被下载。这些脚本会争夺网络资源。这可能对 Largest Contentful Paint (LCP) 产生巨大影响
• 其次，浏览器需要执行所有这些 JavaScript。当浏览器执行这些 JavaScript 时，它基本上会停止做其他任何事情，既无法响应用户输入，也无法继续解析页面。这将同时影响 Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP)

如何查找 'unused JavaScript'

要查找 'unused JavaScript'，您可以查看 Lighthouse 审计报告或使用 'Chrome Coverage Tool' 来获取所有 JavaScript 文件及其未使用字节数的完整列表。

使用 ctrl-shift-i 快捷键打开 Chrome 开发者工具。然后使用 ctrl-shift-p 快捷键打开命令菜单并输入 'coverage'。选择 'Start instrumenting coverage and reload page'。这将重新加载页面并显示所有包含 CSS 或 JavaScript 代码的文件的未使用字节数。

如何修复 'reduce unused JavaScript'

要修复 'reduce unused JavaScript' 警告，您首先需要追溯其来源。Lighthouse 会指出哪些脚本具有大量未使用的字节。通常有以下 5 个常见原因：

1. 移除不需要的或琐碎的插件。如果您使用的是像 WordPress 这样的基于插件的 CMS，清理未使用代码最简单、最有效的方法就是移除不需要的插件，或者可以通过简单代码更改来替代的插件（例如您的分析插件、聊天插件、社交分享插件）
   
2. 删除无用代码。无用代码是当前网站不再使用的代码。它只占用空间和带宽。如果您拥有一个网站，建议至少每年安排两次无用代码清理，仔细检查您的自定义脚本并删除不再需要的代码。
   
3. 重写编码质量差的脚本。 编码质量差的脚本往往包含大量不必要的检查和 if/else 语句。这些检查可能永远不会被使用，某些 if/else 条件可能并不需要。如果您有很多旧脚本，或者您当前的 JavaScript 开发人员比之前的更优秀，那么重新审视旧脚本可能是个好主意。
   
4. 清理您的 Google Tag Manager 并限制 访问权限。Google Tag Manager 是未使用代码的常见来源，尤其是当技术能力较弱的部门被允许添加标签时。很多时候他们会忘记移除未使用的标签，Google Tag Manager 就成了未使用 JavaScript 的主要来源。
5. 移除不必要的 导入（NextJS、React、VUE 等）。大多数 SPA 环境导入了过多的组件/函数。仔细检查您的导入并移除未使用的代码。 
6. 延迟加载路由或组件  （NextJS、React、VUE 等）。延迟加载组件只在需要时才导入这些组件。这将立即消除延迟加载未使用代码的页面上的 'Lighthouse warning for unused JavaScript'。
7. 延迟加载非关键脚本。有时您需要一个脚本（例如提交表单），但您不需要立即使用它。而且说实话，98% 的访问者不会注册。因此在大多数情况下，这些脚本是未使用的。在访问者与表单交互时再加载此脚本会更合理，而不是在页面加载期间加载。

'reduce unused JavaScript' 的变通方法

有时无法修复所有未使用的 JavaScript 警告。在这种情况下，您可以尝试最小化这些未使用资源的影响

- 从您的主域名加载所有 JavaScript 资源（这可以避免新的网络连接）
- 预加载更重要的资源，如字体和 LCP 图片元素。
- 尽可能延迟加载 JavaScript
- 将不太重要的 JavaScript 放在页面底部