我们都听说过性能有多重要。但当我们谈论性能以及如何让网站“快速运行”时，具体指的是什么？
事实上，效果是相对的：
- 某个网站对某位用户来说可能速度很快（使用高速网络且设备性能强大），但对另一位用户来说速度可能很慢（使用低速网络且设备性能较低）。
- 两个网站可能在完全相同的时间内完成加载，但其中一个网站可能看起来加载速度更快（如果它是逐渐加载内容，而不是等到加载完成后再显示任何内容）。
- 网站可能看起来加载速度很快，但对用户互动响应缓慢（或根本不响应）。
在谈论效果时，请务必做到准确，并以指标来衡量效果。可量化衡量的客观标准，但确保您衡量的指标有用也很重要。
定义指标
过去，我们使用 load 事件衡量网站性能。不过，即使 load 是网页生命周期中的一个明确时刻，但该时刻不一定与用户关心的内容相对应。
例如，服务器可以响应一个立即“加载”的极小网页，但会延迟提取内容或在网页上显示任何内容，直到 load 事件触发后的几秒钟后。从技术层面来看，此类网页的加载时间较短，但该时间与用户体验到的网页加载速度不符。
过去几年，Chrome 团队的成员一直在与 W3C 网站性能工作组合作，致力于标准化一组新的 API 和指标，以便更准确地衡量用户对网页性能的体验。
为确保指标与用户相关，我们围绕以下几个关键问题制定了指标：
| 是否加载缓慢？ | 导航是否已成功启动？服务器是否有响应？ |
| 这对您有用吗？ | 是否呈现了足够的内容，以便用户与之互动？ |
| 是否可用？ | 用户能否与网页互动，还是网页处于繁忙状态？ |
| 您喜欢吗？ | 互动是否流畅自然，没有延迟？ |
如何衡量指标
性能指标通常通过以下两种方式衡量：
- 在实验室：使用工具在一致受控的环境中模拟网页加载
- 在现场：针对实际加载网页并与之互动的真实用户
这两种方法不一定哪种更好或更差，事实上，您通常需要同时使用这两种方法来确保良好的效果。
实验室
在开发新功能时，在实验室中测试性能至关重要。在功能正式发布之前，我们无法衡量其在真实用户中的性能特性，因此在功能发布之前在实验室中对其进行测试是防止性能回归的最佳方式。
在现场
另一方面，虽然在实验室内进行测试是衡量性能的合理方法，但并不一定能反映真实用户对您网站的体验。
网站的性能可能会因用户设备的功能和网络状况而有很大差异。它还可能会因用户是否（或如何）与网页互动而异。
网页加载也并非总是确定性的。例如，加载个性化内容或广告的网站可能会因用户而异，其性能特征会截然不同。实验室测试无法捕获这些差异。
要想真正了解网站在用户眼中的表现，唯一的方法就是在用户加载和与网站互动时实际衡量其表现。这种衡量方式通常称为实时用户监控 (RUM)。
指标类型
还有几种其他类型的指标与用户对性能的看法相关。
- 感知的加载速度：网页将其所有视觉元素加载并呈现到屏幕上的速度。
- 加载响应能力：网页加载和执行任何所需 JavaScript 代码的速度，以便组件快速响应用户互动
- 运行时响应速度：网页加载后，网页对用户互动的响应速度。
- 视觉稳定性：网页上的元素是否以用户意料之外的方式移动，并可能会干扰用户互动？
- 流畅度：转场效果和动画是否以一致的帧速率呈现，并且从一个状态流畅地过渡到下一个状态？
鉴于所有这些类型的性能指标，希望您能清楚地认识到，没有任何单一指标能够捕获网页的所有性能特征。
要衡量的重要指标
- 首次内容渲染 (FCP)：衡量从网页开始加载到网页任何一部分内容呈现在屏幕上的时间。（实验、字段）
- Largest Contentful Paint (LCP)：衡量从网页开始加载到屏幕上渲染最大文本块或图片元素所用的时间。（实验、字段）
- Interaction to Next Paint (INP)：衡量与网页进行的每一次点按、点击或键盘互动的延迟时间，并根据互动次数，选择网页最长的互动延迟时间（或接近最长的互动延迟时间）作为单个代表性值，以描述网页的总体响应速度。（实验、字段）
- Total Blocking Time (TBT)：衡量从 FCP 到 TTI 之间的总时长，在此期间，主线程处于屏蔽状态的时间够长，足以阻止输入响应。（实验）
- 累积布局偏移 (CLS)：衡量网页开始加载到其生命周期状态更改为“隐藏”之间发生的所有意外布局偏移的累计得分。（实验、字段）
- 首字节时间 (TTFB)：衡量网络响应用户请求并发送资源第一个字节所需的时间。（实验、字段）
在某些情况下，我们会引入新指标来涵盖缺失的领域，但在另一些情况下，最适合的指标是专门针对您的网站量身定制的。
自定义指标
前面介绍的性能指标有助于大致了解大多数网站的性能特征。它们还适合为网站提供一组通用指标，以便网站与竞争对手比较其表现。
不过，有时特定网站在某些方面具有独特性，因此需要额外的指标才能全面了解其性能。例如，LCP 指标旨在衡量网页的主要内容何时加载完毕，但在某些情况下，最大的元素可能不是网页的主要内容，因此 LCP 可能不相关。
为了解决此类问题，Web 性能工作组还标准化了一些较低级别的 API，这些 API 对于实现您自己的自定义指标非常有用：
- User Timing API
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- 服务器计时
请参阅自定义指标指南，了解如何使用这些 API 衡量特定于您网站的性能特征。