Application Real-Time Monitoring Service:Diagnose slow page loading by using the ARMS browser monitoring feature

Diagnose slow page loading

The following example shows the troubleshooting procedure:

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 > Page Speed.
4. In the Page Load Time Details and Page Load Waterfall Plot sections, check whether the values of key performance metrics are normal.

   

   

   • If the value of the First Paint Time parameter in the Page Load Time Details section or the values of the DNS Lookup, TCP Connection, and SSL Connection parameters in the Page Load Waterfall Plot section are large, slow page loading may be caused by the network. In this case, check the network.
   • If the value of the DOM Ready parameter in the Page Load Time Details section or the values of the Time to First Byte(TTFB) and Content Download parameters in the Page Load Waterfall Plot section are large, slow page loading may be caused by slow API requests. In this case, perform Step 4 to diagnose the issue.
   • If the value of the Fully Loaded Time parameter in the Page Load Time Details section or the values of the DOM Parsing and Resource Download parameters in the Page Load Waterfall Plot section are large, slow page loading may be caused by slow loading of frontend resources. In this case, perform Step 5 to diagnose the issue.
5. In the left-side navigation pane, choose Application > API Details.
   1. On the API Requests tab, find the API that you want to view and click Analyze in the Operation column.
      
   2. On the API Details tab, click Show Invocation Trace in the upper-right corner of the Request Details section to view the overall response time of the frontend and the call sequence diagram of the backend application.
      

      • If the processing time of the backend application is short but the overall response time is long, the time consumed from API request sending to the server to data returning to the frontend is long. In this case, click View Session in the upper-right corner of the Request Details section of the API Details tab. Then, view the access information, such as the network connection type, region, browser, device, and operating system.
      • If the backend application takes a long time to process the access request, the backend processing performance is poor. In this case, click the magnifier icon in the Details column. In the Details dialog box, check which part of backend tracing is time-consuming to locate the issue.
6. In the left-side navigation pane, choose Application > Page Speed.
7. In the Slow Page Session Trace(TOP20) section of the Page Speed page, click the page name of a slow session.
   
   In the Page Resource Loading Waterfall section of the Session Traces page, you can view the details of the resources that cause slow page loading.

References

• Page loading speed
• Diagnose JS errors by using the ARMS browser monitoring feature