This topic describes the page loading speed detection and analysis features in frontend monitoring of Application Real-Time Monitoring Service (ARMS).

After your application is connected to the ARMS frontend monitoring feature, you can view the following performance data of the application on the Page Speed page:

Note You can manually report custom performance metrics, such as the first paint time and time to interact. For more information, see API reference.

Go to the Page Speed page

  1. Log on to the ARMS console .
  2. In the left-side navigation pane, click Browser Monitoring. On the Browser Monitoring page, click the name of the application that you want to view.
  3. In the left-side navigation pane, choose Application > Page Speed.
In the Page Speed section, you can rank the pages by first paint time or page views (PVs), and change the display order by clicking the upward or downward arrow.
Page Speed

Details of the page loading time

Page Load Time Details
  • In the Page Load Time Details section, the data in the curve chart is displayed based on the average values of the metrics within the specified time range. The average value reflects the average performance over a period of time. However, this value is sensitive to extreme values and large fluctuations. For example, if the overall page loading speed is slow due to weak network connection during an access request, the average response time is long. You can click the Filter icon in the upper-right corner to remove extreme values. This way, the impact of extreme values on the overall performance trend is avoided.
  • If the data in the curve chart increases sharply, you can use the Performance Sample Distribution and Slow Page Session Trace(TOP20) sections to identify the issue.

Waterfall chart of page loading data

In the Page Load Waterfall Plot section, the waterfall chart shows the response time in each stage based on the page loading order. Each type of data in the figure is the average value of a specified metric within a specified time range. To optimize performance, we recommend that you implement the related countermeasures on specific stages.

Page Load Waterfall Plot

Page performance distribution

The Performance Distribution section shows the distribution of the page performance.

On the Performance Stacked Area Chart tab, a stack line chart is displayed. This chart uses time as the horizontal axis. You can view the distribution of performance metrics at different points in time.

Figure 1. Performance Stacked Area Chart tab
Performance View

On the Performance Sample Distribution tab, you can view the sample proportion of the page loading time in the specified time range. For example, you can view the number of pages that can be opened within 1 second and the proportion of samples of long-tail users.

Figure 2. Performance Sample Distribution tab
Performance Sample Distribution

Traces of slow page sessions

The Slow Page Session Trace(TOP20) section provides a performance waterfall chart of static resource loading during the page loading process. In this section, you can view the status of page resource loading based on page performance data. This allows you to identify and handle performance bottlenecks at the earliest opportunity. For more information, see Session tracing.

Slow Page Session Trace

Page loading distribution

A page is loaded on the browser of a user. The loading time is determined by specific factors. These factors include the geographical location, network condition, browser, and carrier. Therefore, the frontend monitoring feature provides the statistics on geographical distribution, terminal distribution, network distribution, and version distribution. This allows you to identify performance bottlenecks.

Figure 3. Terminal View section
Device View
Figure 4. Network View section
Network View
Figure 5. Version View section
Version View

Description of performance metrics

Table 1. Key performance metrics of web pages
Reported field Description Formula Remarks
FMP The First Meaningful Paint (FMP). For more information, see Technical solution of FMP. None
FPT The FPT. responseEnd - fetchStart This field indicates the duration from the point in time when a request is initiated to the point in time when the browser begins to parse the bytes of the first batch of HTML documents.
TTI The time to interact (TTI). domInteractive - fetchStart This field indicates the point in time when the browser starts to load resources after it resolves all HTML documents and constructs the document object model (DOM).
Ready The time consumed to complete HTML loading, which is the time consumed to construct the DOM. domContentLoadEventEnd - fetchStart If a JS script is synchronously executed on the page, the execution time of the JS script can be calculated based on the following formula: Execution time of the JS script = Ready - TTI.
Load The time consumed to completely load the page. loadEventStart - fetchStart This field can be calculated based on the following formula: Load = FPT + DOM + (Ready - TTI) + Res.
FirstByte Time to first packet responseStart - domainLookupStart None
Table 2. Fields that describe the time consumed in each phase
Reported field Description Formula Remarks
DNS The time consumed for Domain Name System (DNS) query. domainLookupEnd - domainLookupStart None
TCP The time consumed for Transmission Control Protocol (TCP) connection. connectEnd - connectStart None
TTFB The time to first byte (TTFB), which indicates the time consumed to respond to a request. responseStart - requestStart TTFB can be calculated in different ways. For more information about how TTFB is calculated in ARMS, see Google development definition.
Trans The time consumed for data transmission. responseEnd - responseStart None
DOM The time consumed for DOM resolution. domInteractive - responseEnd None
Res The time consumed for resource loading. loadEventStart - domContentLoadedEventEnd This field indicates the time consumed to synchronously load resources on the page.
SSL The time consumed for Secure Sockets Layer (SSL) connection. connectEnd - secureConnectionStart This field is valid only when HTTPS is used to transmit data.