Application Real-Time Monitoring Service:Diagnose slow page loads

Diagnose slow page loads

The following example shows how to troubleshoot a slow page load:

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

2. On the Browser Monitoring page, select a region in the top navigation bar and click the name of the application that you want to manage.

3. In the left-side navigation pane, choose Application > Access speed.
4. Analyze the key performance metrics in the Page Load Time Details and Waterfall Chart of Page Loading sections to identify any anomalies.

   Figure 1. Page load time details

   Figure 2. Page load waterfall plot

   • Page load detailsWaterfall Chart of Page LoadingIf the in the section is high, or if the DNS lookup, TCP connection, or SSL connection times in the section are high, the slow page load is likely caused by a network issue. You need to investigate your network.
   • Page load detailsWaterfall Chart of Page LoadingIf the time in the section is high, or if the request response and content transfer times in the section are high, the slow page load is likely caused by a slow API request. To investigate further, proceed to Step 5.
   • Page load detailsWaterfall Chart of Page LoadingIf the in the section is high, or if the DOM parsing and resource loading times in the section are high, the slow page load is likely caused by slow frontend resource loading. To investigate further, proceed to Step 6.
5. Diagnose slow API requests. In the left-side navigation pane, choose Application > API details.
   1. On the API Requests tab, find the target API and click Analyze in the Actions column.
   2. On the API details tab, click View Trace in the upper-right corner of the Request Details section to view the overall time spent in the frontend and the backend application's trace.
      In the table on the Trace tab, a span with a Call Type of Frontend represents the overall time, and a span with a Call Type of HTTP Entry represents the backend application processing time. The Timeline column provides a bar chart that visualizes the duration of each span.

      • If the backend application processing time is short but the overall time is long, this indicates a long network transfer time for the API request. In this case, on the API details page, click View Session in the upper-right corner of the Request Details section to view session information, such as the network type, region, browser, device, and operating system.
      • If the backend application processing time is long, this indicates a performance issue in the backend service. In this case, click the magnifier icon in the Method Stack column. Then, in the Method Stack dialog box, you can view the call stack to identify the bottleneck in the backend trace.
6. Diagnose slow frontend resources. In the left-side navigation pane, choose Application > Access speed.
7. On the Access speed page, in the Slow Page Session Traces (Top 20) section, click the page name for a slow session.
   This section lists slow sessions in a table. The table includes the Page, Session ID, Browser, Fully loaded time (in ms), and Start time columns. You can use the load time to identify the target slow session.
   On the Session Tracing page, in the Page Resource Loading Waterfall section, you can view the details of the resources that caused the slow page load.

More information

• Page Speed: Learn about page load metrics and how ARMS measures them.
• Diagnose JS errors with ARMS Browser Monitoring: Learn how to troubleshoot JavaScript errors by using Browser Monitoring.