如何在 Looker Studio 上构建 CrUX 信息中心

Rick Viscomi
Rick Viscomi

Looker Studio(以前称为“数据洞察”)是一款功能强大的数据可视化工具,可让您以 Chrome 用户体验报告 (CrUX) 等大数据源为基础,构建信息中心。在本指南中,您将了解如何创建自己的自定义 CrUX 信息中心来跟踪源站的用户体验趋势。

CrUX 信息中心的屏幕截图,显示了在不同月份的变化各种堆叠条形图。
CrUX 信息中心

CrUX 信息中心使用名为社区连接器的 Looker Studio 功能构建而成。此连接器是 BigQuery 上的原始 CrUX 数据与 Looker Studio 中的可视化图表之间预先建立的关联。信息中心的用户无需编写任何查询或生成任何图表。一切都是为您构建的;您只需提供一个来源,系统就会为您生成自定义信息中心。

默认的 CrUX 信息中心

CrUX 具有默认信息中心,由 CrUX 团队维护。该团队会添加新指标(例如 INP),并在下次加载信息中心时使用。

创建自定义信息中心

某些用户可能需要自定义信息中心,在这种情况下,您可以创建自己的默认信息中心副本,并根据需要进行更改。

如要创建自定义信息中心,请前往 g.co/chromeuxdash。系统随即会将您转到 CrUX 社区连接器页面,您可以在该页面中提供将生成信息中心的来源。请注意,首次使用的用户可能需要完成权限提示或营销偏好设置提示。

CrUX 信息中心连接器配置屏幕的屏幕截图,其中包含用于输入来源网址的字段,以及允许在报告中修改该字段的复选框。
CrUX 信息中心连接器

文本输入字段仅接受源站,不接受完整网址。例如:

来源(支持)
https://developer.chrome.com
网址(不支持)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

如果省略协议,则假定使用 HTTPS。子网域很重要,例如 https://developers.google.comhttps://www.google.com 会被视为不同的来源。

源站存在的一些常见问题包括提供了错误的协议,例如 http:// 而不是 https://,以及在需要时省略了子网域。某些网站包含重定向,因此如果 http://example.com 重定向到 https://www.example.com,您应使用后者,即源的规范版本。一般来讲,请使用用户在地址栏中看到的任意源站。

勾选该复选框后,该来源将会包含在信息中心网址中。这样一来,日后就可以更改此网址参数,从而将同一信息中心用于不同的来源,所以建议勾选该复选框。

点击连接按钮。如果您勾选了该复选框,系统会要求您确认。

如果您的来源未包含在 CrUX 数据集中,您可能会收到类似于下图中所示的错误消息。数据集中有超过 1500 万个来源,但您要包含的源可能没有足够的数据

弹出错误消息的屏幕截图,其中包含“此数据集中有超过 1500 万个源,但 https://donotexist.origin 不是其中之一”
源不存在时的 CrUX 社区连接器错误消息

如果来源存在,系统会将您转到信息中心的架构页面。这会显示包含的所有字段:每个有效连接类型、每个设备规格、数据集发布月份、每个指标的性能分布,当然还有源站名称。您无需执行任何操作,也无需在此页面上进行任何更改,只需点击创建报告即可继续。

CrUX Dashboard 架构编辑器的屏幕截图,其中包含各种字段、类型、汇总和说明(可更改这些字段或添加新字段)。
CrUX 信息中心架构

使用信息中心

每个信息中心都有三种页面:

  1. Core Web Vitals 概览
  2. 指标效果
  3. 用户受众特征

每个页面都包含一个图表,其中显示了各个可用每月版本的一段时间内的分布情况。新数据集发布后,您可以刷新信息中心以获取最新数据。

每月数据集会在每月的第二个星期二发布。例如,包含 5 月用户体验数据的数据集将于 6 月的第二个星期二发布。

Core Web Vitals 概览

第一页概述了来源的每月核心网页指标性能。这些是 Google 建议您重点关注的最重要的用户体验指标。

CrUX Dashboard Core Web Vitals 概览的屏幕截图,其中显示了 LCP、INP 和 CLS 指标信息。
CrUX 信息中心 Core Web Vitals 概览

使用“Core Web Vitals”页面,了解桌面设备和手机用户对来源的体验。默认情况下,系统会选择创建信息中心时最近的月份。若要在较旧或较新的每月版本之间切换,请使用页面顶部的月份过滤器。

请注意,默认情况下,这些图表会忽略平板电脑,但如果需要,您可以移除条形图配置中的无平板电脑过滤条件:

