It is much difficult to locate the problem of slow page loading. To solve this problem, the slow session tracing function in browser monitoring of Application Real-Time Monitoring Service (ARMS) provides a performance waterfall chart for static resource loading on pages, which allows you to check the resource loading status on the pages and identify the root cause of the problem.

Problem description

Slow page loading is one of the common concerns for users. You may encounter the following difficulties when locating and solving such problems:

  • Difficult to recur

    For example, when user A accesses a page, the page is loaded on user A's local browser. As the page loading duration is affected by factors such as the region, network, browser, or carrier, the actual situation when user A accesses the page cannot recur.

  • Lacking monitoring information for deep investigation

    Most browser monitoring services use the PerformanceTiming object to obtain the full page loading time, which does not include the static resource loading information. As a result, the performance bottleneck cannot be located.

Solution

You only need to connect the web application to ARMS browser monitoring, enable the page resource reporting function, and use the slow session tracing function of ARMS browser monitoring to quickly locate the performance bottleneck.

Step 1: Connect to ARMS browser monitoring

The ARMS browser monitoring SDK does not report static resource loading information by default. However, the static resource loading information is required for quickly locating the slow page loading problem with the slow session tracing function.

In this case, connect your web application to ARMS browser monitoring. For more information, see Install the ARMS agent through CDN.
Notice When connecting the web application to ARMS browser monitoring, select Enable Page Resources Reporting.

Step 2: Locate the fault

You can locate the fault by using either of the following two methods.

Method 1: Check the access speed

  1. Log on to the ARMS console. In the left-side navigation pane, choose Browser Monitoring.

  2. On the Browser Monitoring page, click the name of your application.

  3. In the left-side navigation pane, choose Page Speed.

    For more information on the Page Speed page, see Page speed. In this example, the page performance is poor. The full loading time of the page reaches 36.7s at about 11:00.

  4. On the Page Speed page, drag the right-side scroll bar to display the Slow Page Session Trace (TOP20) section. This section lists top 20 sessions with the lowest page loading speed within the specified time range.

    In this example, the page loading time at 11:36:46 is 36.72s, which is the cause of the sharp increase of the page loading time.

  5. In the Slow Page Session Trace (TOP20) section, click the target page name in the Page column to access the Session Details page. Then, determine the cause and troubleshoot the fault according to the information on the Session Details page.

    On the top of the Session Details page, the Page Information section displays the access information such as the client IP address, browser, and operating system, helping you further identify the cause of the fault.

    On the Session Details page, the Page Resource Loading Waterfall section displays the waterfall chart of static resource loading on the page, helping you quickly locate the performance bottleneck.

    For more information on the Session Traces page, see Slow session tracing.

Method 2: Trace the session

  1. Log on to the ARMS console. In the left-side navigation pane, choose Browser Monitoring.

  2. On the Browser Monitoring page, click the name of your application.

  3. In the left-side navigation pane, choose Session Traces to access the Session List page.

    The Session List page displays the top 100 sessions of the application by loading duration. You can filter sessions by page, session ID, browser, and browser version to quickly identify time-consuming sessions.

  4. On the Session List page, find the target session and click Details in the Actions column. Then, determine the cause and troubleshoot the fault according to the information on the Session Details page.

    For more information on the Session Traces page, see Slow session tracing.

Up to now, you have completed troubleshooting with the slow session tracing function. This function can help you recur the page resource loading status and quickly locate the performance bottleneck.

More operations

To avoid passive diagnosis after an exception occurs, you can also use the alert function of ARMS to create an alert for one or all APIs. This ensures that the O&M team immediately gets a notification after an exception occurs.

To create an alert, see Quickly create ARMS alerts.

More information