使用 Chrome UX 报告监控竞争对手的分步指南 什么是 CrUX 如何使用 好的，但是有没有不使用 SQL 的解决方案呢？获取 CrUX 数据最简单的方法是什么？如何获取页面级的随时间变化数据？但是监控怎么办？给我一个可以克隆的东西就好！总结

2025-06-08

使用 Chrome UX 报告监控竞争情况的分步指南

什么是 CrUX

如何使用

好的，但是没有 SQL 的解决方案怎么样？

获取 CrUX 数据的最简单的方法是什么？

如何获取随时间变化的页面级数据？

但是监控怎么办？

只要给我一些我可以克隆的东西！

总结

什么是 CrUX

Chrome 用户体验报告（又称“CrUX”）是一份由 Chrome 浏览器测量的真实用户体验数据集。Google 每月都会在 BigQuery 上发布超过 400 万个来源的快照，其中包含首次内容绘制 (FCP)、DOM 内容加载时间 (DCL) 和首次输入延迟 (FID) 等 Web 性能指标的统计数据。

PageSpeed Insights 是另一个与 CrUX 集成的工具，可以轻松访问原始性能以及特定于页面的性能数据，此外还提供关于如何提高页面性能的说明性信息。

CrUX 数据集自 2017 年 11 月以来一直存在并不断增长，因此我们甚至可以看到历史性能数据。

在这篇文章中，我将引导您完成如何使用它来深入了解您网站的性能以及它与竞争对手相比如何的实际步骤。

如何使用

在BigQuery上编写几行 SQL ，我们就可以开始提取有关 Web 上的 UX 的见解。

SELECT
  SUM(fcp.density) AS fast_fcp
FROM
  `chrome-ux-report.all.201808`,
  UNNEST(first_contentful_paint.histogram.bin) AS fcp
WHERE
  fcp.start < 1000 AND
  origin = 'https://dev.to'
Enter fullscreen mode Exit fullscreen mode

原始数据以直方图的形式组织，每个箱体包含开始时间、结束时间和密度值。例如，我们可以查询“快速”FCP 体验的百分比，其中“快速”定义为在一秒内完成。结果显示，在 2018 年 8 月期间，dev.to 上的用户体验到快速 FCP 的概率约为 59%。

假设我们想将其与假设的竞争对手 example.com 进行比较。该查询如下所示：

SELECT
  origin,
  SUM(fcp.density) AS fast_fcp
FROM
  `chrome-ux-report.all.201808`,
  UNNEST(first_contentful_paint.histogram.bin) AS fcp
WHERE
  fcp.start < 1000 AND
  origin IN ('https://dev.to', 'https://example.com')
GROUP BY
  origin
Enter fullscreen mode Exit fullscreen mode

竞争分析结果

差别不大，我们只是添加了另一个来源并对其进行分组，这样最终就能得到每个来源的快速 FCP 密度。结果显示，dev.to 的快速体验密度高于 example.com，后者的密度约为 43%。

现在假设我们想要测量这种随时间的变化。由于所有表格的日期均为 YYYYMM，我们可以使用通配符来捕获所有表格并进行分组：

SELECT
  _TABLE_SUFFIX AS month,
  origin,
  SUM(fcp.density) AS fast_fcp
FROM
  `chrome-ux-report.all.*`,
  UNNEST(first_contentful_paint.histogram.bin) AS fcp
WHERE
  fcp.start < 1000 AND
  origin IN ('https://dev.to', 'https://example.com')
GROUP BY
  month,
  origin
ORDER BY
  month,
  origin
Enter fullscreen mode Exit fullscreen mode

通过将结果绘制成图表（BigQuery 可以导出到 Google Sheet 进行快速分析），我们可以看到 dev.to 的性能一直很好，但 example.com 最近出现了很大的波动，导致其密度低于其通常的约 80%。

两个起源的快速FCP图表

好的，但是没有 SQL 的解决方案怎么样？

我懂你的意思。BigQuery 功能极其强大，可以编写自定义查询来按需切分数据，但首次使用可能需要进行一些配置，而且如果一个月查询量超过 1 TB，可能需要为超出部分付费。此外，它还需要一定的 SQL 经验，如果没有基础查询作为起点，很容易迷失方向。

