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 performance().

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
Note
  • 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. Geographical View section
Geo View
Figure 4. Terminal View section
Device View
Figure 5. Network View section
Network View
Figure 6. Version View section
Version View

Description of performance metrics

Table 1. Key performance metrics of web pages
Reported field Description Calculation method Remarks
First Meaningful Paint (FMP) The First Meaningful Paint. For more information, visit Technical solution of FMP. None
fpt The FPT. responseEnd - fetchStart This field indicates the duration from the time when a request is initiated to the 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 time when the browser starts to load resources after it resolves all HTML documents and constructs the DOM.
ready The time it takes to complete HTML loading, which is the time it takes to construct the DOM. domContentLoadEventEnd - fetchStart If a JavaScript (JS) script is executed synchronously 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 it takes to completely load the page. loadEventStart - fetchStart This field can be calculated based on the following formula: load = fpt + dom + (ready - tti) + res.
firstbyte The time it takes to generate the first response packet. responseStart - domainLookupStart None
Table 2. Fields that describe the amount of time consumed in each phase
Reported field Description Calculation method Remarks
dns The amount of time consumed for DNS query. domainLookupEnd - domainLookupStart None
tcp The amount of time consumed for TCP connection. connectEnd - connectStart None
ttfb The time to first byte (TTFB), which indicates the amount of time it takes to respond to a request. responseStart - requestStart TTFB can be calculated in multiple ways. For more information about how TTFB is calculated in ARMS, visit Google development definition.
trans The amount of time consumed for data transmission. responseEnd - responseStart None
dom The amount of time consumed for document object model (DOM) resolution. domInteractive - responseEnd None
res The amount of time consumed for resource loading. loadEventStart - domContentLoadedEventEnd This field indicates the amount of time consumed for synchronously loading resources on the page.
ssl The amount of time consumed for SSL connection. connectEnd - secureConnectionStart This field is valid only when HTTPS is used to transmit data.