支持的技术
编辑支持的技术
编辑页面加载指标
编辑RUM 代理尝试捕获页面加载事务中页面的整体加载/渲染用户体验。它包括所有依赖资源,例如 JavaScript、样式表、图像等,这些资源都包含在页面中。除了将资源计时信息作为跨度捕获外,事务还包括导航跨度——与捕获的其他信息关联的标记,使瀑布图更具吸引力。
-
域名查找
- 当前页面的 DNS 查询持续时间:
domainLookupEnd
-domainLookupStart
。 -
连接到服务器
- 到服务器的 TCP 连接持续时间,包括 HTTPS 页面的 TLS 协商时间:
connectEnd
-connectStart
。 -
请求和接收文档
- 服务器的整体响应时间,包括最后一个字节:
responseEnd
-requestStart
。 -
解析文档,执行同步脚本
- HTML 文档解析时间,包括同步样式表和脚本:
tagsdomInteractive
-domLoading
。 -
触发“DOMContentLoaded”事件
- 浏览器完成文档解析时触发。当有多个侦听器或执行逻辑时很有用:
domContentLoadedEventEnd
-domContentLoadedEventStart
。 -
触发“load”事件
- 浏览器完成其文档和依赖资源的加载时触发:
loadEventEnd
-loadEventStart
。 -
首字节时间 (TTFB)
- 从浏览器发出初始文档的 HTTP 请求到接收页面的第一个字节的持续时间。TTFB 可从导航计时 API 获取为
reponseStart
时间戳,并在 Elasticsearch 文档中作为事务标记transaction.marks.agent.timeToFirstByte
捕获。
为了捕获页面的整体用户体验,包括以上所有信息以及在依赖资源执行期间可能触发的其他资源请求,page-load
事务持续时间可能并不总是反映浏览器的 Load 事件,并且可以超过该事件。
如果您有兴趣准确测量加载事件的持续时间,可以使用 触发加载事件
跨度或 Elasticsearch 文档中可用的事务标记 transaction.marks.agent.domComplete
来提取信息。
页面加载事务相对于导航计时 API 中的 fetchStart
时间戳进行测量。
以用户为中心的指标
编辑为了了解网页的性能特征(超出页面加载范围)以及用户如何感知性能,代理支持捕获这些 响应能力指标。
-
首次内容绘制 (FCP)
- 侧重于初始渲染,并测量从页面开始加载到页面内容的任何部分显示在屏幕上的时间。代理使用浏览器中可用的 Paint 计时 API 来捕获计时信息。FCP 作为所有基于 Chromium 的浏览器的
page-load
事务的事务标记捕获(Chrome >60,Edge >79,Opera >47 等)。 -
最大内容绘制 (LCP)
- 一种新的页面加载指标,表示从页面开始加载到屏幕上显示关键元素(最大的文本、图像、视频元素)的时间。LCP 可通过浏览器中的 LargestContentfulPaint API 获得,该 API 依赖于草稿 Element Timing API。LCP 是 核心 Web 指标 之一,仅在 Chrome >77 中可用。作为
page-load
事务的事务标记捕获,在页面加载的前 2.5 秒内保持 LCP 以提供良好的用户体验。 -
首次输入延迟 (FID)
- FID 量化了用户在页面加载期间与页面交互时的体验。它被测量为用户第一次与您的网站交互(鼠标点击、点击、选择下拉菜单等)到浏览器能够响应该交互之间的时间。FID 是 核心 Web 指标 之一,仅在 Chrome >85 中通过 Event Timing API 可用。FID 作为
page-load
事务的首次输入延迟
跨度捕获。将 FID 保持在100 毫秒以下以提供良好的用户体验。 -
总阻塞时间 (TBT)
- 在首次内容绘制和事务完成之间发生的每个长时间任务的阻塞时间(持续时间超过 50 毫秒)之和。总阻塞时间 是 交互时间 (TTI) 的一个很好的配套指标,TTI 是实验室指标,无法通过浏览器 API 在现场获得。代理根据页面加载生命周期中发生的长任务数量来捕获 TBT。作为
page-load
事务的总阻塞时间
跨度捕获。 -
累积布局偏移 (CLS)
- 表示页面整个生命周期中发生的全部意外布局偏移的累积分数。CLS 是 核心 Web 指标 之一,这是 Chrome 如何计算分数。保持分数小于 0.1 以提供良好的用户体验。
-
长时间任务
- 长时间任务是任何用户活动或浏览器任务,这些任务会长时间(超过 50 毫秒)独占 UI 线程,并阻止执行其他关键任务(帧速率或输入延迟)。代理使用 长时间任务 API,该 API 仅在基于 Chromium 的浏览器(Chrome >58,Edge >79,Opera >69)中可用。作为所有托管事务的
Longtask
跨度捕获。了解有关 长时间任务跨度 的更多信息以及如何解释它们。 -
用户计时
- 用户计时规范为开发人员公开了 API,以便将自定义性能条目添加到其 Web 应用程序中。这些自定义指标允许用户测量应用程序代码的热点路径,这有助于识别良好的用户体验。RUM 代理通过其在所有托管事务的瀑布图中的度量名称将所有 performance.measure 调用记录为跨度。
用户交互
编辑RUM 代理会自动检测应用程序注册的点击事件侦听器。点击事件作为 user-interaction
事务捕获。但是,为了避免向服务器发送过多的 user-interaction
事务,代理会丢弃没有跨度的交易(例如,没有网络活动)。此外,如果点击交互导致路由更改,则会改为捕获 route-change
事务。
事务名称可以通过使用 name
或最好是 data-transaction-name
HTML 属性来影响。基于存在的 html 属性的事务名称示例
-
<button></button>
:Click - button
-
<button name="purchase"></button>
:Click - button["purchase"]
-
<button data-transaction-name="purchase"></button>
:Click - purchase
单页应用程序
编辑所有历史记录 pushState
事件都将作为事务捕获。大多数这些事务都可以通过使用特定于框架的集成来增强。对于所有不受支持的框架/库,您可以通过使用 自定义事务 和 跨度 API 创建自定义跨度来检测应用程序。
框架
编辑代理支持 与某些框架的集成。
要检测自定义指标,例如 React、Angular、Vue 等框架上组件的渲染时间或挂载时间,请使用 自定义事务 API。
核心 RUM 代理支持基于多页 (MPA) 和单页架构 (SPA) 的网站。核心 RUM 代理可以单独用于 SPA 站点,但我们建议使用特定于框架的集成,原因如下:
-
页面按路由更好地分组:这会导致
transaction.name
字段映射到 SPA 应用程序中声明的实际应用程序路由路径。 - 精确的 SPA 导航渲染:集成包会挂接到组件生命周期并正确测量 SPA 事务的持续时间。核心 RUM 代理无法确定何时渲染 SPA 导航,而是会在考虑 SPA 过渡完成之前等待最后一个网络请求。
- 改进的错误捕获:例如,当在 Angular 应用程序中抛出错误时,框架集成会自动捕获它。但是,核心 RUM 代理无法捕获错误,因为默认错误处理程序不会将错误重新抛出为浏览器事件。
平台
编辑支持以下平台