【第 3331 期】爱彼迎以用户体验驱动的 Web 性能度量_AI阅读总结 — 包阅AI

前言

介绍爱彼迎监控的主要网页性能指标，它们的测量方法，以及实际应用中如何在这些指标间做出权衡。今日前端早读课文章由 @Jianjun Wu 翻译，公号：爱彼迎技术团队分享。

正文从这开始～～

“这个网页加载了多久？” 这是一个业界普遍的问题，但这真的是一个恰当的问题吗？最近，行业内已经从使用单一的基于秒的指标如 “页面加载”，转变为使用能够全面反映性能的指标，这些指标从网站用户的角度描述了整体体验。在爱彼迎，测量我们的房客和房东实际体验的网页性能至关重要。之前，我们介绍了爱彼迎是如何创建页面性能评分 – 将来自真实用户的多个指标合并成一个单一的分数（PPS 指标）。在这篇文章中，我们将描述我们认为对爱彼迎网站重要的指标，以及它们如何与行业标准相关联。我们还将讨论一些推动这些指标变化的案例研究，以及它们如何影响网站访问者的体验。

网页性能指标

在网站上，我们测量五个关键的性能指标。我们选择这些指标的原因是它们能够代表用户的实际体验，而且这些指标定义简单、易于解释且易于计算。

我们记录的这些指标不仅针对网站的直接请求，还包括页面之间的客户端转换请求（爱彼迎采用单页面应用架构）。我们将整体介绍这些指标，包括我们如何使用这些指标，以及它们在我们整体页面性能评分（PPS）中的相对权重。

【早阅】 如何掌握JavaScript性能优化

首次内容绘制时间 (TTFCP)

首次内容绘制时间（Time To First Contentful Paint, TTFCP）测量从导航开始到屏幕上显示任何内容的时间。这可能是文本、加载器或任何向用户确认网站已接收到其请求的视觉信号。我们使用绘画时间 API 处理直接请求。对于客户端路由的转换，我们编写了自己的工具，在页面转换开始时触发：

 // Simplified version of our FCP polyfill for client transitions
 function onClientTransition() {
   requestAnimationFrame(() => {
     performance.measure('TTFCP');
   });
 }

客户端转换的 FCP polyfill 简化版本

首次有意义绘制时间 (TTFMP)

首次有意义绘制时间（Time To First Meaningful Paint, TTFMP）测量的是从页面打开到屏幕上出现最有意义的元素的时间。这通常是指页面中最大图像或最高标题。这向用户表明有用的信息已经到达，他们可以开始消费页面的内容。

【第3237期】减少样式计算的范围和复杂度

为了测量 TTFMP，产品工程师会将页面的有意义元素标记上 id —— 我们称之为 FMP 目标。然后我们递归搜索页面的 FMP 目标。

 let lastHeroElement;

 // Simplified version of our TTFMP instrumentation
 function recursiveCheckForFirstMeaningfulPaint() {
  const heroElement = document.getElementById("FMP-target");
  // To prevent against false positives during client-side route requests
  const isSameHeroElement = lastHeroElement === heroElement;
  const isImageHeroLoading =
    heroElement.tagName === "IMG" && !heroElement.complete;

  if (!heroElement || isSameHeroElement || isImageHeroLoading) {
    requestAnimationFrame(recursiveCheckForFirstMeaningfulPaint);
  } else {
    requestAnimationFrame(() => {
      lastHeroElement = heroElement;
      performance.measure("TTFMP");
    });
  }
 }

爱彼迎的 TTFMP polyfill 简化版本

需要注意的是，这个指标需要我们的产品工程师进行手动标记 —— 每个页面必须包含一个 “FMP – 目标”，否则我们将无法记录首次有意义绘制的时刻。为了确保每个页面都正确地标记了 TTFMP，我们会报告在给定页面上找到该元素的频率。如果由于缺乏标记或 FMP 目标的渲染条件，导致该元素的发现率低于 80%，我们将触发警报，警告该页面的指标无效。这要求开发人员在页面重新设计、重构和 A/B 测试过程中保持对 TTFMP 标记的更新。

自动标记 TTFMP 是困难的，因为系统性地知道页面上哪个元素最 “有意义” 很难。最大内容绘制 (Largest Contentful Paint) 通过测量页面上最大的元素来解决这个问题。我们不使用最大内容绘制的原因是，该指标的浏览器 API 仅返回初始加载的绘制时间，不适用于我们单页应用程序中的客户端过渡。如果最大内容绘制可以重置并用于客户端路由的过渡，我们将使用最大内容绘制作为默认值，这样就不需要手动标记。

首次输入延迟 (FID)

首次输入延迟（First Input Delay, FID）测量浏览器开始响应用户交互所需的时间。低 FID 表明页面是可用的并且响应迅速。相反，超过 50ms 的任何延迟对用户来说都是可感知的。为了支持客户端转换，我们从 web-vitals 中分支了首次输入延迟工具，以重置输入延迟的观察。

总阻塞时间 (TBT)

