当您设定个人、企业或家庭预算时，您就是在设定支出限额并确保您保持在限额内。性能预算的工作方式相同，但适用于影响网站性能的指标。
通过建立并执行性能预算，您可以确保您的网站将尽快呈现。这将为您的访问者提供更好的体验，并对业务指标产生积极影响。
以下是如何通过几个简单的步骤来定义您的第一个性能预算。
初步分析
如果您想提高现有网站的性能，请先确定最重要的页面。例如，这些可能是用户流量最高的页面或产品登陆页面。
确定关键页面后，就该分析它们了。首先，我们将关注最能衡量用户体验的时间里程碑。
因为 Chrome DevTools 的 Lighthouse 的面板，在国内无法使用，我们用node.js的lighthouse包来运行。
安装
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
运行
lighthouse https://www.baidu.com/
在访客窗口中的每个页面上运行审核以记录以下两次：
首次内容绘制 (FCP)
交互时间 (TTI)
使用访客窗口可为您提供一个干净的测试环境，而没有任何可能干扰审核的 Chrome 扩展程序。
让我们以高度专业化的搜索引擎"百度" 为例。其最重要的页面是主页和结果页面。以下是针对移动网站测量的 FCP 和 TTI 数字。
首页
结果页
竞争分析
一旦您分析了自己的网站，就该分析竞争对手的网站了。比较与您的网站相似的网站的结果是确定性能预算的好方法。无论您是从事已建立的项目还是从头开始，这都是重要的一步。当您比竞争对手更快时，您就会获得竞争优势。
基于数量的指标的预算
无论您想出的总页面权重数字是多少，请尝试提供低于 170 KB 的关键路径资源（压缩/缩小）。这保证您的网站即使在便宜的设备和慢速 3G上也能很快。
您可以为桌面体验拥有更大的预算，但不要太疯狂。根据去年的HTTP Archive数据，桌面和移动设备上的页面重量中值均超过 1MB 。要获得性能良好的网站，您的目标必须远低于这些中位数。
以下是一些基于 TTI 预算的示例：
网络 | 设备 | JS | 图片 | CSS | HTML | 字体 | 全部的 | 互动预算时间 |
慢3G | 摩托 G4 | 100 | 30 | 10 | 10 | 20 | ~170 KB | 5s |
慢4G | 摩托 G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3s |
无线上网 | 桌面 | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2s |
建议的大小适用于关键路径资源。
根据数量指标定义预算是一项棘手的工作。拥有大量产品照片的电子商务网站与主要是文本的新闻门户网站截然不同。如果您的网站上有广告或分析，则会增加您发送的 JavaScript 数量。
使用上表作为起点，并根据您正在处理的内容类型进行调整。定义您的页面将包含的内容、查看您的研究并对个别资产规模进行有根据的猜测。例如，如果您正在构建一个包含大量图像的网站，则对 JS 大小进行更严格的限制。
一旦你有了一个工作网站，检查你在以用户为中心的性能指标上的表现并调整你的预算。
基于规则的指标的预算
非常有效的基于规则的指标是Lighthouse分数。Lighthouse 将您的应用程序分为 5 个类别，其中之一是性能。性能分数是根据5 个不同的指标计算的，包括首次内容绘制和交互时间。
当您尝试构建出色的站点时，请将 Lighthouse 性能得分预算设置为至少 85（满分 100）。使用Lighthouse CI强制执行拉取请求。
优先
问问自己您期望在您的网站上进行何种程度的互动。如果是新闻网站，用户的主要目标是阅读内容，因此您应该专注于快速呈现并保持低 FCP。Doggos.com 访问者希望尽快点击相关链接，因此优先考虑低 TTI。
