性能文章>Lighthouse 如何计算网站的整体性能得分?>

Lighthouse 如何计算网站的整体性能得分?转载

2年前
574536

通常,只有指标会影响网站的 Lighthouse 性能得分,而不是诊断的结果。但是改善诊断也会改善指标,所以它们之间存在间接关系。

下面,就从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍:

为什么你的分数会波动#

您的整体性能得分和指标值的许多变化不是由于 Lighthouse。当你的表现分数波动时,通常是因为基础条件的变化。常见问题包括:

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

Lighthouse 关于可变性的文档对此进行了更深入的介绍。

此外,即使 Lighthouse 可以为您提供单个整体性能分数,将您的站点性能视为分数分布而不是单个数字可能更有用。请参阅以用户为中心的性能指标的介绍以了解原因。

性能得分的加权方式#

性能分数是指标分数的加权平均值。自然,权重越大的指标对您的整体绩效得分的影响越大。指标分数在报告中不可见,但在后台计算。

灯塔评分计算器 webapp
使用Lighthouse 评分计算器探索评分

灯塔8 #

灯塔6 #

如何确定指标分数#

一旦 Lighthouse 收集完性能指标(主要以毫秒为单位报告),它会通过查看指标值在其 Lighthouse 评分分布中的位置,将每个原始指标值转换为从 0 到 100 的指标分数。评分分布是从HTTP Archive上真实网站性能数据的性能指标得出的对数正态分布。

例如,最大内容绘制 (LCP) 测量用户何时感知到页面的最大内容可见。LCP 的度量值表示用户启动页面加载和页面呈现其主要内容之间的持续时间。根据真实的网站数据,表现最好的网站在大约 1,220 毫秒内呈现 LCP,因此指标值映射为 99 分。

再深入一点,Lighthouse 评分曲线模型使用 HTTPArchive 数据来确定两个控制点,然后设置对数正态曲线的形状。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 报告中,Opportunities部分提供了有关如何实施它们的详细建议和文档。此外,诊断部分列出了开发人员可以探索以进一步提高其性能的其他指南。

点赞收藏
木_783257
请先登录,查看3条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步
6
3