使 Baseline 可操作化：使用真实用户数据

Karlijn Löwik
Erwin Hofman

发布时间：2025 年 2 月 10 日

您是否曾因不确定用户的浏览器是否支持而推迟实现现代 Web 功能？或者是否保留了超出需要的沉重 polyfill？您并不孤单。虽然 Baseline 为我们提供了关于全球浏览器支持的明确信号，但一直缺少一个关键部分：了解您的用户实际支持什么。

RUMvision 团队通过将 Baseline 数据与他们的真实用户监控 (RUM) 数据相结合解决了这个问题，结果非常有趣。团队发现他们可以比计划提前几个月采用现代功能，有些人发现他们维护的 polyfill 中，97% 的用户甚至不需要。其他人则发现，推迟实现新功能是明智的，因为他们的受众尚未准备好。

The RUMvision dashboard showing how many visitors support Baseline.
主要的 RUMvision Baseline 仪表板，基于 2024 年 12 月的数据，显示了您的用户对 Baseline 功能的总体支持情况，按引入年份组织。

Baseline 和浏览器支持的工作原理

对 Web 功能的支持与浏览器版本相关：当浏览器发布一项功能时，用户通过更新浏览器来获取它。Baseline 跟踪所有主要浏览器（Chrome、Edge、Firefox 和 Safari）何时发布了一项功能，用蓝色徽章标记它，并将其设置为“新发布”。30 个月后，此状态更新为“广泛可用”。

但是，您的用户的更新模式可能与全球平均水平大相径庭。通过跟踪您的用户实际拥有的浏览器版本，RUMvision 可以准确显示您的受众中支持每个功能的百分比。这使 Baseline 从一般指标转变为适用于您特定情况的实用工具。

Web 上的浏览器采用情况

通过查看不同市场（2024 年 12 月）数百万的页面浏览量，RUMvision 发现了用户获取浏览器更新的明确模式

  • Chrome、Edge 和 Firefox 更新被迅速采用，它们通常在三个月左右达到 95% 的支持率。
  • Safari 花费的时间要长得多——大约 19 个月才能达到相同的水平，因为它与操作系统更新相关联
  • Chrome 有其自身的怪癖——它很快达到 95-98%，但随后速度减慢，需要长达 23 个月才能达到 99%。

虽然 Baseline 跟踪数百个功能，但您可能专注于您想要使用的特定功能。任何功能的等待时间都取决于哪个浏览器最后支持它。

如果 Chrome 是某个功能达到 Baseline 所需的最后一个浏览器，并且您的受众主要使用 Chrome，那么他们很可能在几个月内获得它。但是，如果 Safari 是最后一个添加支持的浏览器，即使其他所有浏览器多年前就已准备就绪，您也可能需要等待 19 个月才能让您的 Safari 用户获得所需的操作系统更新。

现实世界对每个人来说都不同

我们的数据显示了不同网站之间的支持差异很大（2024 年 12 月）

  • 一家荷兰家居用品零售商
    • Baseline 2024 功能：34% 支持率
    • Baseline 2023 功能：76% 支持率
    • 广泛可用的功能：95% 支持率
  • 一家位于美国的科技博客
    • Baseline 2024 功能：59% 支持率
    • Baseline 2023 功能：89% 支持率
    • 广泛可用的功能：100% 支持率
  • 一家中东房地产网站
    • Baseline 2024 功能：39% 支持率
    • Baseline 2023 功能：74% 支持率
    • 广泛可用的功能：95% 支持率

这些差异的出现是由于您的访问者是谁以及他们如何浏览

  • 精通技术的用户倾向于快速更新，而普通受众通常停留在较早的版本上。
  • 不同的年龄组和受众有不同的浏览习惯和设备。
  • 移动和桌面用户访问您网站的方式各不相同。
  • 有些地区偏爱 iOS，另一些地区偏爱 Android，这会影响功能何时可用。

这就是为什么同一功能在科技博客上可能在几个月内安全使用，但在电子商务网站上则需要备用方案再使用一年。

将 Baseline 集成到 RUMvision 中

RUMvision 团队希望确保集成符合开发人员的期望，以及他们希望看到此信息的呈现方式。

