前端性能优化-性能优化指标
1.以用户为中心的性能指标
First Paint 首次绘制（FP）
这个指标用于记录页面第一次绘制像素的时间，如显示页面背景色。
FP不包含默认背景绘制，但包含非默认的背景绘制。
First contentful paint 首次内容绘制 (FCP)
FCP是用户感知到页面开始加载的第一个时间点，较早的 FCP 可以让用户感觉页面正在加载，并提升用户体验。用 于衡量用户首次看到页面内容所花费的时间。如果 FP及 FCP 两指标在 2 秒内完成的话我们的页面就算体验优秀。
Largest contentful paint 最大内容绘制 (LCP)
用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可 能会发生改变，另外该指标会在用户第一次交互后停止记录。官方推荐的时间区间，在 2.5 秒内表示体验优秀
First input delay 首次输入延迟 (FID)
首次输入延迟，FID（First Input Delay），记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟。
Time to Interactive 可交互时间 (TTI)
首次可交互时间，TTI（Time to Interactive）。这个指标计算过程略微复杂，它需要满足以下几个条件：
1. 从 FCP 指标后开始计算
2. 持续 5 秒内无长任务（执行时间超过 50 ms）且无两个以上正在进行中的 GET 请求
3. 往前回溯至 5 秒前的最后一个长任务结束的时间
对于用户交互（比如点击事件），推荐的响应时间是 100ms 以内。那么为了达成这个目标，推荐在空闲时间里执行 任务不超过 50ms（ W3C 也有这样的标准规定），这样能在用户无感知的情况下响应用户的交互，否则就会造成延 迟感。
- Cumulative layout shift 累积布局偏移 (CLS)
累计位移偏移，CLS（Cumulative Layout Shift），记录了页面上非预期的位移波动。页面渲染过程中突然插入一张 巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种情况 而生的，计算方式为：位移影响的面积 * 位移距离。
- Total blocking time 总阻塞时间 (TBT)
阻塞总时间，TBT（Total Blocking Time），记录在 FCP 到 TTI 之间所有长任务的阻塞时间总和。
2.三大核心指标（Core Web Vitals）
Google 在20年五月提出了网站用户体验的三大核心指标
2.1 Largest Contentful Paint(LCP)
LCP代表了页面的速度指标，虽然还存在一些体现速度的指标，但是上文也说过LCP能体现的东西更多一些，一是指 标实时更新，数据更精确。二是代表着页面的最大元素渲染时间，通常来说页面最大的元素的快速载入能够让用户感 觉性能更好一些。
那么哪些元素可以被定义为最大元素呢？
<img>标签<image>在svg中的image标签<video>video标签- CSS background url()加载的图片
- 包含内联或文本的块级元素
如何优化LCP
LCP可能被这四个因素影响：
- 服务端响应时间
- Javascript和CSS引起的渲染卡顿
- 资源加载时间
- 客户端渲染
2.2 First Input Delay(FID)
FID代表了页面的交互体验指标，毕竟没有一个用户希望触发交互以后页面的反馈很慢，交互响应的快，会让用户觉得页面流畅
这个指标其实挺好理解，就是看用户交互事件触发到页面响应中间耗时多少，如果其中有长任务发生的话那么势必会 造成响应时间变长。推荐响应用户交互在 100ms 以内.
如何优化FID
FID可能被这四个因素影响：
- 减少第三方代码的影响
- 减少Javascript的执行时间
- 最小化主线程工作
- 减小请求数量和请求文件大小
2.3 Cumulative Layout Shift (CLS)
**CLS**
代表了页面的稳定指标，它能衡量页面是否排版稳定。尤其在手机上这个指标更为重要，因为手机屏幕挺 小，CLS值一大的话会让用户觉得页面体验做的很差。CLS的分数在0.1或以下，则为Good。
浏览器会监控两桢之间发生移动的不稳定元素。布局移动分数由2个元素决定：
impact fraction
和
distance fraction
。
layout shift score = impact fraction * distance fraction
下面例子中，竖向距离更大，该元素相对适口移动了25%的距离，所以distance fraction是0.25。所以布局移动分数 是
0.75 * 0.25 = 0.1875
。
但是要注意的是，并不是所有的布局移动都是不好的，很多web网站都会改变元素的开始位置。只有当布局移动是非用户预期的，才是不好的。
换句话说，当用户点击了按钮，布局进行了改动，这是ok的，CLS的JS API中有一个字段hadRecentInput，用来标识500ms内是否有用户数据，视情况而定，可以忽略这个计算。
如何优化CLS
我们可以根据这些原则来避免非预期布局移动：
- 图片或视屏元素有大小属性，或者给他们保留一个空间大小，设置width、height，或者使用 unsized-media feature policy 。
- 不要在一个已存在的元素上面插入内容，除了相应用户输入。
- 使用animation或transition而不是直接触发布局改变。
3.性能工具
Google开发的 所有工具 都支持Core Web Vitals的测量。工具如下：
- Lighthouse
- PageSpeed Insights
- Chrome DevTools
- Search Console
- web.dev’s提供的测量工具
- Web Vitals扩展 Qn9GkFyjIR2bBY9xoliKfMCbBEmBIxNqAyjYJf7hZb4NikbA4Vlzdf1J0%2B4zHjCN9v4IfbXdW3YvGoVWbHYHZO02OWQYRZyE1qYq95KO%2FoJ8mPfdcuMom8)
- Chrome UX Report API
版权归原作者 RyanChow54 所有， 如有侵权，请联系我们删除。