Lighthouse 性能分计算过程详解
前言
chrome 开发者模式自带的 lighthouse 评价系统,可以根据实时测试的网站性能,给出一个综合评分来评判一个网站的性能优劣。下面是本站的 lighthouse 评分,性能还是相当不错的。
那么,这个评分是怎么计算的。本文通过阅读相关源码,揭示性能分计算全过程。
公式
Lighthouse 的性能评分是通过计算单个指标的性能分之后,通过加权,计算出最终分。官方计算公式可以查看
单一指标
Lighthouse 单一指标评分是通过一个对数正态分布函数来计算的。
性能分的分布会如图所示
具体公式如下:
其中:
value 是性能值(例如首次内容绘制时间 FCP、最大内容绘制时间 LCP 等)。
median 是性能中值,表示对数正态分布的中位数。
σ 是对数函数的形状参数,控制评分的分布曲线。
σ 的计算公式如下:
其中:
- P10 是指性能最好的10%的数据
核心代码
// erf 计算函数,这里不用过多计较
function internalErf_(x) {
// erf(-x) = -erf(x);
var sign = x < 0 ? -1 : 1;
x = Math.abs(x);
var a1 = 0.254829592;
var a2 = -0.284496736;
var a3 = 1.421413741;
var a4 = -1.453152027;
var a5 = 1.061405429;
var p = 0.3275911;
var t = 1 / (1 + p * x);
var y = t * (a1 + t * (a2 + t * (a3 + t * (a4 + t * a5))));
return sign * (1 - y * Math.exp(-x * x));
}
// 分数计算函数
function QUANTILE_AT_VALUE({median, p10}, value) {
// ln(median)
var location = Math.log(median);
// σ
const shape = Math.abs(Math.log(p10) - u) / (Math.SQRT2 * 0.9061938024368232);
// 计算 score,计算完之后,还需要 * 100
var standardizedX = (Math.log(value) - location) / (Math.SQRT2 * shape);
return (1 - internalErf_(standardizedX)) / 2;
}
通过分析可以看到,要计算性能分,需要有三个参数
median 性能中值
p10 最好的 10% 性能值
value 当前性能耗时
median 和 P10,因为性能指标和设备的不同而有差异,具体的数据值,我们最后给出。
综合得分
在计算完单个指标之后,通过加权和的方法,计算出综合得分
// A* 单一指标的得分,取 0 - 100 的整数(如fcp、tti等)
// w* 单一指标的权重,取 0 - 1 的小数
const score = A1 * w1 + A2 * w2...
至此,所有计算过程就已完毕
性能数据
每一版的 lighthouse 关心的性能指标不同,各自的比重也不相同(这也看出 google 对性能的关注度变化)。下面给出各个 lighthouse 版本,关注的性能数据,及其占比
Lighthouse v10
设备类型 | 指标 | 中值 (median) | P10 (podr) | 权重 (%) |
---|---|---|---|---|
Mobile | FCP | 3000 | 1800 | 10% |
SI | 5800 | 3387 | 10% | |
LCP | 4000 | 2500 | 25% | |
TBT | 600 | 200 | 30% | |
CLS | 0.25 | 0.1 | 25% | |
Desktop | FCP | 1600 | 934 | 10% |
SI | 2300 | 1311 | 10% | |
LCP | 2400 | 1200 | 25% | |
TBT | 350 | 150 | 30% | |
CLS | 0.25 | 0.1 | 25% |
Lighthouse v8
设备类型 | 指标 | 中值 (median) | P10 (podr) | 权重 (%) |
---|---|---|---|---|
Mobile | FCP | 3000 | 1800 | 10% |
SI | 5800 | 3387 | 10% | |
LCP | 4000 | 2500 | 25% | |
TTI | 7300 | 3785 | 10% | |
TBT | 600 | 200 | 30% | |
CLS | 0.25 | 0.1 | 15% | |
Desktop | FCP | 1600 | 934 | 10% |
SI | 2300 | 1311 | 10% | |
LCP | 2400 | 1200 | 25% | |
TTI | 4500 | 2468 | 10% | |
TBT | 350 | 150 | 30% | |
CLS | 0.25 | 0.1 | 15% |
Lighthouse v6
设备类型 | 指标 | 中值 (median) | P10 (podr) | 权重 (%) |
---|---|---|---|---|
Mobile | FCP | 4000 | 2336 | 15% |
SI | 5800 | 3387 | 15% | |
LCP | 4000 | 2500 | 25% | |
TTI | 7300 | 3785 | 15% | |
TBT | 600 | 287 | 25% | |
CLS | 0.25 | 0.1 | 5% | |
Desktop | FCP | 1600 | 934 | 15% |
SI | 2300 | 1311 | 15% | |
LCP | 2400 | 1200 | 25% | |
TTI | 4500 | 2468 | 15% | |
TBT | 350 | 150 | 25% | |
CLS | 0.25 | 0.1 | 5% |
Lighthouse v5
指标 | 中值 (median) | P10 (podr) | 权重 (%) |
---|---|---|---|
FCP | 4000 | 2000 | 20% |
SI | 5800 | 2900 | 26.666% |
FMP | 4000 | 2000 | 6.666% |
TTI | 7300 | 2900 | 33.333% |
FCI | 6500 | 2900 | 13.333% |
总结
通过了解 lighthouse 对性能的计算方法,可以进一步分析 google 对于性能指标的关注程度。同时,如果自己需要对性能指标做二次开发,也可以作为参考。
原文地址:https://webfem.com/post/lighthouse-score,转载请注明出处