用于衡量购买漏斗中各个阶段效果的策略。
购买漏斗的不同步骤容易以不同的方式出现性能问题，因此需要不同的衡量和优化方式：
在本指南中，我们将介绍如何衡量不同的步骤。因此，我们建议您查看实验室数据和现场数据。
实验室数据是通过在本地运行测试（例如使用 Lighthouse 和其他工具）收集的。这样，您就可以通过受控且稳定的环境将网站在一段时间内的性能以及与竞争对手的网站性能进行比较，但可能无法代表用户在现实生活中的性能体验。
实测数据通过分析从真实用户那里收集，因此代表他们的体验。然而，它很难随着时间的推移或与竞争对手进行比较。网络连接和智能手机硬件会随着时间的推移而发展，并且不同的目标受众群体可能拥有不同的设备，因此很难与实测数据进行比较。另请参阅衡量实际效果。
要全面了解情况，需要同时提供这两个数据源。以下各部分介绍了如何收集漏斗中不同相关效果标记的实验室数据和现场数据。
发现广告系列
针对发现进行优化意味着针对首次加载（即新用户将会看到的内容）进行优化，同时针对搜索和社交抓取工具也进行了优化。您可以通过 Lighthouse 轻松获取首次加载的实验室数据，同时通过 Chrome 用户体验报告轻松获取现场数据（至少适用于 Chrome）。您可以在 PageSpeed Insights 中找到这两种工具的便捷组合。您还应该自行跟踪现场的相关指标：在真实用户的设备上衡量这些指标可以很好地大致了解相关信息。
从用户角度来看，最重要的指标包括：
- First Contentful Paint (FCP)：用户凝视着空白屏幕的时间。大多数用户会在这段时间内跳出，因为他们看不到进度。
- 首次有效绘制 (FMP)：当用户开始看到他们想要的主要内容时。这通常是主打图片，但对于着陆页而言，它也可能是号召性用语，如购买按钮，因为用户可能是在明确的意图（例如，通过定位的广告系列）到达的。
- First Input Delay (FID)：网站需要对用户首次输入做出反应的时间。 过多的 JavaScript 和其他素材资源加载问题可能会阻止该操作，从而导致点按或点击失败、错误输入和页面放弃。
您可以查看更多指标，但这些指标是一个很好的基准。此外，还要确保了解跳出率、转化次数和用户互动度，以便进行相关设置。
互动度和转化
在首次加载着陆页后，用户将会浏览您的网站，并希望成功完成转化。
在此阶段，需要实现快速的响应式导航和互动，这一点非常重要。遗憾的是，衡量现场导航和互动事件的完整流并非易事，因为每位用户在网页中走的路线各不相同。因此，我们建议在实验室测试中编写脚本并测量流程，以衡量实现转化或转化子目标所需的时间（以下简称“操作时间”），以便比较一段时间内的效果或与竞争对手的效果进行比较。
您可以采用以下两种便捷的方法：
WebPageTest
WebPageTest 提供非常灵活的脚本解决方案。基本思路是：
- 让 WebPageTest 使用
navigate命令浏览该流的各个页面。 - 如果需要，请通过
clickAndWait命令编写按钮点击脚本，并通过setValue填充文本字段。如需测试单页应用，请为第一个步骤之后的所有步骤使用clickAndWait（而非navigate）命令，因为navigate将执行完整加载，而不是轻量级虚拟网页加载。 - 请确保通过
combineSteps将分析中流的不同步骤组合在一起，以针对整个流生成单个总体结果报告。
此类脚本可能如下所示：
combineSteps
navigate https://www.store.google.com/landingpage
navigate https://www.store.google.com/productpage
clickAndWait innerText=Buy Now
navigate https://www.store.google.com/basket
navigate https://www.store.google.com/checkout
使用这样的脚本，您可以轻松地衡量和比较一段时间内的性能。这甚至可以通过 WebPageTest API 自动执行。
木偶操作师
另一个不错的脚本测试方式是使用无头 Chrome，该方法可通过 Node API Puppeteer 进行控制。总体思路是通过 Puppeteer 启动浏览器，通过 goto 函数导航到着陆页，注入 JavaScript 以填充字段或点击点击按钮，然后根据需要通过进一步的 goto 调用继续完成漏斗。
作为一个指标，用户可以直接衡量流的时长，但也可以对流中各个加载的 FCP、FMP 或 TTI 值求和。使用 Puppeteer 测试网站性能概述了如何通过 Puppeteer 获取性能指标。一个非常简单的示例 Node 脚本可能如下所示：
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const start = performance.now();
await page.goto('https://www.store.google.com/landingpage');
await page.goto('https://www.store.google.com/productpage');
// click the buy button, which triggers overlay basket
await page.click('#buy_btn');
// wait until basket overlay is shown
await page.waitFor('#close_btn');
await page.goto('https://www.store.google.com/basket');
await page.goto('https://www.store.google.com/checkout');
console.log('Flow took ' + parseInt((performance.now() - start)/1000) + ' seconds');
await browser.close();
})();
此脚本可以轻松地自动执行，甚至可以成为构建流程或性能预算的一部分，并定期监控。
再次互动
用户回访您网站的时间间隔不尽相同。浏览器缓存的网站资源可能会减少，这需要更多的网络请求，具体取决于经过的时间。这使得很难估算实验室测试中重复访问的性能差异。不过，我们仍建议您留意这一点，WebPageTest 是适用于重复访问的优秀实验室测试工具，它有一个适用于直接重复访问的专用选项：
要更好地了解现场的重复访问效果，请使用您选择的分析套件按用户类型细分您的效果指标。以下是 Google Analytics（分析）中此类报告的示例：
此类报告还会显示新用户和回访用户的网页加载时间。
回顾
本指南将为您介绍如何通过现场和实验室测试来测量首次负载、流动和重复负载。请务必相应地优化漏斗的不同步骤，以最大限度地提高发现（首次加载）、互动（导航和流程）和再互动（重复加载）的效果。