【第 3329 期】爱彼迎如何通过页面性能分数提升用户体验_AI阅读总结 — 包阅AI

前言

通过引入页面性能分数（PPS）系统，将多个性能指标整合为一个 0 到 100 的得分，以提升用户体验并实现跨平台性能比较和优化。今日前端早读课文章由 @Harry Zhang 翻译，公号：爱彼迎技术团队分享。

正文从这开始～～

了解爱彼迎如何构建页面性能分数，对真实用户在多平台上多个性能指标的百分制评分

介绍

在爱彼迎，页面性能非常重要，这也是我们对于 “工艺的承诺” 的一部分。快速的页面体验对于业务发展至关重要，同时也是我们 “创造一个让每个人都能有归属感的世界” 使命所必需的。

在我们能够实现快速体验之前，我们需要就 “快速” 这个概念达成共识。Web、iOS 和 Android 各自具有不同的平台特定性能指标。对于产品工程师来说，了解哪些指标应优先考虑可能具有挑战性；对于管理层来说，比较不同平台的情况并汇报进展情况也是困难的。

我们开发了一个名为 “页面性能分数” 的新性能测量系统，可以轻松跟踪来自不同平台真实用户的多个性能指标。本文介绍了该系统，同时我们还将详细分析 Web、iOS 和 Android 的具体内容。

早期的性能测量工作

在爱彼迎的性能测试早期阶段，我们使用了一个名为 “页面可交互时间”（Time To Airbnb Interactive，TTAI）的单一指标来衡量从页面加载开始到内容可见和可交互所需的时间。这种方法取得了许多积极的成果。我们建立了性能跟踪架构，解决了延迟问题，并培养了注重性能的企业文化。

然而，TTAI 这个指标也有它的局限性。不同的平台有着不同的基准和目标，各个页面的交互方式各不相同，导致直接比较 TTAI 变得困难。有时候，即便 TTAI 有所改进，用户参与度的指标却没有提高。更关键的是，TTAI 只是一个单一指标，而一个单一指标无法全面反映我们客户对性能的期望。这让我们对 “快速” 的定义变得不够全面，也限制了我们在性能改进方面的尝试。

引入页面性能分数

为了得到一个简单易懂的性能指标，我们需要从更细致入微的视角考虑，所以我们创建了页面性能分数（PPS）。

PPS 使我们能够将多个输入指标合并成一个容易比较的分数，并且相对于我们之前的单一指标方法有着显著提升。

指标

我们测量的指标因平台而异，但在每个平台上，测量多个指标并制定一个 0-100 的分数的方法一般是相同的。所有的指标都以用户为中心，可以分为两个主要类别：

• 初始加载指标测量从页面开始到内容可见的时间。

• 加载后指标测量初始加载后页面的响应能力。

初始加载指标

Web 端的首次内容绘制时间（Time To First Contentful Paint，TTFCP）和 Native 端的首次布局时间（Time To First Layout，TTFL）测量从 “页面开始” 到第一块内容可见的时间，通常是一个加载器。

Web 端的首次最大内容绘制时间（Time To Largest Contentful Paint，TTLCP）和 Native 端的初始加载时间（Time To Initial Load，TTIL）测量从 “页面开始” 到主要内容显示的时间。

页面显示加载器，然后显示主要内容。

加载后指标

Web 端的交互到下一个绘制（Interaction to Next Paint, INP）测量页面对用户交互的整体响应性。

Web 端的总阻塞时间（Total Blocking Time, TBT）和 Native 端的滚动线程卡顿（Scroll Thread Hangs, STH）测量导致应用在布局、动画和滚动过程中出现卡顿。

Native 端的额外加载时间（Additional Load Time, ALT）测量在页面内显示额外加载器（例如分页）的平均时间。

Native 端的资源加载时间（Rich Content Load Time, RCLT）测量图像和视频加载的平均时间。