在 Looker Studio 中修改“过滤条件”选项的屏幕截图。
修改 CrUX 信息中心,以在“Core Web Vitals”页面上显示平板电脑

指标效果

在“Core Web Vitals”页面之后,您会看到 CrUX 数据集内所有metrics的独立页面。

CrUX 信息中心 LCP 页面的屏幕截图,其中显示了各个月份的变化情况。
CrUX 信息中心 LCP 页面

每个页面的顶部都是设备过滤条件,可用于限制体验数据中包含的设备规格。例如,您可以具体到手机体验数据。此设置会应用于各个页面。

这些页面上的主要可视化图表是分为“良好”“需要改进”和“欠佳”的体验的每月分布情况。图表下方带有不同颜色的图例表示该类别涵盖的体验范围。例如,在上一个屏幕截图中,您可以看到最近几个月内“良好”Largest Contentful Paint (LCP) 体验的百分比出现波动��并且略有下降。

图表上方显示了最近一个月的“良好”和“糟糕”体验所占百分比,以及一个指标,指明与上个月相比的百分比差异。对于这一来源,“良好”的 LCP 体验月环比下降了 3.2% 至 56.04%。

此外,对于 LCP 等指标以及提供明确百分位建议的其他 Core Web Vitals,您会发现“P75”指标介于“良好”和“较差”百分比之间。此值对应于用户体验的第 75 百分位。换言之,75% 的体验优于此价值。有一点需要注意,这适用于源站上所有设备的总体分布情况。如果使用“设备”过滤条件切换特定设备的状态,系统不会重新计算百分位。

有关百分位数的技术注意事项

请注意,百分位指标基于 BigQuery 中的直方图数据,因此粒度将比较粗略:LCP 为 100 毫秒,INP 为 25 毫秒,CLS 为 0.05。换句话说,P75 LCP 为 3800 毫秒表示真正的第 75 百分位介于 3800 毫秒到 3900 毫秒之间。

此外,BigQuery 数据集使用一种称为“分箱扩展”的技术,在这种技术中,用户体验密度本质上会被划分到非常粗略的分箱中,以降低粒度。这样一来,我们就可以在分布的尾部添加分钟密度,而无需超过四位数。例如,小于 3 秒的 LCP 值会被划分到宽度为 200 毫秒的分箱中。分箱宽度介于 3 到 10 秒之间,宽度为 500 毫秒。超过 10 秒时,分箱宽度为 5000 毫秒... 与具有不同宽度的分箱不同,分箱扩展可确保所有分箱宽度均为 100 毫秒(最大公约数),并且分布在每个分箱内进行线性插值。

PageSpeed Insights 等工具中对应的 P75 值并非基于公共 BigQuery 数据集,并且能够提供���秒级精度值。

用户受众特征

用户受众特征页面包含两个维度:设备和有效连接类型 (ECT)。这些页面说明了整个源中具有各种受众特征的用户的网页浏览量分布情况。

“设备分布情况”页面会显示一段时间内手机、桌面设备和平板电脑用户的细分数据。许多来源往往几乎没有平板电脑数据,因此您经常会在图表边缘看到“0%”。

CrUX 信息中心设备页面的屏幕截图,其中显示了设备细分的月环比变化。
CrUX 信息中心设备页面

同样,ECT 分布页面也会显示 4G、3G、2G、慢速 2G 体验和离线体验的细分数据。

这些维度的分布使用 First Contentful Paint (FCP) 直方图数据细分计算得出。

常见问题解答

以下是有关在 Looker Studio 上构建 CrUX 信息中心的一些常见问题解答:

何时应使用 CrUX 信息中心,而不是其他工具?

CrUX 信息中心基于 BigQuery 上可用的底层数据,但您无需编写一行 SQL 即可提取数据,也不必担心超出任何免费配额。与查看底层数据相比,设置信息中心更加轻松快捷,系统为您生成了所有可视化图表,并且您还可以控制与所需的任何人共享信息中心。

使用 CrUX 信息中心是否有任何限制?

基于 BigQuery 意味着 CrUX 信息中心也会继承其所有限制。它仅限于每月一次的源站级数据。

为了简单性和便利性,CrUX 信息中心还舍弃了 BigQuery 上原始数据的一些多功能性。例如,指标分布仅按“良好”“需要改进”和“欠佳”,而不是完整的直方图。CrUX 信息中心还提供全球级别的数据,而 BigQuery 数据集可让您放大特定国家/地区的数据。

在哪里可以详细了解 Looker Studio?

如需了解详情,请参阅 Looker Studio 功能页面