他们从两个角度入手

  • 作为需要了解此信息的开发人员本身。
  • 作为为更广泛的开发社区构建产品的创作者。

与许多开发人员一样，该团队经常使用诸如 Can I Use 和 MDN 支持表之类的工具，因此他们定制了集成，以一种可以增强他们自身工作流程的方式呈现信息，同时满足所有 RUMvision 用户的需求。

结合多个数据源

该过程首先自动导入新发布的 Web 功能数据。然后，这些功能在 RUMvision 用户的可搜索和可筛选列表中公开。

当单击 Web 功能时，会打开一个模态窗口，显示详细的 Baseline 信息和浏览器支持时间轴。此视图补充了其他见解

  • 资源：指向 MDN、Can I Use、W3C 页面、浏览器发布信息、Chrome 状态和 web.dev 文章的链接。
  • Baseline 采用时间轴：显示每个浏览器何时实现对某项功能的支持。
  • MDN 支持表：来自 browser-compat-data 的数据，显示类似于 MDN 标准支持表的详细信息。
  • 已知错误：从同一数据集提取，以补充可用资源。
  • AI 辅助：帮助解释主要浏览器之间的支持统计数据。
Documentation for content-visibility and browser support data for Popover as shown on RUMVision.
这些屏幕截图显示了 Baseline 集中所有功能的免费文档和支持信息。

充分利用现代功能

将 Baseline 与用户数据相结合的真正力量还在于推进现代 Web 功能。对于每个功能，您都会看到受众的采用水平，并可以跟踪它们随时间的变化。这意味着在合适的时机用原生浏览器功能替换复杂的 JavaScript 解决方案。例如，您可以从以下方面入手：

无需等待 30 个月才能达到“广泛可用”状态，您可以根据实际使用数据做出明智的决策。您将确切地知道何时发布新功能以及如何有效地实现它们。

真实示例，真实影响

举一个实际例子，看看最近达到 Baseline 的功能，CSS content-visibility 属性

  • 一些网站的支持率达到 99%，可以立即实施。
  • 另一些网站显示的支持率为 82-89%，表明需要备用方案。
  • 少数网站识别出仍在使用旧版浏览器的特定用户群体。
Browser support timelines.
content-visibility 美国科技网站与中东房地产网站的时间轴。

数据还显示，从 2024 年 2 月到 2024 年 9 月，Safari 对两者的支持率都保持在 20% 左右，这与 IOS 18 从 2024 年 9 月开始部署（发布此功能）相关。

客户通过他们自己的“广泛可用”Baseline 获得成功

通过使用来自您自己的 RUM 信息的洞察力，您可以创建自己的 Baseline，其中包括您自己网站上可用的功能，分为四种状态，并具有筛选功能

  • 准备发布（当至少 98% 的访问者支持时）。
  • 良好（支持覆盖率在 95% 到 98% 之间）。
  • 注意（覆盖率在 75% 到 95% 之间）。
  • 谨慎操作（覆盖率低于 75%）。

Information about content-visibility

通过将他们的 RUM 数据与每个 Web 功能的 Baseline 信息相结合，用户已经看到了成功案例。Informatiebord.nl 在发现 97% 的用户已经支持原生功能后，删除了 30KB 的 JavaScript polyfill。他们的开发人员 Kevin Meijer 说

“借助 Baseline，我们可以策略性地决定：我们是专注于为 97% 的访问者提供完美的用户体验而不影响性能，还是放慢创新速度以适应剩余的 3%？我们有意识地选择了第一种方案，因为为那 3% 付出的额外努力会对大多数人的体验产生负面影响。”

A message stating that 96.9% of visitors supported offscreen canvas.
客户成功案例，informatiebord.nl 根据其真实用户数据自信地从网站上删除了 polyfill。

为 Web 贡献力量

Baseline 数据与真实用户洞察相结合，有助于我们所有人就功能支持做出更好的决策。何时放弃旧代码，何时采用新功能——当您知道您的用户实际支持什么时，这些选择会变得更加清晰。

RUMvision 正在与 WebDX 社区小组分享有关浏览器采用模式的发现，以帮助了解功能如何从“新发布”状态转变为“广泛可用”状态。