在设置个人、企业或家庭预算时，就是为支出设置一个上限，并确保不超出预算范围。效果预算的原理相同，但适用于影响网站性能的指标。
确定并强制实施性能预算后，您便可以确保网站尽快呈现。这将为您的访问者提供更好的体验，并对业务指标产生积极影响。
下面介绍了如何通过几个简单的步骤确定您的第一笔效果预算。
初步分析
如果您想尝试提升现有网站的性能，请先确定最重要的网页。例如，用户流量最高的网页或商品着陆页。
确定关键网页后，就该对其进行分析了。首先，我们将重点关注能够最有效地衡量用户体验的时间里程碑。
在 Chrome 开发者工具中的“ Audits”面板下，您可以找到 Lighthouse。对访客窗口中的每个页面运行审核，以记录以下两次：
我们以一个高度专业的搜索引擎 Doggos.com 为例。Doggos.com 的目标是将互联网上所有与狗狗相关的内容编入索引，其中最重要的网页是首页和结果页。以下是该网站在桌面设备和移动设备上的 FCP 和 TTI 数据。
| 桌面设备 | FCP | TTI |
|---|---|---|
| 首页 | 1,680 毫秒 | 5,550 毫秒 |
| 结果页 | 2,060 毫秒 | 6,690 毫秒 |
| 移动设备 | FCP | TTI |
|---|---|---|
| 首页 | 1,800 毫秒 | 6,150 毫秒 |
| 结果页 | 1,100 毫秒 | 7,870 毫秒 |
竞争力分析
分析了您自己的网站之后，就该分析竞争对手的网站了。通过比较与您的网站类似的网站的结果，可以很好地确定性能预算。无论您是在制定一个成熟的项目，还是从头开始，这是一个重要的步骤。只有当速度超过竞争对手时，您才能获得竞争优势。
如果您不确定要查看哪些网站，可以尝试使用以下工具：
- Google 搜索的“related:”关键字
- Alexa 的类似网站功能
- SimilarWeb
如果想要展示真实的画面，请尝试找出 10 个左右的竞争对手。
用于实现里程碑目标的预算
在本示例中，我们的小众搜索引擎有多个竞争对手，我们将专注于针对移动设备优化首页。目前，超过一半的互联网流量都来自移动网络，将手机号码作为默认选项不仅会让您的移动用户受益，也会让桌面设备用户受益。
创建一个图表，其中包含所有类似网站的 FCP 时间和 TTI 时间，并突出显示其中速度最快的网站。通过类似这张图表，您可以更清楚地了解您的网站与竞争对手相比表现如何。
| 网站/首页 | FCP | TTI |
|---|---|---|
| goggles.com | 880 毫秒 | 3,150 毫秒 |
| Doggos.com | 1,800 毫秒 | 6,500 毫秒 |
| quackquackgo.com | 2,680 毫秒 | 4,740 毫秒 |
| ding.xyz | 2,420 毫秒 | 7,040 毫秒 |
有改进的空间，20% 法则对此是一个很好的指导原则。研究表明，当响应时间大于 20% 时，用户会发现差异。这意味着，如果您希望明显优于同类网站，就必须至少加快 20%。
| 测量 | 当前时间 | 预算（比竞争对手快 20%） |
|---|---|---|
| FCP | 1,800 毫秒 | 704 毫秒 |
| TTI | 6,500 毫秒 | 2,520 毫秒 |
如果您正在尝试优化现有网站，该目标似乎无法实现。这并不是你要放弃的信号。从一小步着手，将预算设置为比当前速度快 20% 的速度。在此基础上持续优化。
而对于 Doggos.com，调整后的预算将如下所示。
| 测量 | 当前时间 | 初始预算（比当前时间快 20%） | 长期目标（比竞争对手快 20%） |
|---|---|---|---|
| FCP | 1,800 毫秒 | 1,440 毫秒 | 704 毫秒 |
| TTI | 6,500 毫秒 | 5,200 毫秒 | 2,520 毫秒 |
组合不同的指标
可靠的效果预算结合了不同类型的指标。我们已经定义了重大事件计时的预算，现在我们会再添加两项：
- 基于数量的指标
- 基于规则的指标
基于数量的指标的预算
无论您想到的网页总大小是多少，都请尽量传送小于 170 KB 的关键路径资源（已压缩/缩减）。这样可以保证您的网站即使在价格低廉的设备和慢速 3G 的情况下也能保持快速运行。
您可以为桌面版网站增加预算，但切勿错失良机。根据去年的 HTTP Archive 数据，桌面设备和移动设备上的页面大小中位数都超过了 1MB。要打造一个性能出色的网站，你的目标必须远低于这些中位数。
以下是基于 TTI 预算的一些示例：
| 网络 | 设备 | JS | 图片 | CSS | HTML | 字体 | 总计 | 可交互时间预算 |
|---|---|---|---|---|---|---|---|---|
| 慢 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | 约 170 KB | 5 秒 |
| 慢速 4G | Moto G4 | 200 | 50 | 35 | 30 | 30 | 约 345 KB | 3 秒 |
| WiFi | 桌面设备 | 300 | 250 | 50 | 50 | 100 | 约 750 KB | 2 秒 |
根据数量指标定义预算是一项棘手的工作。包含大量产品照片的电子商务网站与主要是文字的新闻门户网站截然不同。如果您的网站上有广告或分析功能，这会增加您传送的 JavaScript 数量。
以上表为起点，根据您处理的内容类型进行调整。指定您的网页将要包含的内容，查看您的研究，并对各个素材资源的尺寸进行有根据的推测。例如，如果您构建的网站包含大量图片，则应对 JS 大小施加更严格的限制。
您拥有可正常运行的网站后，请检查以用户为中心的效果指标，并调整预算。
基于规则的指标的预算
Lighthouse 得分是非常有效的基于规则的指标。Lighthouse 按 5 个类别对您的应用进行评分，其中一个类别是性能。性能得分基于 5 个不同的指标计算得出，包括 First Contentful Paint 和 Time to Interactive。
当您尝试构建出色的网站时，请将 Lighthouse 性能得分预算设置为至少 85（满分为 100）。使用 Lighthouse CI 对拉取请求强制执行该 CI。
排定优先级
问问自己，您希望自己网站上的互动程度如何。如果是新闻网站，用户的主要目标是阅读内容，因此您应专注于快速呈现，并保持较低的 FCP。Doggos.com 的访问者希望尽快点击相关链接，因此首要任务是降低 TTI。
准确了解您的受众群体是使用桌面设备和移动设备浏览的哪一部分，并相应地确定优先顺序。若要了解这一点，一种方法是，通过 Chrome 用户体验报告信息中心，查看您的受众群体在竞争对手网站上都执行了哪些操作。
后续步骤
确保在整个项目中强制执行性能预算，并将其纳入到构建流程中。