出现在：快速加载时间

原文地址：web.dev/your-first-…

原文作者：web.dev/authors/mih…

发布时间：2018年11月5日

当你设定个人、企业或家庭预算时，你是在为你的支出设定一个限制，并确保你在其范围内。性能预算以同样的方式工作，但对于影响网站性能的指标。

随着性能预算的建立和执行，您可以确保您的网站将尽可能快地呈现。这将为您的访问者提供更好的体验，并对业务指标产生积极影响。

以下是如何通过几个简单的步骤来定义你的第一个性能预算。

初步分析

如果你想提高现有网站的性能，首先要确定最重要的页面。例如，这些可能是拥有最高用户流量的页面或产品登陆页面。

在你确定了你的关键页面之后，就可以分析它们了。首先，我们将关注最能衡量用户体验的时间里程碑。

在Chrome DevTools的Audits面板下，你会发现Lighthouse。在Guest窗口的每个页面上运行审计，记录这两个时间。

使用访客窗口可以为您提供一个干净的测试环境，不需要任何可能干扰审计的 Chrome 扩展程序。

Chrome DevTools中的灯塔面板

我们以一个专业性很强的搜索引擎Doggos.io为例。Doggos.io旨在索引互联网上所有与狗有关的事物，其最重要的页面是主页和结果页。以下是该网站在桌面和移动端测得的FCP和TTI数据。

桌面版	FCP	TTI
首页	1,680 ms	5,550 ms
结果页	2,060 ms	6,690 ms

doggos.io的桌面分析

手机版 | FCP | TTI 首页 | 1,800 ms | 6,150 ms 结果页 | 1,100 ms | 7,870 ms

doggos.io的移动分析

竞争分析

一旦你分析了自己的网站，就该分析你的竞争对手的网站了。比较与你相似的网站的结果是计算性能预算的好方法。无论你是在做一个既定的项目还是从头开始，这都是一个重要的步骤。当你的速度比竞争对手快时，你就会获得竞争优势。

如果你不确定要看哪些网站，这里有几个工具可以试试。

谷歌搜索的 "相关："关键字。
Alexa的类似网站功能
类似网站

谷歌搜索相关关键词的截图

为了逼真，尽量找10个左右的竞争对手。

时间里程碑的预算

在这个例子中，我们的利基搜索引擎有少量的竞争对手，我们将专注于优化移动设备的主页。今天超过一半的互联网流量发生在移动网络上，使用手机号码作为默认值不仅有利于你的移动用户，也有利于你的桌面用户。

为所有类似的网站创建一个带有FCP和TTI时间的图表，并突出显示一堆网站中最快的网站。像这样的图表可以让你更清楚地了解你的网站与竞争对手相比的情况。

网站/主页	FCP	TTI
goggles.com	880 ms	3,150 ms
doggos.io	1,800 ms	6,500 ms
quackquackgo.com	2,680 ms	4,740 ms
ding.xyz	2,420 ms	7,040 ms

doggos.io在3G网络上的竞争分析

Doggos.io在FCP指标上似乎做得还不错，但在TTI上却严重落后。

有改进的空间，一个很好的指导原则是20%规则。研究指出，当响应时间的差异大于20%时，用户就会认识到这一点。这意味着，如果你想明显优于最好的同类网站，你必须至少快20%。

测量	当前时间	预算（比竞争者快20%）
FCP	1,800 ms	704 ms
TTI	6,500 ms	2,520 ms

能让博狗网好不好领先的业绩预算

如果你正试图优化一个现有的网站，这个目标似乎不可能达到。这并不是一个让你放弃的信号。从小步骤开始，并将预算设定为比你当前速度快20%。从那里开始继续优化。

对于doggos.io，修订后的预算可以是这样的。

衡量当前时间 | 初始预算（比当前时间快20%） | 长期目标（比竞争对手快20%） | 衡量当前时间初始预算（比当前时间快20%） | 长期目标（比竞争对手快20） --- | --- | --- | --- FCP | 1,800 ms | 1,440 ms | 704 ms TTI | 6,500 ms | 5,200 ms | 2,520 ms

修订后的doggos.io业绩预算

结合不同的指标

一个可靠的绩效预算结合了不同类型的指标。我们已经定义了里程碑时间的预算，现在我们将再增加两个组合。

基于数量的衡量标准
基于规则的度量

基于数量的指标预算

无论你得出的总页数是多少，都要尽量提供170KB以下的关键路径资源（压缩/压缩）。这保证了你的网站即使在廉价设备和缓慢的3G上也会很快。

你可以有更大的预算来获得桌面体验，但不要疯狂。根据HTTP Archive去年的数据，桌面和移动端的页面权重中位数都超过了1MB。要想获得一个性能优异的网站，你的目标必须远远低于这些中位数。

这里有几个基于TTI预算的例子。

网络 | 设备 | JS | 图片 | CSS | HTML | 字体 | 总大小 | 交互时间慢速3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | ~170 KB | 5s 慢4G | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3s WiFi桌面 | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2s

推荐的规模是针对关键路径资源的。

根据数量指标来定义预算是一个棘手的问题。一个有大量产品照片的电子商务网站与一个主要是文字的新闻门户网站有很大不同。如果你的网站上有广告或分析，那就会增加你的Javascript运量。

使用上面的表格作为起点，并根据你的内容类型进行调整。定义您的页面将包括哪些内容，回顾您的研究，并对单个资产大小进行有根据的猜测。例如，如果你正在构建一个有大量图片的网站，就对JS大小进行更严格的限制。

一旦你有一个工作网站，检查你在以用户为中心的性能指标上的表现，并调整你的预算。

基于规则的指标预算

非常有效的基于规则的衡量标准是Lighthouse评分。Lighthouse会从5个类别对你的应用进行评分，其中之一就是性能。性能分数是根据5个不同的指标计算出来的，包括首次内容性绘画和交互时间。

当你试图建立一个伟大的网站时，请将Lighthouse性能评分预算设置为至少85分（满分100分）。使用Lighthouse CI在pull-request上执行它。

优先处理

问问自己，你期望在你的网站上有什么程度的互动。如果是新闻网站，用户的主要目标是阅读内容，所以你应该专注于快速渲染，并保持FCP低。Doggos.com的访问者希望尽快点击相关链接，所以首要任务是低TTI。

找出你的受众到底有哪一部分是在桌面与移动设备上浏览的，并据此确定优先级。弄清楚这一点的一个方法是通过Chrome用户体验报告仪表板，查看你的受众在竞争对手的网站上做什么。

来自Chrome用户体验报告的设备分布数据

接下来的步骤

确保你的绩效预算在整个项目中得到执行，并将其纳入你的建设过程。

[Web翻译]你的第一个业绩预算