性能是用户体验的重要组成部分，会影响业务指标。我们很容易会想，如果你是优秀的开发者，最终就会打造出性能出色的网站，但事实上，良好的性能很少会带来负面影响。与大多数其他事务一样，要达成目标，你必须明确定义目标。通过设置效果预算来开启这一历程。
定义
性能预算是对影响网站性能的指标施加的一系列限制。这可以是网页的总大小、在移动网络上加载所需的时间，甚至是发送的 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 手机上，我们的首页必须在慢速 3G 网络下加载并可在 5 秒内进行互动
- 我们的博客在 Lighthouse 性能审核中的得分必须高于 80
在构建流程中添加性能预算
为此选择哪种工具在很大程度上取决于您项目的规模以及您可以专门用于该任务的资源。您可以借助一些开源工具在构建流程中添加预算：
如果某些数据超出了指定的阈值，您可以执行以下任一操作：
- 优化现有功能或资源 🛠?️
- 移除现有功能或资源 🗑?️
- 不添加新功能或素材资源 ✋⛔
跟踪表现
确保网站足够快速，意味着您必须在首次发布后持续衡量。随着时间的推移监控这些指标并从真实用户处获取数据，您可以了解性能变化对关键业务指标有何影响。
小结
制定性能预算的目的是确保在整个项目周期内关注性能，并且尽早设置性能有助于防止以后回溯。它应该是帮助您确定要在网站上添加哪些内容的参考点。其主要思路是设定目标，这样既能更好地平衡性能，又不会影响功能或用户体验。🎯?
下一篇指南将引导您通过几个简单的步骤确定您的首个效果预算。