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