性能是用户体验的重要组成部分，它会 影响业务指标。人们很容易认为，如果你是一名优秀的开发者，最终会得到一个性能良好的网站，但事实是，良好的性能很少是自然而然产生的。与大多数其他事情一样，要实现目标，你必须明确定义它。通过设置性能预算来开始这段旅程。
定义
性能预算是一组对影响网站性能的指标施加的限制。这可以是页面的总大小、在移动网络上加载所需的时间，甚至可以是发送的 HTTP 请求数。定义预算有助于启动关于 Web 性能的对话。它可以作为就设计、技术和添加功能做出决策的参考点。
有了预算，设计师可以思考高分辨率图像和他们选择的 Web 字体数量的影响。它还可以帮助开发人员比较解决问题的不同方法，并根据框架和库的大小和 解析成本 来评估它们。
选择指标
基于数量的指标 ⚖️
这些指标在开发的早期阶段非常有用，因为它们突出了包含大型图像和脚本的影响。它们也很容易与设计师和开发人员沟通。
我们已经提到了一些你可以包含在性能预算中的内容，例如页面权重和 HTTP 请求的数量，但你可以将这些内容分解为更细粒度的限制，例如
- 图像的最大大小
- Web 字体最大数量
- 脚本（包括框架）的最大大小
- 外部资源（如第三方脚本）的总数
但是，这些数字并没有告诉你太多关于用户体验的信息。两个具有相同请求数或相同权重的页面可能会因资源请求顺序的不同而呈现不同的效果。如果一个 关键资源（如首页大图或其中一个页面上的样式表）在加载过程中加载较晚，用户将等待更长时间才能看到有用的内容，并认为页面速度较慢。如果另一个页面上最重要的部分加载速度很快，他们甚至可能不会注意到页面的其余部分是否没有加载。
这就是为什么跟踪另一种类型的指标很重要。
里程碑时间 ⏱️
里程碑时间标记页面加载期间发生的事件，例如 DOMContentLoaded 或 load 事件。最有用的时间是 以用户为中心的性能指标，它们告诉你一些关于页面加载体验的信息。这些指标可通过 浏览器 API 和 Lighthouse 报告获得。
首次内容绘制 (FCP) 衡量浏览器何时显示来自 DOM 的第一位内容，例如文本或图像。
可交互就绪时间 (TTI) 衡量页面变为完全可交互并可靠地响应用户输入所需的时间。如果你希望页面上有任何类型的用户交互，例如单击链接、按钮、键入或使用表单元素，那么这是一个非常重要的指标。
基于规则的指标 💯
Lighthouse 和 WebPageTest 根据通用最佳实践规则计算 性能得分，你可以将其用作指导原则。作为奖励，Lighthouse 还为你提供简单的优化提示。
如果你同时跟踪基于数量和以用户为中心的性能指标，你将获得最佳结果。在项目的早期阶段关注资源大小，并尽快开始跟踪 FCP 和 TTI。
建立基准
真正了解什么最适合你的网站的唯一方法是尝试它——研究，然后测试你的发现。分析竞争对手，看看你的表现如何。🕵️
如果你没有时间这样做，这里有一些好的默认数字可以帮助你入门
- 5 秒 以下的可交互就绪时间
- 170 KB 以下的 关键路径 资源（已压缩/最小化）
这些 数字 是根据真实世界的基准设备和 3G 网络速度计算出来的。今天，超过一半的互联网流量发生在移动网络上，因此你应该使用 3G 网络速度作为起点。
预算示例
你应该为网站上不同类型的页面制定预算，因为内容会有所不同。例如
- 我们的产品页面在移动设备上必须传输小于 170 KB 的 JavaScript
- 我们的搜索页面在桌面设备上必须包含小于 2 MB 的图像
- 我们的首页必须在 Moto G4 手机的慢速 3G 网络上在 < 5 秒内加载并可交互
- 我们的博客必须在 Lighthouse 性能审核中得分 > 80
将性能预算添加到你的构建流程中
选择用于此目的的工具在很大程度上取决于你的项目规模和你可以为此任务投入的资源。有一些开源工具可以帮助你将预算添加到构建流程中
如果某些内容超过了定义的阈值，你可以选择
- 优化现有功能或资源 🛠️
- 删除现有功能或资源 🗑️
- 不添加新功能或资源 ✋⛔
跟踪性能
确保你的网站足够快意味着你必须在首次发布后继续衡量。随着时间的推移监控这些指标并从真实用户那里获取数据将向你展示性能变化如何影响关键业务指标。
总结
性能预算的目的是确保你在整个项目中关注性能，并在早期设定它将有助于防止以后出现回溯。它应该是帮助你确定网站上包含哪些内容的参考点。主要思想是设定目标，以便你可以更好地平衡性能，而不会损害功能或用户体验。🎯
下一份指南将引导你完成在几个简单步骤中定义你的第一个性能预算。