我们是如何通过优化“感知性能”来提升关键业务指标的：Hotjar 的案例研究

没有人喜欢等待。即使在一家很棒的餐厅，如果食物迟迟不上菜，你也会忍不住在椅子上扭动，四处张望找服务员。最糟糕的是，你甚至可能直接离开。

这没什么新鲜的：人天生就比较急躁，你的用户也一样。如果你让他们等待所需内容太久，他们的体验就会变得不好，最终会选择退出。

此处省略内容

概述

• 感知性能是一种用户对网站性能的主观感受。 它关注的是网站在用户看来是否快速，而不是技术指标，这对于以用户为中心的优化至关重要。
• Google的核心网页生命力指标有助于分析和改善感知性能。 例如，最大的内容ful paint（LCP）衡量的是页面上最大的视觉部分何时出现，这提供了一种以用户为中心的加载速度视角。
• 标准指标如LCP并不总是准确反映用户需求。 例如，在Hotjar，我们注册页面的关键指标是“注册”按钮的显示时间，这更符合用户的实际需求。
• 而不是通过人为减慢用户体验来进行A/B测试，你可以将加载时间与不同用户群体的转化率进行关联。 这有助于你评估性能对业务关键绩效指标(KPI)的真实影响，并提高转化率。

继续阅读，看看我们在Hotjar是怎么做到的（以及我们得到了哪些结果）。👇

请看这里

没有这种理解，你就无法确定在优化加载速度上该投入多少。但其实用户体验对您的业务指标的真实影响还不明确。这是一个事实，性能确实很重要，并且多项研究已经证实了这一点。

好消息是，有一个很简单的方法可以做到这一点——你可能已经有所有需要的工具了。

首先，什么是“感知性能”？根据MDN的定义，它是一种“用户对网站性能的主观感受”，以及“网站在用户眼中快不快”。

当我们谈到感知性能时，我们并不关注终端的延迟或后端服务所占用的服务器内存。感知性能首先是用户体验为中心的。

一些感知性能指标的例子

最流行的例子是由谷歌提出的Web Vitals，它们旨在为不同网站提供统一的用户体验性能衡量方式。

让我们来看一下该数据集中的具体指标：其中一个指标是最大内容绘制（LCP，Largest Contentful Paint 的简称）。测量从用户请求页面加载开始。它结束于页面上最大的视觉元素，例如图片或文本块出现在屏幕上。例如，通过点击一个链接来加载页面。

占据屏幕空间最大的元素被视作对访客来说最重要，因此，它是一个很好的衡量网站整体加载性能的指标。这种方法是通用的，可以让你比较完全不同类型的网页，从新闻文章到电商结账页面。

当 Web Vitals 表现不佳

在SaaS产品的世界中，我们通常更专注于特定的客户旅程和需要完成的任务（JTBD）。往往，不是占用最多空间的元素为客户创造最大的价值。

