性能指标文档
总览
FP - 首次的绘制时间，页面第一次绘制的时间
FCP - 首次内容绘制的时间，包括文本，图片，非空白 canvas 和 svg
LCP - 视窗内最大元素的绘制时间 TTI - 首次可交互时间（练习五秒内没有常任务或者两个以上的 GET 请求，五秒最后一个常任务结束的时间就是 TTI）
FID - 首次输入延迟时间，在 FCP 和 TTI 之间用户与页面交互时的相应延时时间
TBT - 阻塞总时间，FCP 和 TTI 之间常任务的阻塞时间
CLS - 累计位移偏移，记录页面上非预期的位移波动
分别描述
FCP FP
FCP 在 FP 之后，如果背景颜色绘制那已经开始 FP 了
FCP 0 ～ 2 2 ～ 4 over4
LCP
最大渲染绘制时间 LCP，会随着页面渲染变化而变化，会在用户第一次交互后停止。更能体现页面性能的好坏，会持续更新。比如页面出现骨架图或者 Loading 动画，FCP 已经开记录了，但是用户真实想看的内容还没有呈现出来，更多想知道呈现出来的时间
2.5(优秀) 4 over4
TTI
条件：
- 从 FCP 指标后开始计算
- 持续 5s 内无长任务（时间大于 50ms 的），无两次以上的 GET 请求
- 往前回溯到 5s 以前最后一个长任务结束的时间
为什么是 50ms：谷歌的 RAIL 模型，对于用户的交互要在 100ms 以内响应，那么推荐在空闲时间里面执行的任务不超过 50ms，可以无感知响应用户的操作
这个性能指标代表着页面真正可用的状态，光页面渲染块，但是不能快速响应用户的交互也不行。
FID
first input delay，是 FCP 和 TTI 之间用户首次交互延时时间：用户交互事件触发到页面响应事件中间的耗时，其中如果有常任务的话，造成响应时间过长 100(good) 300 over 300
TBT
total blocking time ，阻塞总时间，计算 FCP 和 TTI 之间有长任务阻塞的总和
比如 FCP 到 TTI 之间有下面的长短任务
每个长任务的阻塞时间等于它的时间减去 50ms
上图一共就是 345ms，他也会影响 TTI 的时间
CLS
Cumulative Layout Shift 累计位置偏移：突然插入一个巨大图片或者按钮动态插入一段内容，影响用户体验：位移影响面积 * 位移距离
上图移动了 25%的位置，影响了 75%的面积， 0.25*0.75 = 0.1875
0.1 (good) 0.25 over 0.25
三大核心指标
LCP：代表了页面的速度指标，指标实时更新，数据更加精确，也代表了最大元素的渲染时间，通常来说页面最大元素的快速载入能让用户觉得页面性能好
FIB：代表了页面交互的体验指标，没有用户希望交互后的反馈很迟缓，交互快让用户觉得页面顺畅
CLS：代表页面的稳定性，在手机上很重要，CLS 太大的话在小屏幕上用户会觉得用户体验做得很差
指标优化
优化 FP LCP FCP
- 压缩文件，使用 tree-shaking 删除无用代码
- 服务器 GZIP 进一步压缩文件体积
- 资源按需加载
- 通过 Chrome DevTools 分析首屏不需要的 css 文件，精简 css
- 内联关键的 css 文件
- 使用 CDN 加载资源，dns-prefetch 预解析 dns 的 IP 地址
- 对资源使用 preconnect，预先进行 IP 解析，TCP 握手，TLS 握手
- 缓存文件，对首屏数据做离线存储
- 图片优化：CSS 代替图片，裁剪适配屏幕的图片尺寸，小图片用 base64 或者 PNG 格式，支持 WebP 的用 WebP，渐进式加载图片
优化 TTI，TBT，FID
- webworker，把耗时的任务放到 1 子线程，让 js 主线程不卡顿的情况下处理 js 任务
优化 CLS
- 使用骨架图给用户一个内容框架的预期，突兀的内容对体验不好
- 图片要设置宽高，使用占位图给用户一个图片位置的预期
- 不要在现有内容上插入内容，起码预留位置
