初步分析

如果您试图提高现有站点的性能，请首先确定最重要的页面。例如，这些页面可能是用户流量最大的页面或产品登录页面。

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

在ChromeDevTools的审计面板下，您可以找到Lighthouse。在访客窗口的每个页面上运行审核，以记录以下两次：

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

以一个高度专业化的搜索引擎为例，doggos.io，作为一个例子。狗狗.io目的是索引互联网上所有与狗有关的东西，它最重要的网页是主页和结果页。以下是在桌面和移动设备上测量的FCP和TTI数字。

竞争分析

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

如果您不确定要查看哪些站点，请尝试以下几种工具：

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

为了一个真实的画面，试着找到10个左右的竞争者

时间里程碑预算

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

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

还有改进的余地，一个很好的指导原则就是20%的规则。研究表明，当用户的反应大于20%时。这意味着，如果你想明显优于最好的可比网站，你必须至少快20%。

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

为doggos.io，修订后的预算可能是这样的。

组合不同的指标

可靠的性能预算结合了不同类型的指标。我们已经定义了里程碑时间安排的预算，现在我们将在组合中再添加两个：

基于数量的指标
基于规则的度量

基于数量的指标预算

不管你得出的总页数是多少，尽量提供小于170kb的关键路径资源（压缩/缩小）。这保证你的网站将是快速的，即使在廉价的设备和缓慢的3G。

你可以有一个更大的预算桌面体验，但不要疯狂。根据去年的HTTP存档数据，桌面和移动设备上的平均页面重量都超过了1MB。要想获得一个高性能的网站，你必须瞄准远低于这些中位数的目标。

以下是基于TTI预算的几个示例：

Network	Device	JS	Images	CSS	HTML	Fonts	Total	Time to Interactive budget
Slow 3G	Moto G4	100	30	10	10	20	~170 KB	5s
Slow 4G	Moto G4	200	50	35	30	30	~345 KB	3s
WiFi	Desktop	300	250	50	50	100	~750 KB	2s

建议的大小用于关键路径资源。

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

以上表为起点，根据正在处理的内容类型进行调整。定义你的页面将包括什么，回顾你的研究，并根据个人资产规模进行合理的猜测。例如，如果你正在建立一个有很多图片的网站，对JS的大小设置更严格的限制。

一旦你有了一个可以工作的网站，检查一下你在以用户为中心的性能指标上做得如何，并调整你的预算。

基于规则的指标预算

非常有效的基于规则的指标是 Lighthouse得分。Lighthouse将你的应用分为5类，其中之一就是性能。性能分数是根据5个不同的指标计算的，包括第一次满意的绘画和互动时间。

当你试图建立一个伟大的网站，设置 Lighthouse性能得分预算至少85（满分100）。使用Lighthouse CI在请求请求时强制执行。

优先次序

问问你自己，你希望在你的网站上有什么样的互动。如果它是一个新闻网站，用户的主要目标是阅读内容，所以你应该专注于快速呈现和保持低FCP。Doggos.com网站游客希望尽快点击相关链接，因此首要任务是低TTI。

找出你的读者在台式机上和移动设备上浏览的到底是哪一部分，并据此划分优先级。其中一种方法是通过Chrome用户体验报告仪表板，查看你的读者在竞争对手的网站上做了什么。

下一步行动

确保在整个项目中执行性能预算，并将其纳入构建过程中。

你的第一个性能预算（翻译）