Web 端的累积布局偏移（Cumulative Layout Shift, CLS）根据元素偏移的大小和距离，测量布局的不稳定性。

公式

在测量完指标后，我们使用页面性能分数（PPS）公式将这些信息转化为一个单一的数字，该公式是从 Lighthouse 公式演化出来的。针对每个指标，我们根据内部和行业数据确定了良好、中等和较差的阈值。我们通过将良好范围的分数设定为 0.7 以上，较差范围的分数设定为 0.5 以下，而中等范围则介于两者之间，从而创建了一个得分曲线。

在这个示例曲线中，10000 毫秒的度量值得分为～0.9

每天，我们从数百万真实用户的页面加载中计算出给定页面指标的平均值，并对其进行限制。我们将这个限制的平均值映射到指标曲线上，得到一个 0 到 1 的分数。我们通过将指标分数与指标权重相乘，将指标分数组合成一个综合的页面性能分数（PPS），这些权重是通过检查我们专注于性能的 A/B 测试来选择的，并确保权重与爱彼迎的内部参与指标最大程度地保持一致。

得到的页面性能分数（PPS）公式可以表示为…

 PPS = curve(metric_1) * weight_1 + curve(metric_2) * weight_2 …

例如，在 Web 上…

 PPS = curve(TTFCP) * 35% + curve(TTLCP) * 15% + curve(INP) * 30% + curve(TBT) * 15% + curve(CLS) * 5%

页面性能分数（PPS）的演变

将公司从单一指标迁移到页面性能分数（PPS）是组织上的挑战。我们必须训练公司停止将性能视为一个基于秒数的单一数字，这是一个需要跨职能对齐的范式转变。为了帮助顺利过渡，我们将旧的 TTAI 范围与新的 PPS 范围进行了映射。

一旦公司理解了页面性能分数（PPS），对其进行改进就会变得相对容易。随着对性能的理解提高，我们只需添加或替换指标，而 0-100 分数保持不变。PPS 被设计为可持续迭代的。例如，在 2019 年，Chrome 团队引入了累积布局偏移（Cumulative Layout Shift），它是 Web PPS 的理想候选指标。它是一个以用户为中心的指标，具有良好的浏览器覆盖率，并且可以在直接加载和客户端路由的页面上进行测量。我们对该指标进行了仪器化，验证了数据，然后将其纳入下一个版本的 PPS 中。非常简单！

加权平均分数（WAS）

除了跟踪单个页面的 PPS 分数外，我们还通过创建加权平均分数（WAS）来追踪整个组织的整体性能进展。考虑以下三个常见页面的示例 PPS 分数和流量：

如果这些是爱彼迎 APP 的所有页面，我们的加权平均分数（WAS）将约为 80。由于爱彼迎有数百个页面，因此 WAS 可帮助我们优先考虑权重最重要的页面。

结论

通过使用页面性能分数（PPS），我们的工程师和数据科学家现在拥有众多以用户为中心的性能指标，可以帮助他们了解和改进产品。我们可以清晰地比较不同页面、不同组织甚至不同平台的性能进展。PPS 使团队能够设定简单的目标，并确定哪些个别指标需要优先考虑。PPS 可以不断演进：指标可以替换，权重可以改变，目标可以更加严格，但 0-100 分数保持不变。

改变我们对 “快速” 的定义是非常值得的努力。公司已经从将性能视为单一的基于秒数的指标发展到一个代表复杂性能实际情况的 0-100 分数。我们提升了性能测量系统，并希望您在您的组织中应用这些经验。

关于本文
作者：@Andrew Scheuermann
译者：@Harry Zhang
校对：@Ming Shang，@Keyao Yang，@Wei Ji
译文：https://mp.weixin.qq.com/s/wZKgf7ueUgOS8Tt1dmIaoQ
原文：https://medium.com/airbnb-engineering/creating-airbnbs-page-performance-score-5f664be0936

这期前端早读课
对你有帮助，帮”赞“一下，
期待下一期，帮”在看” 一下 。