Web Performance Optimization & Lighthouse · 课时

使用 Lighthouse 设置性能预算

定义并执行性能预算，自动检查大小和指标限制，在回归问题进入生产环境前阻止它们。

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

本课时的部分内容尚未翻译，以英文显示。

What Is a Performance Budget?

A performance budget is a set of agreed limits, such as max JavaScript size or a minimum LCP, that the team commits not to exceed. It turns vague goals into enforceable thresholds.

Why Budgets Matter

Without budgets, performance erodes silently as features pile on. A budget makes regressions visible and blocking, shifting performance left into development.

Two Kinds of Budgets

Resource budgets: byte size and request counts per type (script, image, total).
Timing budgets: metric thresholds like LCP, TBT, CLS.

The budget.json File

Lighthouse reads a budget.json describing resource and timing limits. It then flags any audited page that exceeds them.

[{
  "resourceSizes": [
    { "resourceType": "script", "budget": 170 },
    { "resourceType": "total", "budget": 500 }
  ]
}]

Adding Timing Budgets

Timings are listed alongside sizes. Values are in milliseconds for time metrics.

[{
  "timings": [
    { "metric": "largest-contentful-paint", "budget": 2500 },
    { "metric": "interactive", "budget": 3800 }
  ]
}]

Running with a Budget

Pass the budget file to the Lighthouse CLI. Exceeded items appear in the report's Budgets section.

lighthouse https://example.com --budget-path=./budget.json --output=json --output-path=./report.json

Enforcing in CI with LHCI

Lighthouse CI (lhci) can assert budgets and fail the build when limits are breached, so regressions never merge.

// lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "resource-summary:script:size": ["error", { "maxNumericValue": 174080 }]
      }
    }
  }
}

Warn vs Error Levels

Assertions support warn and error levels. Start new budgets as warnings to gather data, then promote to errors once the team is confident.

Setting Realistic Limits

Base budgets on current measurements plus a small margin, or on competitor benchmarks. Budgets that are impossible to meet get ignored; budgets that are too loose never fire.

Tracking Over Time

The LHCI server stores historical results so you can chart metric and size trends and tighten budgets gradually as performance improves.

Workflow Summary

Define resource and timing budgets.
Run them locally via CLI.
Assert them in CI with LHCI.
Start as warnings, then enforce as errors.

Quick Check

You want a pull request to fail automatically when the script bundle grows beyond a set size. What achieves this?

Recap

You learned to set resource and timing budgets in budget.json, run them with the Lighthouse CLI, and enforce them in CI via Lighthouse CI assertions. Start with warnings, promote to errors, and track trends to keep performance from regressing.

常见问题解答

「使用 Lighthouse 设置性能预算」课时是免费的吗？

是的 — 「使用 Lighthouse 设置性能预算」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Performance Optimization & Lighthouse 课程的其余内容，请升级到 CoddyKit PRO。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

「使用 Lighthouse 设置性能预算」这节课中我会学到什么？

定义并执行性能预算，自动检查大小和指标限制，在回归问题进入生产环境前阻止它们。你通过在浏览器中直接运行的动手代码来练习 Web Performance Optimization & Lighthouse，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Performance Optimization & Lighthouse 需要有经验吗？

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

「使用 Lighthouse 设置性能预算」课时需要多长时间？

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

我能在这节 Web Performance Optimization & Lighthouse 课中编写并运行代码吗？

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

此课程中的所有课时

← 返回 Web Performance Optimization & Lighthouse