本文介绍ARMS前端监控的访问速度页面所包含的功能。

将应用成功接入ARMS前端监控后,您可以在访问速度页面上查看应用的以下性能数据:

说明 您可以手动上报自定义的性能指标,例如自定义首屏时间、首次可交互时间或其他性能指标,详细操作请参考performance()
左侧的页面访问速度排行,可按页面首次渲染时间指标排序和访问量指标排序,单击上箭头或下箭头可改变排序顺序。
Page Speed

页面加载时间详情

此模块展示以下指标。

Page Load Time Details
说明
  • 折线图中数据是按照指定时间段内该指标数据的平均值展示的。平均值可以体现一段时间内性能的均值情况,但容易受到极值的影响,例如某次用户访问网络很差,导致整体页面加载非常慢,就会直接拉高平均值的数据。您可以单击右上角的Filter图标,使用去极值功能去除极值,避免极值影响性能的整体趋势。
  • 如果折线图中数据骤增,您可以通过性能样本分布、慢页面会话追踪模块定位问题。

页面加载瀑布图

此瀑布图按照页面加载的顺序,直观地展示了各阶段的耗时情况。图中的数据是指定时间段内指定指标的平均值数据。如需优化性能,可结合具体阶段采取针对性的方法。

Page Load Waterfall Plot

性能分布

此模块非常直观地展示了页面性能分布情况。

性能分层页签上,您可以看到以时间为横轴的堆积折线图,了解各时间点上的性能分布情况。

图 1. 性能分层
Performance View

性能样本分布上,您可以看到页面加载时间在指定时间区间内的样本占比。例如,有多少比例的页面能够在1秒内打开,或者长尾访问用户的样本占比。

图 2. 性能样本分布
Performance Sample Distribution

慢页面会话追踪

慢会话追踪功能可提供页面加载过程中静态资源加载的性能瀑布图,帮助您根据页面性能数据详细了解页面资源加载情况,并快速定位性能瓶颈。详情请参见会话追踪

Slow Page Session Trace

页面加载分布情况

页面的加载是在用户端的浏览器上进行的,加载耗时与地理位置、网络状况、浏览器或运营商等因素有关,所以我们提供地理分布、终端分布、网络分布、版本分布等统计数据,以帮助您更好地定位性能瓶颈。

图 3. 地理分布
Geo View
图 4. 终端分布
Device View
图 5. 网络分布
Network View
图 6. 版本分布
Version View

性能指标含义

表 1. Web端关键性能指标
上报字段 描述 计算公式 备注
First Meaningful Paint (FMP) 首屏时间 参见FMP技术实现方案
fpt First Paint Time,首次渲染时间(白屏时间)。 responseEnd - fetchStart 从请求开始到浏览器开始解析第一批HTML文档字节的时间差。
tti Time to Interact,首次可交互时间。 domInteractive - fetchStart 浏览器完成所有HTML解析并且完成DOM构建,此时浏览器开始加载资源。
ready HTML加载完成时间, 即DOM Ready时间。 domContentLoadEventEnd - fetchStart 如果页面有同步执行的JS,则同步JS执行时间=ready-tti。
load 页面完全加载时间 loadEventStart - fetchStart load=首次渲染时间+DOM解析耗时+同步JS执行+资源加载耗时。
firstbyte 首包时间 responseStart - domainLookupStart
表 2. 区间段耗时字段含义
上报字段 描述 计算公式 备注
dns DNS查询耗时 domainLookupEnd - domainLookupStart
tcp TCP连接耗时 connectEnd - connectStart
ttfb Time to First Byte(TTFB),请求响应耗时。 responseStart - requestStart TTFB有多种计算方式,ARMS采用的标准参见Google Development定义
trans 内容传输耗时 responseEnd - responseStart
dom DOM解析耗时 domInteractive - responseEnd
res 资源加载耗时 loadEventStart - domContentLoadedEventEnd 表示页面中的同步加载资源
ssl SSL安全连接耗时 connectEnd - secureConnectionStart 只在HTTPS下有效