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

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

3月前
230314

通常,只有指标会影响网站的 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部分提供了有关如何实施它们的详细建议和文档。此外,诊断部分列出了开发人员可以探索以进一步提高其性能的其他指南。

请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
使用 Lighthouse 优化 Web Vitals
今天,我们将介绍 Lighthouse、PageSpeed 和 DevTools 中的新工具功能,以帮助确定您的网站如何在Web Vitals上进行改进。 作为工具的复习,Lighthouse是一个开源的自动化工具,用于提高网页的质量。您可以在Chrome DevTools调试工具套件
使用 Lighthouse CI 进行性能监控
Lighthouse CI是一套用于在持续集成期间使用 Lighthouse 的工具。Lighthouse CI 可以通过多种不同方式整合到开发人员工作流程中。本指南涵盖以下主题: 使用 Lighthouse CI CLI。配置 CI 提供程序以运行 Lighthouse CI。
从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载
全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步👉「开始优化」部分直接查看优化手段背景前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。在网络