维度:浏览器 (browser)
浏览器维度根据客户端发送的 User Agent 字符串对性能数据进行分组。这让你能够通过渲染应用的特定软件(例如 Chrome、Firefox、Safari、Edge、Samsung Internet)来审计 Core Web Vitals 性能。
浏览器维度能够隔离软件限制、渲染引擎差异(Blink、Gecko、WebKit)以及第三方脚本兼容性。

RUM vs. CrUX
理解数据来源对准确的工程分析至关重要。
- CrUX (Chrome User Experience Report):该数据集仅收集 Chrome(以及部分 Chromium 衍生浏览器)中选择加入用户的数据。它完全排除了来自 Firefox(Gecko 引擎)和 Safari(WebKit 引擎)的流量。
- CoreDash RUM:收集所有执行该 JavaScript 代码片段 of 浏览器的数据。
对于许多网站,非 Chrome 浏览器占了 30-50% 的流量。仅依赖 CrUX 会带来盲区:你是在针对 Google 的 V8 引擎进行优化,却忽略了大量受众所使用的 SpiderMonkey(Firefox)和 JavaScriptCore(Safari)引擎。
特定指标诊断
不同的浏览器引擎在管理资源、编译 JavaScript 以及计算布局几何图形时存在差异。使用该维度来定位特定引擎的故障。
Interaction to Next Paint (INP)
INP 问题与浏览器的 JavaScript 引擎效率以及 main thread 调度直接相关。
- Firefox (SpiderMonkey):Firefox 处理任务优先级的方式与 Chrome 不同。由于 main thread 如何 yield 的差异,在 Chrome 中能顺利运行的重度事件监听器,在 Firefox 中可能会导致明显的输入延迟。
- Safari (JavaScriptCore):在移动端上经常表现出独特的 “tap” 延迟行为。在 Android(Chrome)上感觉是瞬时完成的 hydration 逻辑,在 iOS 上可能会因为独特的事件传播模型而触发延迟。
Largest Contentful Paint (LCP)
LCP 的差异通常说明功能不对等,或者不支持现代优化 API。
- Format Negotiation:如果 Chrome 报告的 LCP 很快但 Firefox 滞后,请检查你的图片格式策略。你可能向 Chrome 提供了 AVIF,而对不支持该格式的旧版本浏览器 fallback 到了体积更大的 JPEG。
- Priority Hints:Chrome 会积极响应 fetchpriority="high"。忽略此属性的浏览器会以标准优先级处理 LCP 资源,从而人为拉长了加载延迟。
- Connection Protocols:Edge 和 Firefox 在企业或受限网络环境中协商 HTTP/3 (QUIC) 连接的方式可能不同,这会影响 LCP 中的 TTFB 部分。
Cumulative Layout Shift (CLS)
渲染引擎使用独特的亚像素逻辑来计算像素几何。
- Font Rendering(Gecko vs. Blink):Firefox(Gecko)和 Chrome(Blink)渲染字体基线和字距的方式略有不同。如果你的 fallback 字体指标未能完美匹配,在加载 Web 字体时文本块会调整大小,导致在其中一个浏览器中产生布局偏移,而另一个却没有。
- Scrollbar Reservation:Windows 浏览器(Edge/Firefox/Chrome)会为滚动条保留物理空间,而 macOS 浏览器则是将其悬浮叠加。这种差异经常导致基于宽度的布局偏移,在 Mac 上开发时可能完全看不出来,但对 Windows 用户来说却非常明显。
工作流:隔离特定引擎的性能退化
该维度的主要使用场景是“引擎验证”。
- Identify the Outlier:按 Impact 或 Volume 对你的 Browser 表进行排序。寻找得分明显差于基准(Chrome Mobile)的特定浏览器(例如 Firefox Mobile)。
- Verify the Environment:检查该问题是仅与浏览器相关,还是浏览器与操作系统的组合(例如 Edge on Android 对比 Edge on Windows)。
- Debug:如果 Edge 慢但 Chrome 快(两者均使用 Blink),请排查 Edge 用户常用的第三方扩展或企业安全软件是否向 DOM 注入了脚本。如果 Firefox 慢,请审计你的 CSS,检查是否存在非标准属性或布局抖动(layout thrashing),因为 Gecko 对这些的惩罚比 Blink 更严重。
历史遗留及内嵌浏览器
使用浏览器维度来识别“长尾”性能拖累。
应用内浏览器:来自 Instagram、LinkedIn 或 Facebook 的流量通常在受限的 WebView 中运行,其行为与原生移动端浏览器不同。
历史版本:你可能会发现来自过时浏览器版本的流量。如果这些版本产生高 INP,请配置你的构建工具(Babel/PostCSS)以提供必要的 polyfill,或者在流量微不足道时做出停止支持的决定,从而为现代用户缩减包体积。。

