Lighthouse 性能评分

Lighthouse 如何计算您的总体性能得分

一般来说,只有metrics会影响您的 Lighthouse 性能得分,而“优化建议”或“诊断”的结果不会。也就是说,改进机会和诊断信息可能会提高指标值,因此存在间接关系。

下面,我们概述了得分出现波动的原因、组成方式,以及 Lighthouse 对每个指标的评分。

为什么您的分数会波动

总体性能得分和指标值的很多变化都不是由 Lighthouse 导致的。表现得分出现波动通常是由于基本条件的变化所致。常见问题包括:

  • 对正在投放的广告进行 A/B 测试或变更
  • 互联网流量路由更改
  • 在不同设备(例如高性能台式机和低性能笔记本电脑)上进行测试
  • 可注入 JavaScript 和添加/修改网络请求的浏览器扩展程序
  • 杀毒软件

Lighthouse 的可变性文档对此进行了更详细的介绍。

此外,虽然 Lighthouse 可以提供单个总体性能得分,但将网站性能视为得分的分布而非单个数字可能更有用。如需了解原因,请参阅以用户为中心的性能指标简介。

效果得分的加权方式

性能得分是各项指标得分加权平均值。当然,权重较高的指标对总体性能得分的影响越大。指标得分不会显示在报告中,但会在后台进行计算。

Lighthouse 评分计算器 Web 应用
使用 Lighthouse 评分计算器探索得分

Lighthouse 10

Lighthouse 8

如何确定指标得分

Lighthouse 收集完性能指标(大多数情况下会以毫秒为单位进行报告)后,它会查看指标值在其 Lighthouse 评分分布中所处的位置,将每个原始指标值转换为从 0 到 100 的指标得分。评分分布是对数正态分布,根据 HTTP Archive 上真实网站性能数据的性能指标得出。

例如,Largest Contentful Paint (LCP) 会衡量用户感知到页面的最大内容可见的情况。LCP 的指标值表示从用户启动网页加载到网页呈现其主要内容之间的时长。根据实际网站数据,效果最佳的网站会在大约 1220 毫秒内呈现 LCP,因此,该指标值对应的得分为 99。

再深入一点,Lighthouse 评分曲线模型使用 HTTPArchive 数据来确定两个控制点,然后设置 log-normal 曲线的形状。HTTPArchive 数据的第 25 个百分位将变为 50(中位数控制点),第 8 个百分位将变为 90(良好/绿色控制点)。在浏览下方的评分曲线图时,请注意,指标值与得分之间存在接近线性关系,在 0.50 到 0.92 之间。 0.96 左右的得分是上面的“收益递减点”,该曲线会拉远,需要越来越多的指标改进才能提高已经达到的高分。

TTI 评分曲线的图片
探索 TTI 的评分曲线

桌面设备与移动设备的处理方式

如上所述,得分曲线根据实际效果数据确定。在 Lighthouse v6 之前,所有得分曲线都基于移动设备性能数据,但桌面设备 Lighthouse 运行则会使用这些数据。事实上,这会导致人为提高桌面设备评分。Lighthouse v6 通过使用特定的桌面设备评分修复了此错误。您当然可以发现整体性能得分从 5 到 6,但桌面设备上的得分会明显不同。

分数是如何以不同颜色标示的

指标得分和性能得分根据以下范围着色:

  • 0 - 49(红色):差
  • 50 到 89(橙色):需要改进
  • 90 到 100(绿色):良好

为了提供良好的用户体验,网站应努力获得较高的得分 (90-100)。100 分的“完美”分数很难实现,而且不符合预期。例如,假设一个分数为 99 到 100,所需的指标改进幅度与将 90 到 94 的分数差不多。

开发者可以采取哪些措施来提高性能得分?

首先,请使用 Lighthouse 评分计算器帮助您了解要达到特定 Lighthouse 性能得分应该达到的阈值。

在 Lighthouse 报告中,优化建议部分提供了有关如何实施这些建议的详细建议和文档。此外,诊断部分还列出了更多指南,开发者可以探索这些指南,进一步提升应用的表现。