出现在：快速加载时间
原文地址：web.dev/performance…
原文作者：web.dev/authors/mih…
发布时间：2018年11月5日
性能是用户体验的重要组成部分，它影响着业务指标。如果你是一个优秀的开发者，你会认为你最终会得到一个性能良好的网站，这是很有诱惑力的，但事实是，良好的性能很少是副作用。和其他大多数事情一样，要达到一个目标，你必须清楚地定义它。通过设定性能预算来开始这个旅程。
定义
性能预算是对影响网站性能的指标施加的一系列限制。这可能是一个页面的总大小，在移动网络上加载所需的时间，甚至是发送的HTTP请求的数量。定义一个预算有助于开始网络性能对话。它可以作为设计、技术和添加功能的决策参考点。
有了预算，设计师就可以考虑高分辨率图像的效果和他们选择的网络字体的数量。它还可以帮助开发人员比较处理问题的不同方法，并根据其大小和解析成本评估框架和库。
选择度量
基于数量的衡量标准 ⚖️
这些指标在开发的早期阶段很有用，因为它们突出了包含大量图片和脚本的影响。它们也很容易与设计师和开发人员沟通。
我们已经提到了一些你可以包含在性能预算中的东西，比如页面权重和HTTP请求的数量，但你可以将这些分成更细的限制，比如。
- 图片的最大尺寸
- 网页字体的最大数量
- 脚本的最大尺寸，包括框架
- 第三方脚本等外部资源总数
然而，这些数字并不能告诉你很多关于用户体验的信息。两个请求数相同或权重相同的页面，根据资源被请求的顺序不同，呈现的效果也会不同。如果其中一个页面上的英雄图片或样式表等关键资源加载较晚，用户会等待较长时间才能看到有用的东西，并认为该页面较慢。如果在另一个页面上，最重要的部分加载得很快，如果页面的其他部分没有加载，他们可能根本不会注意到。
基于关键路径的渐进式页面渲染图片
这就是为什么要跟踪另一种类型的指标的原因。
里程碑的时间安排 ⏱️
里程碑定时器标记了在页面加载过程中发生的事件，如DOMContentLoaded或加载事件。最有用的定时器是以用户为中心的性能指标，可以告诉你一些关于加载页面的体验。这些指标可以通过浏览器API和Lighthouse报告的一部分获得。
首次内容填充（FCP）衡量浏览器何时显示DOM中的第一个内容，如文本或图片。
交互时间（TTI）衡量的是一个页面完全交互并可靠地响应用户输入所需的时间。如果你希望在页面上有任何形式的用户互动，比如点击链接、按钮、打字或使用表单元素，那么这是一个非常重要的指标。
基于规则的度量标准 💯
Lighthouse和WebPageTest会根据一般的最佳实践规则来计算性能分数，你可以将其作为指导。作为奖励，Lighthouse还为你提供了简单的优化提示。
如果你能将基于数量的性能指标和以用户为中心的性能指标结合起来，就能获得最佳效果。在项目的早期阶段就关注资产规模，并尽快开始跟踪FCP和TTI。
建立一个基线
真正知道什么对你的网站最有效的唯一方法是尝试它-研究，然后测试你的发现。分析竞争对手，看看你是如何堆积起来的。🕵️
如果你没有时间，这里有很好的默认数字可以让你开始。
- 5秒以下 互动时间
- 170KB以下的关键路径资源(压缩/精简)
这些数字是根据现实世界的基线设备和3G网络速度计算出来的。如今超过一半的互联网流量发生在移动网络上，所以你应该以3G网络速度作为起点。
预算的例子
你应该为你网站上不同类型的页面制定一个预算，因为内容会有所不同。比如说
- 我们的产品页面必须在移动端运送少于170KB的JavaScript。
- 我们的搜索页面必须包含桌面上少于2 MB的图片。
- 我们的主页必须在<5秒内加载，并在Moto G4的3G慢速手机上获得互动。
- 我们的博客必须在Lighthouse绩效审核中获得>80分的成绩
将性能预算添加到您的构建过程中
Webpack、bundlesize和Lighthouse的标志
为此选择一个工具在很大程度上取决于你的项目规模和你可以投入的资源。有一些开源工具可以帮助你在构建过程中添加预算。
如果某些东西超过了定义的阈值，你可以或者。
- 优化现有的功能或资产🛠️
- 删除现有的功能或资产 🗑️。
- 不添加新功能或资产✋⛔。
跟踪性能
确保你的网站足够快，意味着你必须在初始启动后继续测量。随着时间的推移监测这些指标，并从真实用户那里获得数据，将向你展示性能的变化如何影响关键业务指标。
总结
性能预算的目的是确保你在整个项目中专注于性能，尽早设定它将有助于防止以后反悔。它应该是帮助你弄清楚网站上要包含哪些内容的参考点。主要的想法是设定目标，这样你就可以在不损害功能或用户体验的情况下，更好地平衡性能.🎯。
接下来的指南将引导你用几个简单的步骤来定义你的第一个性能预算。
