诊断网页加载过慢的问题

定位、排查网页加载过慢问题的原因有诸多难点。针对这类问题,ARMS前端监控的慢会话追踪功能提供页面静态资源加载的性能瀑布图,可深入定位页面资源加载情况,全方位地诊断故障根源,从而快速排除故障。

问题描述

网页加载较慢是经常出现且前端非常关注的问题之一。定位、排查解决这类问题的难点如下:

  • 复现困难

    假设您的一位用户是A,当A访问某网页时,该页面会加载在A本地的浏览器上。由于页面的加载耗时受地域、网络情况、浏览器或者运营商等因素影响,排查问题时无法复现A在访问页面时的具体情况。

  • 监控信息缺少,无法深入排查

    大部分前端监控会通过PerformanceTiming对象来获取完整的页面加载耗时信息,这将缺失页面静态资源的加载情况,导致无法深入定位性能瓶颈。

解决方案

只需将Web端应用接入ARMS前端监控,并且在接入时开启页面资源上报功能,然后利用ARMS前端监控的慢会话追踪功能,即可帮助您快速定位性能瓶颈。

步骤一:接入ARMS前端监控

ARMS前端监控SDK默认不上报页面加载的静态资源信息。若使用慢会话追踪功能对慢页面加载问题快速定位,则需获取页面加载的静态资源信息。

将您的Web端应用接入ARMS前端监控,请参见Web页面安装探针

重要

在接入时选中开启页面资源上报项,才能使用慢会话追踪功能。

步骤二:定位故障

您可以通过两种不同入口的方式来定位故障,两种方式均能达到使用慢会话追踪功能诊断网页性能问题的目的。

方式一:从访问速度开始排查

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

    访问速度页面的详情介绍,请参见页面访问速度。在本示例中,该页面性能较差,在11:00时的页面完全加载时间达到36.7 s。

    页面加载时间详情

  4. 访问速度页面上,拖动右侧的滚动条至慢页面会话追踪(TOP20)区域。

    该区域会列出该页面在指定时间段内加载最慢的20个会话。

    在本示例中,您可以看到在11:36:46的页面加载时间为36.72 s,可以判断这次访问是导致页面加载时间骤增的原因。

    慢页面会话追踪(TOP20)

  5. 慢页面会话追踪(TOP20)区域的页面列中单击目标页面名称。

    进入慢加载详情页面。

  6. 根据慢加载详情页面的信息定位故障原因,进而排除故障。

    慢加载详情页面顶部的页面信息区域展示了本次访问的客户端IP地址、浏览器、操作系统等信息,帮助您确认故障原因。

    慢加载详情

    慢加载详情页面的页面资源加载瀑布图区域展示了页面静态资源加载的瀑布图,帮助您快速定位资源加载的性能瓶颈。

    页面资源加载瀑布图

    慢加载详情页面的详细信息,请参见慢会话追踪

方式二:从会话追踪开始排查

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

    会话列表区域展示了该应用下的所有会话,您可以按照用户名、用户ID、会话ID等条件进行过滤,快速发现耗时较长的会话信息。

  4. 会话列表区域,单击目标会话名称。然后根据会话追踪详情页面的信息定位故障原因,进而排除故障。

    会话追踪页面的详细信息,请参见慢会话追踪

操作至此,已使用慢会话追踪功能完成问题排查,该功能可以帮助您复现用户在访问页面时的页面资源加载情况,快速定位性能瓶颈问题。

相关操作

为避免在出现问题后被动诊断错误原因,您还可以使用ARMS的报警功能针对一个接口或全部接口创建报警,即可在出现问题的第一时间向运维团队发送通知。

创建报警操作步骤,请参见前端监控告警规则(新版)

更多信息