让我们看看Hotjar的注册页面的例子，人们来这里填写注册表，尽管大部分屏幕空间被营销文案和右侧的客户logo占据。

](https://imgapi.imooc.com/676b5d4209ac9f3908000468.jpg)

我们意识到，在这种情况下，最大内容ful paint指标并不是最合适的衡量标准。因此，我们定义了自己的“网页性能指标”，专注于我们的用户和特定使用场景。我们决定，对于我们的注册页面，关键性能指标是“注册”按钮在屏幕上出现的时间。

幸運的是，好在現有的技術讓我們很容易就能收集到這類數據。例如，Element Timing API，在基于 Chromium 的瀏覽器里，可以測量任意的 HTML 元素。其他瀏覽器也有類似的方案，並且對於使用流行前端框架編寫的單頁應用來說，找到一個適用的自定義解決方案也不難。

在确定了对我们用户来说最重要的页面元素之后，我们开始从真实用户会话中收集并可视化这些数据（也就是真实的用户会话监控，RUM）。这种方法使我们第一次能够测量每个页面访问者看到“注册”按钮用了多长时间。

例如，中位数（第50百分位）的值大约为2.75秒，而第75百分位的值大约为5秒，如下面的图表所示。* 这些数据很有信息量，但并没有回答这个问题：我们应该在性能优化上投入多少，才能看到正面的业务影响？

请注意：图表中的所有数字仅供解释之用，这些数字并非Hotjar网站上的真实数据。

选项1：慢慢来试试，看看会怎样

我们觉得为了理解潜在变化可能对我们产生的影响，我们需要将我们的业务KPIs——在这种情况下的KPI是注册表单的转化率——与用户感受到的体验关联起来。

我们考虑过的一种方法是进行A/B测试，其中一组访客会经历故意放慢的体验过程，而另一组则像平常一样接受服务。通过比较这两组的转化情况，我们可以看到减速的影响，从而了解潜在加速的效果。

下面是一张图表，显示了用户群体中页面加载时间指标的分布，标记了性能分段。

这样的实验或许能给我们想要的答案，但这与我们的核心价值观相悖。在Hotjar，我们始终将客户放在首位，所以故意让某人的体验变糟，对我们来说似乎不太合适。

选项2：拆分并分析

相反，我们查看了分布直方图，意识到用户已经体验到了加载注册页面时更好的或更差的体验。有很多访客的页面加载速度很快（如下图左侧部分所示），但也有一部分访客的加载时间较长（图右侧的长尾）。

这其实并不奇怪，如果我们考虑到来自世界各地访问Hotjar网站的人们有不同的连接条件和设备速度。我们可以分别读取不同人的转化率数据，看看加载时间是否影响业务表现。从某种意义上说，我们可以将现有的网站访客视为A/B测试群体。

（点击可查看图片）

我们决定采用这种方法，并从显著降低数据集的分辨率开始。虽然工程师和数据分析师习惯讨论百分位数和分布指标，但产品经理用的却是另一种语言。在不涉及复杂的统计和数学概念的情况下，处理大量数据时会非常困难。我们决定采取一个更简单的办法，这样我们既能获得可靠的数据，也能使产品和工程团队之间的沟通更加顺畅。

与其试图理解整个直方图，我们将所有用户分为三组——拥有良好、一般和糟糕加载体验的用户。我们再次遵循了Google推荐中关于大多数人认为的良好体验的标准。对于像注册页面这样的网页，使用通用值是有道理的，应用场景相当标准，我们可以假设我们的潜在客户与普通互联网用户相似。在这种情况下，我们

• 任何低于 2.5秒 的体验都被认为是好体验
• 任何介于 2.5至4秒 之间的体验算作一般（也就是“需要改进”）
• 任何超过 4秒 的体验都被认为是差（也就是“糟糕”）

我们分析了每个分组的转化数据，发现对于那些在2.5秒内加载完成的注册页面，用户更有可能完成账户创建。拥有良好体验与糟糕体验的用户之间，转化率差异可高达13%。

平均桶中的KPI值也显著偏低。当时，落入优秀组、普通组和较差组的人数差不多各占约50%。

这是一个惊人的发现，意味着有一个商业机会。我们计算出，如果我们能够改善体验较差或一般的访客的加载体验，使他们达到优秀体验的水平，我们可以在注册页面的总体转化率上提高高达6%！当然，这是一个上限，实际上不可能为每个访客都提供出色的加载体验——我们只能影响我们的系统，而无法控制影响性能的外部条件。不过，我们知道当前架构还有很大的改进空间，所以尝试一下是值得的。

我们决定在做出重大改动前先验证一下我们的假设，并深入挖掘一些简单的性能优化措施。如果根据分组数据预估的业务影响是真实的，那么一旦进行这些基本优化，我们就能马上看到效果。

我们将加载速度提高了接近2.5秒，使其达到第75百分位。我们把这个改动作为A/B测试，只给50%的流量试用了。在测试组中，体验良好的用户比例增加了12个百分点，而糟糕体验的比例则下降了10个百分点。这在预料之中，但转化数据又有什么变化呢？

你可能还记得，转化提升的上限是6%。然而，我们并没有将所有访客都移至更好的体验组，因此，我们预计实际会小很多。

经过测试数据的检查，我们发现测试组和对照组的注册页面总转化率竟然相差竟达5%。

显示对照组和变体组转化价值的条形图：

那真是一个大惊喜，但也显示出统计上的显著差异。这使我们决定将优化措施推广给所有访客，并计划未来的优化工作，以进一步提高我们的业务绩效。

测量你产品的用户体验并将其与关键绩效指标（KPI）关联起来，可以帮助你发现提升指标的机会。所需的数据要么已经在你的数据湖中，要么可以快速收集。

一旦确定了重点优化领域，你可以轻松估计从性能优化中获得的投资回报率。成功的关键在于找到工程与产品之间正确的沟通方式。 一点点提升速度将通过小步骤迭代带来价值。

注意： KPI改进不仅能为您的产品带来好处，还能带来其他的好处。更多示例请参阅我的同事Clint写的文章《可观测性如何帮助您的产品》