有一些工具可以提供帮助。第一个是 CrUX 信息中心。您可以访问g.co/chromeuxdash来构建自己的信息中心。

适用于 dev.to 的 chrome ux 仪表板

这将为您生成一个仪表板，其中包含随时间推移的 FCP 分布情况。无需 SQL！

仪表盘还隐藏着一个超能力。由于 CrUX 中的数据是按照用户设备和连接速度等维度进行切片的，我们甚至可以获得关于用户本身的汇总数据：

形状因子分布

该图表显示，dev.to 上的用户大多使用手机，几乎从不使用平板电脑。

连接分布

连接图表显示，4G 和 3G 连接速度的比例为 90/10。这些分类是有效的连接类型。这意味着，如果 4G 网络用户体验到的速度接近 2G，则将被归类为 2G。如果桌面用户使用快速 WiFi，则将被归类为 4G。

这款仪表盘的另一个亮点是，它是专为您定制的。您可以根据需要进行修改，例如，您可以添加与 example.com 对应的图表，以便并排比较统计数据。

两个来源的仪表板比较

仪表板使用 Data Studio 构建，它还具有访问控制和可嵌入性等便捷的共享功能。

获取 CrUX 数据的最简单的方法是什么？

使用 PageSpeed Insights 网页界面，您只需输入 URL 或来源即可立即获取图表。例如，使用origin:前缀，我们可以获取 dev.to 的来源范围内的 FCP 和 DCL 统计信息：

PageSpeed Insights 上的 dev.to

https://developers.google.com/speed/pagespeed/insights/?url=origin%3Ahttps%3A%2F%2Fdev.to

PSI 数据的一个重要区别在于，它使用 30 天的滚动汇总窗口每日更新，而 BigQuery 则按自然月发布。这一点非常实用，因为它能让您获取最新数据。另一个重要区别在于，它提供特定页面的性能数据：

dev.to 开源 perf

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdev.to%2Fben%2Fdevto-is-now-open-source-5n1

此链接提供@ben热门开源公告的 CrUX 数据。请注意，并非所有页面（甚至来源）都包含在 CrUX 数据集中。如果您看到“不可用”响应，则该页面可能数据不足，例如AMA 主题页面的情况：

速度不可用

还要记住，一个页面在当前 30 天窗口期内拥有数据，但在未来某个窗口期内可能没有足够的数据。因此，指向@ben帖子的 PSI 数据的链接可能在几个月后就无法获得速度数据，具体取决于该页面的受欢迎程度。确切的阈值保密，以避免在 CrUX 报告之外过多地透露页面的不受欢迎程度。

如何获取随时间变化的页面级数据？

这很棘手，因为虽然 PSI 提供了页面级数据，但它只提供最近 30 天的快照，而不是像 BigQuery 那样提供历史视图。不过，我们可以实现这一点！

PSI 有一个API。我们可以编写一个巧妙的小脚本，每天 ping 该 API 来提取性能数据。

  1. 首先，创建一个新的Google Sheet
  2. 进入“工具”菜单并选择“脚本编辑器”
  3. 在 Apps Script 编辑器中为项目命名，例如“PSI Monitoring”，进入“资源”菜单，选择“高级 Google 服务”，然后点击链接以在“Google Cloud Platform API 信息中心”中启用服务应用程序脚本服务
  4. 在 Google Cloud Platform 控制台中，搜索 PageSpeed Insights API，启用它，然后单击“创建凭据”以生成 API 密钥
  5. 在 Apps 脚本编辑器中，转到“文件”、“项目属性”，然后创建一个名为“PSI_API_KEY”的新“脚本属性”，并粘贴新的 API 密钥

现在您已准备好编写脚本。在 中Code.gs粘贴此脚本：

// Created by Rick Viscomi (@rick_viscomi)
// Adapted from https://ithoughthecamewithyou.com/post/automate-google-pagespeed-insights-with-apps-script by Robert Ellison

var scriptProperties = PropertiesService.getScriptProperties();
var pageSpeedApiKey = scriptProperties.getProperty('PSI_API_KEY');
var pageSpeedMonitorUrls = [
  'origin:https://developers.google.com',
  'origin:https://developer.mozilla.org'
];

