前端性能优化指标 + 检测工具

文章目录

前端性能优化指标 + 检测工具
- 整体概览
- - FCP(First Contentful Paint)
  - LCP(Largest Contentful Paint)
  - FID(First Input Delay)
  - TTI(Time to Interactive)
  - TBT(Total Block Time)
  - CLS(Cumulative Layout Shift)
  - 总结
- 三大核心指标
- 如何获取指标
- - web-vitals-extension
  - Lighthouse
  - Chrome DevTools
- 首屏时间(FCP) VS 白屏时间(FP)
- - 白屏（First Paint）
  - - 白屏时间计算
  - 首屏 (First Contentful Paint)
  - - 首屏时间计算
  - 该计算首屏时间还是白屏时间？

整体概览

关键时间节点	描述	含义
`TTFB`	`time to first byte`(首字节时间)	从请求到数据返回第一个字节所消耗时间
`TTI`	`Time to Interactive`(可交互时间)	DOM树构建完毕，代表可以绑定事件
`DCL`	`DOMContentLoaded` (事件耗时)	当 HTML 文档被完全加载和解析完成之后，`DOMContentLoaded` 事件被触发
`L`	`onLoad` (事件耗时)	当依赖的资源全部加载完毕之后才会触发
`FP`	`First Paint`（首次绘制)	第一个像素点绘制到屏幕的时间
`FCP`	`First Contentful Paint`(首次内容绘制)	首次绘制任何文本，图像，非空白节点的时间
`FMP`	`First Meaningful paint`(首次有意义绘制)	首次有意义绘制是页面可用性的量度标准
`LCP`	`Largest Contentful Paint`(最大内容绘制/渲染)	在`viewport`中最大的页面元素加载的时间
`FID`	`First Input Delay`(首次输入延迟)	用户首次和页面交互(单击链接，点击按钮等)到页面响应交互的时间

FCP(First Contentful Paint)

首次内容绘制，浏览器首次绘制来自DOM的内容的时间，内容必须包括文本，图片，非白色的canvas或svg，也包括带有正在加载中的web字体文本。这是用户第一次看到的内容。

FCP时间(秒)	颜色编码	FPC分数
0 - 2	绿色(快)	75 - 100
2 - 4	橙色(中等)	50 - 74
超过4	红色(慢)	0 - 49

LCP(Largest Contentful Paint)

最大内容绘制，可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户的可见时间。img图片，video元素的封面，通过url加载到的北京，文本节点等，为了提供更好的用户体验，网站应该在2.5s以内或者更短的时间最大内容绘制。

LCP时间(秒)	颜色编码
0 - 2.5	绿色(快)
2.5 - 4	橙色(中等)
超过4	红色(慢)

FID(First Input Delay)

首次输入延迟，从用户第一次与页面进行交互到浏览器实际能够响应该交互的时间，输入延迟是因为浏览器的主线程正忙于做其他事情，所以不能响应用户，发生这种情况的一个常见原因是浏览器正忙于解析和执行应用程序加载的大量计算的JavaScript。

FID时间(毫秒)	颜色编码
0 - 100	绿色(快)
100 - 300	橙色(中等)
超过300	红色(慢)

TTI(Time to Interactive)

网页第一次完全达到可交互状态的时间点，浏览器已经可以持续的响应用户的输入，完全达到可交互的状态的时间是在最后一个长任务完成的时间，并且在随后的5s内网络和主线程是空闲的。从定义上来看，中文名称叫持续可交互时间或可流畅交互时间更合适。

TTI时间(秒)	颜色编码
0 - 3.8	绿色(快)
3.9 - 7.3	橙色(中等)
超过7.3	红色(慢)

TBT(Total Block Time)

总阻塞时间，度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。只要存在长任务，该主线程就会被视为阻塞，该任务在主线程上运行超过50毫秒。

线程阻塞是因为浏览器无法中断正在进行的任务，因此如果用户确实在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。

TBT时间(毫秒)	颜色编码
0 - 300	绿色(快)
300 - 600	橙色(中等)
超过600	红色(慢)

CLS(Cumulative Layout Shift)

累计布局位移，CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，他是一种保证页面的视觉稳定性从而提升用户体验的指标方案。

用人话来说就是当点击页面中的某个元素的时候，突然布局变了，手指点到了其它位置。比如想点击页面的链接，突然出现了一个banner。这种情况可能是因为尺寸未知的图像或者视频。

