维度:浏览器 (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 代码片段的浏览器中收集数据。
对于许多网站来说,非 Chrome 浏览器占了 30-50% 的流量。仅仅依赖 CrUX 会产生盲点:您在针对 Google 的 V8 引擎进行优化,却忽视了您庞大受众群体所使用的 SpiderMonkey (Firefox) 和 JavaScriptCore (Safari) 引擎。
特定指标诊断
不同的浏览器引擎在管理资源、编译 JavaScript 和计算布局几何形状方面有所不同。使用此维度来准确定位特定引擎的故障。
Interaction to Next Paint (INP)
INP 问题与浏览器 JavaScript 引擎的效率和主线程调度直接相关。
- Firefox (SpiderMonkey):Firefox 处理任务优先级的方式与 Chrome 不同。由于主线程 yield 的差异,一个在 Chrome 中顺利通过的繁重事件监听器可能会在 Firefox 中引起明显的输入延迟。
- Safari (JavaScriptCore):在移动设备上关于“点击”延迟通常表现出截然不同的行为。由于不同的事件传播模型,在 Android (Chrome) 上感觉瞬间完成的水合逻辑 (Hydration logic) 可能会在 iOS 上引发延迟。
Largest Contentful Paint (LCP)
LCP 差异通常标志着缺乏功能对等性或对现代优化 API 的支持。
- 格式协商:如果 Chrome 报告了很快的 LCP,但 Firefox 滞后,请验证您的图像格式策略。您可能正在向 Chrome 提供 AVIF,同时作为 fallback 提供较大的 JPEGs 给缺乏支持的旧版浏览器。
- 优先级提示:Chrome 积极遵守 fetchpriority="high"。忽略此属性的浏览器会将 LCP 资源视为标准优先级,从而人为地夸大了加载延迟。
- 连接协议:Edge 和 Firefox 在企业或受限网络环境中协商 HTTP/3 (QUIC) 连接的方式可能不同,这会影响 LCP 的 TTFB 部分。
Cumulative Layout Shift (CLS)
渲染引擎使用不同的子像素逻辑来计算像素几何形状。
- 字体渲染 (Gecko vs. Blink):Firefox (Gecko) 和 Chrome (Blink) 渲染字体基线和字距的方式略有不同。如果您没有完美匹配 fallback 字体指标,当 Web 字体加载时,文本块将重新调整大小,从而导致在一个浏览器中发生位移,而在另一个浏览器中则不会。
- 滚动条保留:Windows 浏览器 (Edge/Firefox/Chrome) 为滚动条保留了物理空间,而 macOS 浏览器则是将其覆盖在上面。这种差异通常会导致基于宽度的布局偏移,这些偏移在 Mac 上开发时不可见,但对于 Windows 用户来说却很明显。
工作流程:隔离特定引擎的回归
此维度的主要用例是“引擎验证”。
- 识别离群值:按影响或数量对浏览器表格进行排序。查找得分明显差于基准 (Chrome Mobile) 的特定浏览器 (例如 Firefox Mobile)。
- 验证环境:检查问题是否严格与浏览器相关,还是浏览器和操作系统的组合相关 (例如,Android 上的 Edge 与 Windows 上的 Edge)。
- 调试:如果 Edge 很慢而 Chrome 很快 (两者都使用 Blink),请调查 Edge 用户常用的、向 DOM 中注入脚本的第三方扩展程序或企业安全软件。如果 Firefox 很慢,请审计您的 CSS 中是否存在非标准属性或布局抖动 (layout thrashing),Gecko 对此的惩罚比 Blink 更重。
旧版和嵌入式浏览器
使用浏览器维度识别“长尾”性能拖累。
应用内浏览器:来自 Instagram、LinkedIn 或 Facebook 的流量通常在受限的 WebViews 中运行,其行为与原生移动浏览器不同。
旧版本:您可能会发现来自过时浏览器版本的流量。如果这些版本产生了很高的 INP,请配置您的构建工具 (Babel/PostCSS) 以提供必要的 polyfills,或者,如果数量微不足道,请做出战略决定放弃支持,从而减小现代用户的 bundle size。

