Lighthouse 性能分计算过程详解

2025-02-06
性能优化
135

前言

chrome 开发者模式自带的 lighthouse 评价系统,可以根据实时测试的网站性能,给出一个综合评分来评判一个网站的性能优劣。下面是本站的 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,转载请注明出处