WEB 性能指标大揭秘
大家好，我是晨光。5 年前端开发，现在携程担任高级前端开发。最近在做页面性能优化相关的工作，一开始对于这些名词不是很清楚，学习整理了一下，好像熟悉了一些，给鱼友们也分享下，感兴趣的话请继续阅读
一、性能指标
- First Paint 首次绘制（FP）
- First contentful paint 首次内容绘制 (FCP)
- Largest contentful paint 最大内容绘制 (LCP)
- First input delay 首次输入延迟 (FID)
- Time to Interactive 可交互时间 (TTI)
- Total blocking time 总阻塞时间 (TBT)
- Cumulative layout shift 累积布局偏移 (CLS)
一）FP 和 FCP
FP 是指绘制像素FCP 是指绘制DOMFP 和 FCP 是和页面白屏相关的指标
体验优秀：2s 内
二）LCP
最大内容绘制，LCP（Largest Contentful Paint），用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变，另外该指标会在用户第一次交互后停止记录
体验优秀：2.5s 内
三）TTI
首次可交互时间，TTI（Time to Interactive）
计算过程：
- 从 FCP 指标后开始计算
- 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
- 往前回溯至 5 秒前的最后一个长任务结束的时间
执行时长超过 50 ms 就会造成延迟感，比如页面卡顿，要过会儿才能流畅
四）FID
首次输入延迟，FID（First Input Delay），记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。
这个指标主要看 用户交互事件触发到页面响应中间耗时多少
体验优秀：100ms 内
五）TBT
阻塞总时间，TBT（Total Blocking Time），记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。
比如有 5 个长任务，每个耗时 90ms，那么 TBT 就等于 （90 - 50） * 5ms = 200ms
六）CLS
累计位移偏移，CLS（Cumulative Layout Shift），记录了页面上非预期的位移波动
比如页面上有多张图片，还有很多文字段落，图片加载慢，会发现页面先呈现了文字，突然有一大片空白，过了一会发现，图片加载了出来。给用户的感觉就是，突然跳出来了一大截，造成的页面抖动的情况。
该指标的计算方式为：位移影响的面积 * 位移距离。
CLS 推荐值为低于 0.1，越低说明页面跳来跳去的情况就越少，用户体验越好
二、三大核心指标
Google 在今年五月提出了网站用户体验的三大核心指标，分别为：
- LCP
- FID
- CLS
LCP 代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但是上文说过 LCP 能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。
FID 代表了页面的交互体验指标，毕竟没有一个用户希望触发交互以后页面的反馈很迟缓，交互响应的快会让用户觉得网页挺流畅。
CLS 代表了页面的稳定指标，尤其在手机上这个指标更为重要。因为手机屏幕挺小，CLS 值一大的话会让用户觉得页面体验做得很差。
以上，全文完，有收获的话，点个赞吧～