CLS时间(毫秒)	颜色编码
0 - 0.1	绿色(快)
0.1 - 0.25	橙色(中等)
超过0.25	红色(慢)

总结

根据以上 6 个指标，我们可以简单明确一下优化思路：

尽快完成页面内容渲染
- 尽快开始渲染（优化 FCP）
- 尽快完成主要内容渲染（优化 LCP）
- 尽快完成所有内容渲染（优化 Speed Index）
减少长任务
- 尽早执行长任务（优化 TTI）
- 把长任务拆成小任务（优化 TBT）
保证页面布局稳定（优化 CLS）

三大核心指标

Google 在20年五月提出了网站用户体验的三大核心指标，分别为：

LCP(Largest Contentful Paint / 最大内容绘制)
FID
CLS

LCP 代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但是 LCP 能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。

FID 代表了页面的交互体验指标，毕竟没有一个用户希望触发交互以后页面的反馈很迟缓，交互响应的快会让用户觉得网页挺流畅。

CLS 代表了页面的稳定指标，尤其在手机上这个指标更为重要。因为手机屏幕挺小，CLS 值一大的话会让用户觉得页面体验做的很差。

如何获取指标

web-vitals-extension

官方出品，你可以通过安装 web-vitals-extension 插件来获取三大核心指标

Lighthouse

Chrome浏览器控制台自带

Chrome DevTools

打开 Performance 即可快速获取指标

首屏时间(FCP) VS 白屏时间(FP)

白屏（First Paint）

当浏览器开始渲染页面，白屏触发，这时候你如果设置了背景颜色的话，就可以看到页面出现了背景色。

白屏会在页面加载之前触发，在这段时间里，不会呈现任何内容和信息给用户。虽然背景色会很快完成绘制，但是实际的内容和交互可能要花很长的时间去加载，因此，白屏时间过长，会让用户认为我们的页面不能用或可用性差。可以通过适当调整页面结构，来优化网页。

白屏时间计算

在 head 标签开始加一段脚本，用于记录白屏开始时间，在 head 标签结束之前，加一段脚本，用于计算白屏时间，有些浏览器可以调用 Performance API 得出白屏结束时间，有些不支持，因此，计算方式分两种：

// 支持 Performance API
firstPaint =  firstPaintEnd - performance.timing.navigationStart;
// 不支持 Performance API，在 page onload 中计算结束时间 pageStartTime
firstPaint =  firstPaintEnd - pageStartTime;

首屏 (First Contentful Paint)

当页面绘制完第一个 DOM 内容，会触发首屏，这里的内容可以是文字、图片或者是 canvas。

首屏决定了网页的用户体验，因为它会标记实际内容何时加载到页面中，而不仅仅是标记页面的变化状态。因为关注的是内容，所以该指标可以了解用户何时收到消耗性信息，比如文本，视觉效果等，这比通过背景改变或样式改变对用户体验进行评估更有用。

首屏时间计算

首屏时间的计算需要用到两个变量，一个是首屏开始，一个是首屏结束，首屏开始也是白屏结束的时间，因此可以用以上方法计算出来，首屏结束时间应该是页面的第一屏绘制完，但是这个我们不好定义，我们知道在一个页面中，图片资源往往是比较后加载完的，因此可以统计首屏加载最慢的图片是否加载完成，加载完了，记录结束时间.

// 计算首屏加载最慢的图片是否加载完成
const img = new Image();
img.src = src;
img.onload = () => {firstPaintContentEnd = Date.now();
};const onload = () => {firstPaintContentStart = Date.now();
}firstPaintContent = firstPaintContentEnd - firstPaintContentStart;

该计算首屏时间还是白屏时间？

在评估页面是否开始渲染方面，首屏时间会比白屏时间更精确，但是二者的结束时间往往很接近。所以要根据自己的业务场景去决定到底该用哪种计算方式。

对于交互性比较少的简单网页，由于加载比较快，所以二者区别不大，因此，可以根据喜好任选一种计算方式。
对于大型的复杂页面，你会发现由于需要处理更多复杂的元素，白屏时间和首屏时间相隔比较远，这时候，计算首屏时间会更有用。

参考文章:

首屏时间(FCP) VS 白屏时间(FP)

前端性能优化指标 + 检测工具