Frontend Academy · 课时

Lighthouse 审计与评分

在 DevTools 或持续集成环境中运行 Lighthouse，阅读性能分数和诊断信息，并优先处理节省空间最多的优化机会。

Lighthouse 审计与评分 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 Lighthouse

Lighthouse 是 Google 的开源审核工具，它会模拟页面加载，并从性能、无障碍、最佳实践、搜索引擎优化和 PWA 等类别进行评分。它内置于 Chrome DevTools 中，也可以通过 CLI 或持续集成运行。

在 DevTools 中运行 Lighthouse

打开 DevTools，点击 Lighthouse 标签页，选择类别和设备（移动设备/桌面设备），然后点击“分析页面加载”。模拟测试大约需要 30 秒。

性能分数构成

性能分数（0–100）是以下指标的加权平均值：LCP (25%)、总阻塞时间 (30%)、CLS (25%)、FCP (10%)、速度指数 (10%)。评分标准很高——90 分及以上才算“良好”。

首次内容绘制 (FCP)

FCP 表示第一段内容（文本或图片）完成绘制的时间。它与 LCP 不同——FCP 关注任何内容，而 LCP 关注最大元素。良好：低于 1.8 秒。

总阻塞时间 (TBT)

TBT 用于衡量主线程被执行时间超过 50 毫秒的 JavaScript 任务阻塞了多久。TBT 较高意味着即使页面看起来已经准备就绪，用户仍会觉得它没有响应。

阅读“机会”部分

Lighthouse 会列出带有预计节省时间的“机会”（例如“消除阻塞渲染的资源：1.2 秒”）。按照节省时间排序——先修复影响最大的项目，以获得最大收益。

常见机会

常见的修复方式包括：延迟加载或异步加载非关键脚本，内联关键 CSS，预加载关键请求，使用 CDN，启用文本压缩（Brotli/gzip），提供现代图像格式。

Lighthouse 命令行工具

从命令行运行 Lighthouse，以执行脚本化审核。

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

GitHub Actions 中的 Lighthouse CI

在每个拉取请求上运行审核，如果分数低于阈值，就让构建失败。

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json

Lighthouse 配置：分数断言

在 lighthouserc.json 中定义断言，让分数退化的拉取请求失败。

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

节流与设备模拟

Lighthouse 默认会模拟较慢的 4G 网络和中端移动设备 CPU。这是有意为之——生产环境中使用真实设备的用户，其设备速度比您的开发机器更慢。

分数波动——为什么会不稳定

Lighthouse 的分数会在多次运行之间波动，因为 JavaScript 的执行时间存在变化。运行审核 3 到 5 次并取中位数。使用 Lighthouse CI 的 numberOfRuns 自动计算中位数。

快速检查

哪个 Lighthouse 指标用于衡量主线程被较长 JavaScript 任务阻塞了多久？

回顾：Lighthouse

Lighthouse 会审核性能、无障碍、最佳实践、搜索引擎优化和 PWA。性能分数是 LCP、TBT、CLS、FCP 和速度指数的加权平均值。“机会”部分会按照预计节省时间对修复项排序。可以通过 DevTools、CLI，或在持续集成中使用 treosh/lighthouse-ci-action 运行。面对分数波动时，应取多次运行结果的中位数。

常见问题解答

「Lighthouse 审计与评分」课时是免费的吗？

是的 — 「Lighthouse 审计与评分」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Lighthouse 审计与评分」这节课中我会学到什么？

在 DevTools 或持续集成环境中运行 Lighthouse，阅读性能分数和诊断信息，并优先处理节省空间最多的优化机会。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Lighthouse 审计与评分」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy