lighthouse插件指标简介及评分标准

使用场景

在实际项目中，涉及门户比较重要得页面，比如首页，分中心首页，及资源加载较多得页面比如带图片展示得列表页，都需要考虑到页面加载资源性能。页面性能测试也就有其必要性了，使用谷歌浏览器自带页面性能测试插件lighthouse即可很直观看出页面的性能指标，并且可以给出一些建议，对提升页面性能给出一些参考方案。
但是lighthouse中关于性能的相关指标及评分标准，就需要对这些指标的含义及标准有一些了解了，本文主要就是对lighthouse插件指标简介及评分标准做一些介绍，希望能对大家有一些帮助。

性能指标详细说明

如上图所示，在版本6和7中，Lighthouse的性能得分由六个指标组成
其中各个指标含义如下表所示：

指标	描述
FCP(First Contentful Paint)	首次内容绘制, 统计的是从进入页面到首次有DOM内容绘制所用的时间。
LCP(Largest Contentful Paint)	最大内容绘制, 统计的是从页面开始加载到视窗内最大内容绘制的所需时间。
SI(Speed Index)	速度指数, 反映网页内容填充的速度。
CLS(Cumulative Layout Shift)	累计布局位移, 比较单个元素在帧与帧之间的位置偏移。
TTI(Time To Interactive)	页面可交互的时间。
TBT(Total Blocking Time)	阻塞总时间, 反映用户的交互是否能及时响应。

其中，FCP，LCP，SI，CLS为内容呈现相关指标，TTI，TBT为用户交互相关指标。

在版本6和7中，Lighthouse的性能得分由七个指标组成，每个指标占总性能得分的百分比如下表所示：

指标名称	占比
LCP(Largest Contentful Paint)	25％
TBT(Total Blocking Time)	25％
FCP(First Contentful Paint)	15％
SI(Speed Index)	15％
TTI(Time To Interactive)	15％
CLS(Cumulative Layout Shift)	5％

指标评分通用标准

LCP评分

目标：在不到2.5s的时间内达到LCP

LCP时间（s）	颜色编码
0–2.5	绿色（快速）
2.5-4	橙色（中等）
超过4	红色（慢）

TBT评分

目标：实现TBT分数小于300ms

TBT时间（ms）	颜色编码
0–300	绿色（快速）
301-600	橙色（中等）
超过600	红色（慢）

第一输入延迟（等同于TBT的现场数据）具有不同的阈值

FID时间（ms）	颜色编码
0-100	绿色（快速）
101-300	橙色（中等）
超过300	红色（慢）

FCP得分

目标：在2s内达到FCP

FCP时间（s）	颜色编码	FCP分数（HTTP存档百分位数）
0–2	绿色（快速）	75-100
2–4	橙色（中等）	50-74
4	红色（慢）	0-49

SI计分

目标：在不到4.3s的时间内达到SI

SI时间（s）	颜色编码	FCP分数（HTTP存档百分位数）
0–4.3	绿色（快速）	75-100
4.4-5.8	橙色（中等）	50-74
5.8+	红色（慢）	0-49

TTI得分

目标：达到TTI分数少于3.8s

TTI分数（s）	颜色编码
0–3.8	绿色（快速）
3.8 – 7.3	橙色（中等）
7.3+	红色（差）

CLS评分

目标：CLS得分低于0.1

CLS分数	颜色编码
0–0.01	绿色（良好）
0.1-0.25	橙色（需要改进）
0.25+	红色（差）

通过以上指标的评分标准和各个指标占比，lighthouse会对页面做一个综合打分，大家在分析这些指标时，也可以通过以上通用的评分标准，进行针对性优化，达到提高页面得分，最终实现提升页面加载性能的目的，当然，通过lighthouse插件分析仅可做参考，并不是唯一评判标准。另外页面往往在设计时，除了考虑加载性能外，页面的展示效果及交互效果往往也是很重要的。而这些效果也是影响页面性能的一个重要因素。因此页面往往不能仅仅单一追求性能最优，在实际测试过程中还是以实际项目需求为准的。