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

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

说明 您可以手动上报自定义的性能指标,例如自定义首次渲染时间、首次可交互时间或其他性能指标。具体操作,请参考API参考

功能入口

  1. 登录ARMS控制台,在左侧导航栏选择前端监控 > 前端列表
  2. 前端列表页面顶部选择目标地域,然后单击目标应用名称。
  3. 在左侧导航栏选择应用 > 访问速度
在访问速度页面左侧的页面访问速度排行区域,可按页面首次渲染时间指标排序和访问量指标排序,单击上箭头或下箭头可改变排序顺序。
Page Speed

页面加载时间详情

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

页面加载瀑布图

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

Page Load Waterfall Plot

性能分布

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

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

图 1. 性能分层
Performance View

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

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

慢页面会话追踪

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

Slow Page Session Trace

页面加载分布情况

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

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

性能指标含义

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