学习 Google 衡量网页效能指标！TTFB, FCP, LCP, FID, INP, CLS, TTI, TBT
前言
原先只想写写关于 核心 Web 指标 关联的三个指标解释而已……结果发现一窝蜂的指标还是有必要去认识，因此本文挑战用自己的方式去理解并解释所有 Google 提出的网页体验相关指标，阵容豪华绝对 学不完 🥺 够学。
我发现没有必要一次性记忆所有种类的指标，因此制作了一个懒人包与该文章，方便你我查询与学习：
指标的测量
指标就是为了能够客观测量网站体验而生的统计数值，在深入了解各项指标之前先来了解一下指标的测量基础依据：
| 是否正在发生？ | |
| 是否有用？ | 是否渲染了足够的内容让用户可以深入其中？ 关联指标：LCP |
| 是否可用？ | |
| 是否令人愉快？ | 页面互动起来是否流畅自然？没有延迟卡顿？ 关联指标：CLS |
以及延伸出来的指标种类如下：
| 感知加载速度 | 页面加载渲染出所有视觉元素的速度 |
| 加载响应度 | 页面加载和执行任何所需的 JavaScript 所需的速度 |
| 运行时响应度 | 页面加载后，对用户互动的响应速度 |
| 视觉稳定性 | 页面加载过程内容元素变更位置的程度 |
| 滑顺度 | 页面变化时保持稳定帧率和顺畅性的程度 |
TTFB - 首次字节时间
测量网页加载过程中从请求一个资源到第一个字节响应所需的时间，从这项指标中主要可以了解用户获取资源的速度，是在其他指标之前最为根基的指标。越好的 TTFB 代表网页「正在发生」，用户可以越快速的获取资源」。
FCP - 首次内容绘制
测量网页加载过程中「首个内容的出现所需的时间」，所谓的内容指的是文字、图片（包含背景图片）、<svg> 元素或非白色的 <canvas> 元素。也就是测量网页要花多久时间去显示其内容。从这项指标中主要可以了解网页的加载速度，越好的 FCP 越能说服用户网页「正在发生」。
LCP - 最大内容绘制 🌟
测量网页加载过程中「首个最大内容的出现所需的时间」，所谓的最大内容包含：
也就是测量网页要花多久时间去显示其最大内容，从这项指标中主要可以了解网页加载时用户的体验，越好的 LCP 越能说服用户网页「是否有用」。
FID - 首次输入延迟(已被 INP 取代) 🌟
测量网页加载过程中第一次与网站互动（点选链接、按钮或是使用自定义的 JavaScript 控制），「浏览器能够回应互动的时间点」，也就是测量网页要花多久时间去回应用户的互动，从这项指标中主要可以了解网页的互动性，越好的 FID 越能说服用户网页「是否可用」。
具体来说该指标计算用户首次互动需要花多少时间浏览器才能反应（不包含事件处理的时间），随着用户的行为不同结果也会不同。
INP - 互动到下一次绘制 🌟
INP 在 2024 年 3 月取代 FID，同样是测量网页要花多久时间去回应用户的互动，但 INP 会以网页整体的互动品质来进行评估，而不是仅依据第一次互动的延迟时间。相较于 FID 是一款页面加载型指标，INP 更是一款用于测试整体网站可靠程度的指标，越好的 INP 越能说服用户网页「是否可用」。
具体来说该指标观察用户在网页访问期间发生的点击、轻触和键盘互动所经历的延迟时间，并且只会计算从行为触发 ～ 主执行线程被占用 ～ 准备可以开始渲染画面反馈这段时间，也就是说主执行线程以外的等待时间并不算在内（例如按下按钮后发送表单请求的等待时间）。
CLS - 累积布局偏移 🌟
测量网页「内容的稳定性」也就是测量网页内容位置变换的频繁程度，从这项指标中主要可以了解网页在视觉上的稳定性，越好的 FID 越能让用户感受网页使用起来「是令人愉悦的」。
TTI - 可互动时间
测量网页要花多久时间让用户可以与网页互动，从这项指标中主要可以了解网页的互动性，越好的 TTI 越能说服用户网页「是否可用」。网页会因为执行序被堵塞而导致事项被延迟执行，或是受 JavaScript 控制的界面还未完整的载入，这些都会导致网页无法与用户互动，这些问题应当被测量且尽可能的避免。
具体来说该数值会先从 FCP 发生的时间点开始计算，并且找到在网页加载过程中最后的长事项的结尾，该区间就是 TTI 的计算范围，如果并没有任何长事项则将会以 FCP 的时间点作为 TTI 的数值。
TBT - 总阻塞时间
测量 FCP 与 TTI 之间主执行线程被阻塞到影响输入的响应性的时间，也就是测量网页在加载过程中繁忙到无法回应的长度，从这项指标中主要可以了解网页的互动性，越好的 TBT 越能说服用户网页「是否可用」。浏览器必须等到该项任务完成才能回应用户的互动，计算模拟图表如下：
| 事项处理时长 | 事项阻塞时间 | |
|---|---|---|
| 事项一 | 250 ms | 200 ms |
| 事项二 | 90 ms | 40 ms |
| 事项三 | 35 ms | 0 ms |
| 事项四 | 30 ms | 0 ms |
| 事项五 | 155 ms | 105 ms |
| 总阻塞时间 | 345 ms | |
总结
本篇文章是我的进阶消化版，实际上 Google 的文件已经很完整了，如果想要更深入了解，可以参考 以用户为中心的性能指标 有完善的解释，翻译也齐全。随着网页的发展，指标也会随之改变，因此本篇文章会持续更新，如果有任何错误或是建议，欢迎告知！
补充
长事项
当主执行线程执行单个事项超过 50 毫秒就会被视为是一件长事项。TTI 与 TBT 皆构建于长事项 API 之上。
网页核心指标（Core Web Vitals）
网页核心指标旨在简化环境，并帮助网站专注于最重要的指标。如果使用 Google 提供的网站检测工具，像是 PageSpeed，会使用以上的网页指标： LCP 、 FID 或 CLS 为网站评分分数，分别从性能、交互性与视觉稳定为衡量基准，来测量该网页的浏览体验。
网页分数测量基准
以上三种网页指标基准都是根据 Google 统整并定义出来的，其中行动装置与电脑也会根据性能上的差异有不一样的要求，详细可以参考看看：定义核心 Web 指标阀值。
此外须留意 Google 的搜索引擎会根据网站的所有页面统整做个综合评分，如果 75% 的页面达成「优良」评分，那么该网站在该指标下就会被评为「优良」，因此监控整体网站内所有页面的评分是重要的。
参考资料
- First Contentful Paint (FCP) - web.dev
- Largest Contentful Paint (LCP) - web.dev
- First Input Delay (FID) - web.dev
- Interaction to Next Paint (INP) - web.dev
- Cumulative Layout Shift (CLS) - web.dev
- Time to First Byte (TTFB) - web.dev
- Time to Interactive (TTI) - web.dev
- Total Blocking Time (TBT) - web.dev