总阻塞时间（Total Blocking Time, TBT）测量主线程 “阻塞” 的总时间。当 TBT 很高时，页面可能在滚动或交互时冻结或停止响应，动画可能不够流畅。运行时间超过 50ms 的任务被视为 “长任务”，并且会增加 TBT。

使用 TBT 的一个难点是，很难将阻塞归因于我们页面上的特定组件或部分。出于这个原因，我们创建了一个我们称之为交互时间段的子指标，它记录发生在特定时间窗口内的阻塞时间。

虽然我们报告了总阻塞时间，但我们知道并非所有的阻塞时间都是相等的 —— 阻塞用户交互的时间比空闲阻塞时间更糟糕。另一个缺点是，阻塞时间在页面的整个过程中无限积累，这使得该指标难以以聚合方式收集，并且受到会话长度的影响。我们正在研究如何将特定的阻塞时间归因于用户交互，并将遵循 Web Vitals 计划中动画平滑度指标的方向。

目前，TBT（总阻塞时间）仅在基于 Chromium 的浏览器中可用，并且没有可用的 polyfill。在这些情况下，我们不会报告 TBT —— 然而，我们发现即便在浏览器支持有限的情况下，TBT 仍是衡量加载后性能的一个有用指标。

累积布局偏移 (CLS)

累积布局偏移（Cumulative Layout Shift，CLS）衡量页面会话期间发生的布局不稳定性，这种不稳定性根据元素移动的大小和距离进行加权。低 CLS 表明页面可预测性强，增强了用户继续交互的信心。

CLS 并不在我们支持的每种浏览器中都可用。由于没有可用的 polyfill，我们不会在不支持的浏览器中报告 CLS 的任何值。与 TBT 相似，我们发现即使是部分浏览器覆盖也是有用的，因为在浏览器 A 中发生的布局变化很可能也会在浏览器 B 中发生。

网页性能评分

我们使用页面性能评分（Page Performance Score，PPS）系统来合并这些评分，该系统在本系列的前一篇文章中有所描述。PPS 将输入指标合并成一个 0 到 100 的评分，我们用这个评分来设定目标和检测回归。

给定页面的 PPS 评分输入指标相对权重的图表。TTFCP（首次内容绘制时间）: 35%, FID（首次输入延迟）: 30%, TTFMP（首次有意义绘制时间）: 15%, TBT（总阻塞时间）: 15%, CLS（累积布局偏移）: 5%

Web Vitals 和 Lighthouse

Web Vitals 和 Lighthouse 是我们在网页上实施 PPS（页面性能评分系统）的重要灵感和研究来源。

Lighthouse 是一个通过运行合成测试、审计和评分来评价网页的工具。然而，Lighthouse 的测试是合成的，而 PPS 根据真实用户指标来评分网页。Lighthouse 是一个强大的诊断工具，而 PPS 允许我们使用真实用户指标来设定目标和检测回归。

Web Vitals 是一个测量真实用户指标的库，与 PPS 类似。然而，它不包括类似于 PPS 或 Lighthouse 的数值评分系统，也还未能处理单页应用中的客户端转换。我们确实利用 Web Vitals，包括优先考虑类似的指标，以确保 PPS 和 Web Vitals 的方向一致。

内容预加载案例分析

在进行性能改进时，我们通常会进行 A/B 测试，以收集数据评估我们的改进成效。理想情况下，我们将通过改善一个或多个之前描述的指标来严格提升性能。然而，有时我们会看到一个指标的改进牺牲了另一个指标。PPS 系统在考虑权衡时简化了决策过程。

举一个例子，对于具有动态内容的页面（如我们的房源页面），我们之前在 CDN 中缓存了一个包含加载状态的通用页面版本，从而实现了快速的 TTFCP。然后，我们进行了一个实验，提前从服务器刷新 HTML 内容并跳过这个初始加载状态。

左图：修改前，CDN 缓存 —— 加载状态；
右图：修改后，提前刷新页面，包括首次有意义绘制图像

这个实验的结果是：在没有 CDN 的情况下，TTFCP（首次内容绘制时间）变慢了，但 TTFMP（首次有意义绘制时间）变快了，因为我们跳过了初始加载状态。尽管我们更重视 TTFCP，但我们发现 TTFMP 的改进幅度大于 TTFCP 的回归幅度，因此我们进行了这项更改。当我们有一个网页性能评分来帮助我们一致地评估权衡时，这类决策就变得简单了。

总结

通过实验，我们发现这些指标与用户体验的积极变化相关联。网页 PPS 为我们提供了一个单一的评分，我们可以利用这个评分进行目标设定和回归检测，同时也涵盖了用户体验的许多不同方面：绘画时间、交互性和布局稳定性。我们希望网页 PPS 能够在爱彼迎之外的类似系统实践中提供参考。

我们向致力于性能改进的行业同事表示深深的感谢 —— 随着行业的发展，网页 PPS 也将不断进化。

关于本文
作者：@Josh Nelson
译者：@Jianjun Wu
校对：@Ming Shang, @Keyao Yang，@Wei Ji
译文：https://mp.weixin.qq.com/s/LPylRaLZbYhwcMCwHXzzMg
原文：https://medium.com/airbnb-engineering/measuring-web-performance-at-airbnb-122da8d3ea3f

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