基于用户体验的性能指标是 Google 在 web.dev 提出的。
First Contentful Paint（FCP）
FCP（First Contentful Paint）首次内容绘制，浏览器首次绘制来自 DOM 的内容的时间，内容必须是文本、图片（包含背景图）、非白色的 canvas 或 SVG，也包括带有正在加载中的 Web 字体的文本。
添加图片注释，不超过 140 字（可选）
这是用户第一次开始看到页面内容，但仅仅有内容，并不意味着它是有用的内容（例如 Header、导航栏等），也不意味着有用户要消费的内容。
速度指标
| FCP 时间（以秒为单位） | 颜色编码 | FCP分数（HTTP存档百分位数） |
|---|---|---|
| 0–2 | 绿色（快速） | 75–100 |
| 2–4 | 橙色（中等） | 50–74 |
| 超过4 | 红色（慢） | 0–49 |
优化方案
Largest Contentful Paint（LCP）
LCP（Largest Contentful Paint）最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间。
LCP 考虑的元素：
为了提供良好的用户体验，网站应力争使用 2.5 秒或更短的“最大内容绘画” 。为确保您达到大多数用户的这一目标，衡量移动设备和台式机设备的页面加载量的第75个百分位数是一个很好的衡量标准。
以下是一些示例：
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
在以上两个时间轴中，最大的元素随内容加载而变化。在第一个示例中，新内容被添加到DOM中，并且更改了最大的元素。在第二个示例中，布局发生更改，以前最大的内容从视口中删除。
通常情况下，延迟加载的内容要比页面上已有的内容大，但不一定是这种情况。接下来的两个示例显示了在页面完全加载之前发生的最大内容绘画。
添加图片注释，不超过 140 字（可选）
添加图片注释，不超过 140 字（可选）
在第一个示例中，Instagram 徽标相对较早地加载，即使逐渐显示其他内容，它仍然是最大的元素。在 Google 搜索结果页面示例中，最大的元素是一段文本，该文本在任何图像或徽标加载完成之前显示。由于所有单个图像均小于此段，因此在整个加载过程中，它始终是最大的元素。
在 Instagram 时间轴的第一帧中，您可能会注意到相机徽标周围没有绿色框。那是因为它是一个 元素，并且 元素当前不被视为 LCP 候选对象。
速度指标
| LCP 时间（以秒为单位） | 颜色编码 |
|---|---|
| 0-2.5 | 绿色（快速） |
| 2.5-4 | 橙色（中等） |
| 超过4 | 红色（慢） |
优化方案
Total Block Time（TBT）
Total Block Time（TBT）总阻塞时间，度量了 FCP 和 TTI 之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。
只要存在长任务，该主线程就会被视为“阻塞”，该任务在主线程上运行超过50毫秒（ms）。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务。因此，如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。
如果任务足够长（例如，超过50毫秒的任何时间），则用户很可能会注意到延迟并感觉页面缓慢或过时。
给定的长任务的阻止时间是其持续时间超过50毫秒。页面的总阻塞时间是FCP和TTI之间发生的每个长任务的阻塞时间的总和。
例如，考虑页面加载期间浏览器主线程的下图：
添加图片注释，不超过 140 字（可选）
上面的时间轴有五个任务，其中三个是长任务，因为它们的持续时间超过50毫秒。下图显示了每个长任务的阻塞时间：
添加图片注释，不超过 140 字（可选）
因此，虽然在主线程上运行任务花费的总时间为560毫秒，但只有345毫秒的时间被视为阻塞时间。
速度指标
| TBT时间 （以毫秒为单位） | 颜色编码 |
|---|---|
| 0–300 | 绿色（快速） |
| 300-600 | 橙色（中等） |
| 超过600 | 红色（慢） |
优化方案
Cumulative Layout Shift（CLS）
Cumulative Layout Shift（CLS）累计布局偏移，CLS 会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性从而提升用户体验的指标方案。
添加图片注释，不超过 140 字（可选）
您是否曾经在页面上突然发生变化时在没有警告的情况下，文字移动了，并且您失去了位置。甚至更糟：您将要点击一个链接或一个按钮，但是在手指落下的瞬间，链接移动了，您最终单击了其他东西！
页面内容的意外移动通常是由于异步加载资源或将 DOM 元素动态添加到现有内容上方的页面而发生的。罪魁祸首可能是尺寸未知的图像或视频，呈现比其后备更大或更小的字体，或者是动态调整自身大小的第三方广告或小部件。
速度指标
| CLS 时间（以毫秒为单位） | 颜色编码 |
|---|---|
| 0–0.1 | 绿色（快速） |
| 0.1-0.25 | 橙色（中等） |
| 超过0.25 | 红色（慢） |
优化方案
Speed Index
Speed Index（速度指数）是一个表示页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
测量方式
捕获浏览器加载页面过程的视频，然后对每 100ms 间隔的页面截图计算页面内容填充的百分比，可以得到这样一个曲线。
添加图片注释，不超过 140 字（可选）
图中的 Example 1 和 Example 2 都是在 10s 时页面填充完成，但 Example 1 在 2s 时就已经填充了 80% 的内容，而 Example 2 在 8s 时才填充 80%。
图中阴影部分的面积（即时间-内容填充百分比曲线以上部分）的大小即可表示可视区域内页面内容的填充速度，面积越小，填充速度越快。
速度指标
| 速度指数 （以秒为单位） | 颜色编码 | 速度指数得分 |
|---|---|---|
| 0–4.3 | 绿色（快速） | 75–100 |
| 4.4–5.8 | 橙色（中等） | 50–74 |
| 5.8以上 | 红色（慢） | 0–49 |
优化方案
今天先给大家整理这么多，欢迎大家砸坑，最后给大家推荐一个小编认为还不错的[技术博客（www.tzmac.cn）]，希望对你有用！
