页面访问速度

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

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

说明

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

功能入口

  1. 登录ARMS控制台,在左侧导航栏选择前端监控 > 前端列表
  2. 前端列表页面顶部选择目标地域,然后单击目标应用名称。
  3. 在左侧导航栏选择应用 > 访问速度

在访问速度页面左侧的页面访问速度排行区域,可按页面首次渲染时间指标排序和访问量指标排序,单击上箭头或下箭头可改变排序顺序。

Page Speed

页面加载时间详情

Page Load Time Details

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

  • 如果折线图中数据骤增,您可以通过性能样本分布、慢页面会话追踪模块定位问题。

页面加载瀑布图

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

Page Load Waterfall Plot

性能分布

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

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

Performance View

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

Performance Sample Distribution

性能趋势页签,您可以查看DNS查询、TCP连接、页面完全加载等性能指标的均值、95分位、90分位、80分位和60分位的趋势图。

image

慢页面会话追踪

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

Slow Page Session Trace

页面加载分布情况

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

性能指标含义

表 1. Web端关键性能指标

上报字段

描述

计算公式

备注

FMP(First Meaningful Paint)

首屏时间

参见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)

请求响应耗时

responseStart - requestStart

TTFB有多种计算方式,ARMS采用的标准,请参见Google Development定义

Trans

内容传输耗时

responseEnd - responseStart

DOM

DOM解析耗时

domInteractive - responseEnd

Res

资源加载耗时

loadEventStart - domContentLoadedEventEnd

表示页面中的同步加载资源。

SSL

SSL安全连接耗时

connectEnd - secureConnectionStart

只在HTTPS下有效。

相关文档

手动上报自定义的性能指标