function monitor() {
  for (var i = 0; i < pageSpeedMonitorUrls.length; i++) {
    var url = pageSpeedMonitorUrls[i];
    var desktop = callPageSpeed(url, 'desktop');
    var mobile = callPageSpeed(url, 'mobile');
    addRow(url, desktop, mobile);
  }
}

function callPageSpeed(url, strategy) {
  var pageSpeedUrl = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=' + url + '&fields=loadingExperience&key=' + pageSpeedApiKey + '&strategy=' + strategy;
  var response = UrlFetchApp.fetch(pageSpeedUrl);
  var json = response.getContentText();
  return JSON.parse(json);
}

function addRow(url, desktop, mobile) {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName('Sheet1');
  sheet.appendRow([
    Utilities.formatDate(new Date(), 'GMT', 'yyyy-MM-dd'),
    url,
    getFastFCP(desktop),
    getFastFCP(mobile)
  ]);
}

function getFastFCP(data) {
  return data.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.distributions[0].proportion;
}
Enter fullscreen mode Exit fullscreen mode

该脚本会读取您分配给脚本属性的 API 密钥，并默认带有两个来源。如果您想将其更改为 URL 端点，只需省略origin:前缀即可获取特定页面。

该脚本将通过桌面和移动设备的 PSI API 运行每个 URL，并将快速 FCP 的比例提取到工作表中（名为“Sheet1”，因此保持任何重命名同步）。

您可以通过打开“选择函数”菜单，选择“监控”，然后点击三角形的“运行”按钮来测试。首次运行时，您需要授权脚本运行 API。如果一切顺利，您可以打开工作表查看结果。

PSI API 结果

我添加了标题行，并设置了列的格式（A 表示日期类型，C 和 D 表示百分比），以便于阅读。在这里，您可以执行 Sheets 的所有强大功能，例如设置数据透视表或可视化结果。

但是监控怎么办？

幸运的是，有了 Apps 脚本，您无需每天手动运行此函数。您可以设置“触发器”来monitor每天运行该函数，这样每天就会为每个网址添加一行。要进行设置，请转到“编辑”菜单，选择“当前项目的触发器”，然后使用以下配置添加一个新触发器：

  • 运行monitor函数
  • “时间驱动”
  • “日程表”
  • 选择任意时间运行脚本，或保留默认时间“午夜至凌晨 1 点”

保存触发器后，您应该能够每天返回此工作表来查看所有受监控 URL 或来源的最新性能统计数据。

只要给我一些我可以克隆的东西！

这是我制作的表格。点击“文件 > 复制...”进行克隆。现在，除了 API 密钥属性和每日触发器之外，其他设置都已完成。请按照上述步骤进行设置。您还可以清除旧数据并覆盖示例 URL，以自定义分析。瞧！

总结

这篇文章探讨了从 Chrome UX 报告中获得真实用户洞察的四种不同方法：

  1. BigQuery
  2. CrUX 仪表板
  3. PageSpeed Insights
  4. PageSpeed Insights API

这些工具使各种专业水平的开发人员都能利用数据集。未来，我希望看到这些数据得到更广泛的应用。例如，如果您用来监控网站真实用户表现的工具也能显示其与竞争对手的比较结果，那会怎样？类似的第三方集成可以解锁一些非常强大的用例，从而更好地了解用户体验。

我还写过如何将其与其他数据集结合起来，以更好地了解整个网络的现状。例如，我将 CrUX 与HTTP Archive数据结合起来，分析了顶级 CMS 的真实用户性能。

CMS 性能

该数据集甚至还不到一年，但它有很大潜力成为推动更好用户体验的真正动力！

如果您想了解更多关于 CrUX 的信息，可以阅读官方开发者文档，或者观看我制作的“Web 现状”视频，其中详细介绍了它的工作原理。如果您有任何疑问，也可以关注我运营的@ChromeUXReport账户。

鏂囩珷鏉簮锛�https://dev.to/chromiumdev/a-step-by-step-guide-to-monitoring-the-competition-with-the-chrome-ux-report-4k1o
Devto 翻译
PREV
JavaScript 中的可取消异步函数
NEXT
提高和自动化代码质量的最佳方法！