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