Flashduty RUM 支持收集和上报 Web Vitals 相关的性能指标,帮助您全面监控和优化网站性能。通过这些指标,您可以了解用户在访问网站时的实际体验,并针对性地进行优化。Web Vitals 指标概览#
最大内容绘制 (LCP): 衡量页面主要内容的加载性能
交互到下一帧延迟 (INP): 衡量整体交互响应性能
这些指标会在用户访问页面时自动收集,并通过 SDK 上报到 Flashduty 平台,您可以在分析看板中查看详细的性能数据。对于在后台打开的页面(例如,在新标签页或无焦点的窗口中),不会收集到下一绘制时间(Interaction to Next Paint)和最大内容绘制时间(Largest Contentful Paint)的数据。
指标计算方法#
1. 最大内容绘制(LCP)#
计算: 从页面开始加载(navigationStart
)到最大可见内容元素(如图片、文本块)渲染完成的时间。
用例: 监控主页或关键页面内容加载速度,识别资源加载瓶颈。
2. 首次内容绘制 (FCP)#
计算: 测量从用户第一次导航到页面到页面内容的任何部分在屏幕上呈现的时间。
用例: 用于测量感知加载速度,有助于向用户保证某些事情正在发生。
3. 交互到下一帧延迟(INP)#
计算: 测量所有用户交互(点击、轻触、键盘输入)到下一帧渲染的延迟时间。
用例: 评估页面整体交互响应性能,优化高延迟交互场景。
4. 累计布局偏移(CLS)#
计算: 统计所有意外布局偏移的分数(偏移距离 × 影响区域)。
5. 首次输入延迟(FID)#
计算: 从用户第一次交互开始到浏览器处理事件的时间差。
用例: 优化交互密集型页面(如表单、导航菜单)的响应速度。
监控单页应用(SPA)#
对于单页应用程序 (SPA),RUM 浏览器 SDK 通过loading_type
属性区分initial_load
和route_change
这两种导航类型。1.
History 单页应用
如果网页上的某个交互操作导致 URL 发生变化,但页面并未完全刷新,RUM SDK 会使用loading_type:route_change
启动一个新的view
。RUM 使用History API来跟踪 URL 的变化。 2.
Hash 单页应用
RUM SDK 会自动监控依赖哈希(#
)导航的框架。SDK 会监听 HashChangeEvent
并发出一个新的view
。来自HTML锚点且不影响当前视图上下文的事件将被忽略。
对于 SPA 应用,如需监控路由切换后的性能,建议使用自定义性能监控功能来测量特定组件或交互的性能指标。自定义性能监控