浏览器指标

了解以下内容

Google 的核心 Web 指标及其重要性
如何分析浏览器指标输出
如何为您的浏览器指标设置阈值
如何使用 Performance API 衡量 Web 性能。

Google 的核心 Web 指标

k6 浏览器模块会基于核心 Web 指标发出指标。

Google 引入这些指标是为了提供统一的信号来评估网络上的用户体验。这些指标由三个重要的指标组成，以帮助改善用户在使用您的 Web 应用程序时的体验。

加载性能
互动性
以及视觉稳定性

为什么选择 Web 指标

核心 Web 指标是 Google 页面体验信号之一。积极的页面体验自然会带来更好的质量和更高的搜索引擎排名。这些关键指标可以帮助您了解前端应用程序的哪些方面需要优化，以便您的页面可以比同类内容排名更高。

现有的浏览器衡量标准，例如 Load 和 DOMContentLoaded 时间，已经不能很好地准确反映用户体验。依赖这些加载事件无法提供正确的指标来分析页面可能存在的关键性能瓶颈。Google 的 Web 指标更能衡量您的页面性能及其用户体验。

浏览器指标

使用 k6 浏览器模块时，会收集以下核心 Web 指标。

指标名称	描述
browser_web_vital_cls	通过量化可见页面内容意外布局偏移的数量来衡量网页的视觉稳定性。有关更多信息，请参阅累积布局偏移 (Cumulative Layout Shift)。
browser_web_vital_fid	通过量化用户首次互动（例如点击按钮）与浏览器响应之间的延迟来衡量网页的响应速度。有关更多信息，请参阅首次输入延迟 (First Input Delay)。
browser_web_vital_lcp	衡量页面上最大内容元素变为可见所需的时间。有关更多信息，请参阅最大内容绘制 (Largest Contentful Paint)。

此外，k6 还收集其他 Web 指标。

指标名称	描述
browser_web_vital_fcp	衡量浏览器渲染页面上第一个 DOM 元素（无论是文本、图像还是标题）所需的时间。有关更多信息，请参阅首次内容绘制 (First Contentful Paint)。
browser_web_vital_inp	一项实验性指标，用于衡量页面的响应速度。有关更多信息，请参阅下次绘制的交互延迟 (Interaction to Next Paint)。
browser_web_vital_ttfb	衡量浏览器请求到服务器开始响应之间的时间。有关更多信息，请参阅首字节时间 (Time to First Byte)。

要查看 k6 指标的完整列表，请参阅指标参考。

理解浏览器指标输出

浏览器测试完成后，k6 会报告聚合的浏览器指标输出的顶层概览。以下片段是一个示例：

注意
由于 Google 还建议测量每个 Web 指标的第 75 百分位数，因此未来仍会进行调整以改进摘要输出。

  browser_data_received.......: 2.6 kB  2.0 kB/s
  browser_data_sent...........: 1.9 kB  1.5 kB/s
  browser_http_req_duration...: avg=215.4ms  min=124.9ms med=126.65ms max=394.64ms p(90)=341.04ms p(95)=367.84ms
  browser_http_req_failed.....: 0.00%   ✓ 0        ✗ 3
  browser_web_vital_cls.......: avg=0        min=0       med=0        max=0        p(90)=0        p(95)=0
  browser_web_vital_fcp.......: avg=344.15ms min=269.2ms med=344.15ms max=419.1ms  p(90)=404.11ms p(95)=411.6ms
  browser_web_vital_fid.......: avg=200µs    min=200µs   med=200µs    max=200µs    p(90)=200µs    p(95)=200µs
  browser_web_vital_inp.......: avg=8ms      min=8ms     med=8ms      max=8ms      p(90)=8ms      p(95)=8ms
  browser_web_vital_lcp.......: avg=419.1ms  min=419.1ms med=419.1ms  max=419.1ms  p(90)=419.1ms  p(95)=419.1ms
  browser_web_vital_ttfb......: avg=322.4ms  min=251ms   med=322.4ms  max=393.8ms  p(90)=379.52ms p(95)=386.66ms

您还可以根据团队的需求以不同的方式可视化这些结果。有关更多信息，请查看我们关于可视化 k6 结果的博客文章。

为您的浏览器指标设置阈值

浏览器模块可以使用所有主要的 k6 功能，例如阈值。

要为您的浏览器指标设置阈值：

添加您要检查的指标。
指定其阈值。

如下例所示，如果您打算为其他页面设置阈值，也可以传入不同的 URL，尤其是在您的脚本包含页面导航时。

警告
当前，您只能使用 URL 为不同页面指定阈值。如果您使用分组，则指标不会像#721 中描述的那样被正确分组。

export const options = {
  thresholds: {
    'browser_web_vital_lcp': ['p(90) < 1000'],
    'browser_web_vital_inp{url:https://test.k6.io/}': ['p(90) < 80'],
    'browser_web_vital_inp{url:https://test.k6.io/my_messages.php}': ['p(90) < 100'],
  },
};

测试运行时，您应该会看到类似于下面的输出。

  browser_web_vital_inp..........................: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s
  ✓ { url:https://test.k6.io/ }..................: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s
  ✓ { url:https://test.k6.io/my_messages.php }...: avg=0s       min=0s       med=0s       max=0s       p(90)=0s       p(95)=0s
✓ browser_web_vital_lcp..........................: avg=460.1ms  min=460.1ms  med=460.1ms  max=460.1ms  p(90)=460.1ms  p(95)=460.1ms
  browser_web_vital_ttfb.........................: avg=339.3ms  min=258.9ms  med=339.3ms  max=419.7ms  p(90)=403.62ms p(95)=411.66ms

测量自定义指标

使用 k6 浏览器 page.evaluate 函数时，您可以调用 Performance API 来测量 Web 应用程序的性能。例如，如果您想测量用户完成操作（例如搜索功能）所需的时间，您可以使用 performance.mark 方法在浏览器的性能时间线中添加时间戳。使用 performance.measure 方法，您还可以测量两个性能标记之间的时间差。performance.measure 返回的时间持续时间可以使用趋势 (Trends) 添加为 k6 浏览器中的自定义指标。

import { browser } from 'k6/browser';
import { Trend } from 'k6/metrics';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
};

const myTrend = new Trend('total_action_time', true);

export default async function () {
  const page = await browser.newPage();

  try {
    await page.goto('https://test.k6.io/browser.php');
    await page.evaluate(() => window.performance.mark('page-visit'));

    await page.locator('#checkbox1').check();
    await page.locator('#counter-button').click();
    await page.locator('#text1').fill('This is a test');

    await page.evaluate(() => window.performance.mark('action-completed'));

    // Get time difference between visiting the page and completing the actions
    await page.evaluate(() =>
      window.performance.measure('total-action-time', 'page-visit', 'action-completed')
    );

    const totalActionTime = await page.evaluate(
      () =>
        JSON.parse(JSON.stringify(window.performance.getEntriesByName('total-action-time')))[0]
          .duration
    );

    myTrend.add(totalActionTime);
  } finally {
    await page.close();
  }
}

运行测试后，您应该会看到类似于下面的输出。

  iteration_duration..........: avg=1.06s    min=1.06s    med=1.06s    max=1.06s    p(90)=1.06s    p(95)=1.06s
  iterations..................: 1      0.70866/s
  total_action_time.............: avg=295.3ms    min=295.3ms    med=295.3ms    max=295.3ms    p(90)=295.3ms    p(95)=295.3ms