Page Performance Monitoring
This document describes EMAS page performance monitoring. It explains how to analyze key performance metrics for user perception and operational performance. You can use this analysis to optimize page performance and improve the user experience.
Overview
H5 page performance is essential for improving the user experience in browsers. It includes page loading speed, rendering efficiency, and interaction smoothness. Page performance monitoring helps developers and development and operations engineers observe and quickly identify performance bottlenecks. This monitoring also improves the user experience, reduces user churn, and optimizes overall website performance.
The EMAS performance monitoring plugin provides a comprehensive solution for Web/H5 page loading performance analysis. It is suitable for various architectures, such as single-page applications (SPAs) and multi-page applications (MPAs). The tool supports monitoring page rendering and interactivity from a user perception perspective. It also provides in-depth analysis from an operational performance perspective for development and operations.
Scenarios
Handling user feedback: When users report that a page opens or loads slowly, developers can use the performance monitoring tool to analyze the page's rendering speed and loading process to find the problem.
Continuous performance optimization: Development and operations engineers can use the tool to continuously optimize page quality. They can assess and track changes in key performance metrics, such as page rendering, layout shift, and interaction response.
Preparations
Before you can use the page performance monitoring feature, you must integrate the EMAS APM SDK. For more information, see SDK Integration.
You have enabled data reporting for the page performance module. For more information, see Reporting Configuration.
You can configure a page performance threshold baseline based on your business attributes. For more information, see Threshold configuration.
Features
User Perception
This section displays various metrics about the end-user experience under the specified filter conditions. These metrics include page rendering, layout shift, and interaction response.
For the definitions and collection methods of the following metrics, see Metric Definitions.
Operational Performance
This section shows the time consumption trends for each stage of the page loading process, which are important for development and operations. These stages include DNS lookup time, TCP connection time, and HTML request, response, and transfer time. The time consumed in these stages comes from Operational Performance Metrics.
You can switch between percentile values, including the 50th, 75th, and 90th percentiles, and the average value.
A percentile is a value below which a given percentage of observations in a group of observations falls.
For example, a page is accessed 100 times with a 100% sample rate. A total of 100 page performance records are reported. Each record contains the DNS lookup time. EMAS APM sorts these 100 records by DNS lookup time in ascending order (from best to worst). The 50th value in the sorted data is the 50th percentile value. The 75th value is the 75th percentile value.
For operational performance metrics, time consumption is sorted in ascending order. Therefore, the 50th percentile is less than or equal to the 75th percentile, which is less than or equal to the 90th percentile.
The 75th percentile is generally a good threshold for measuring the experience of most users. If your business has specific needs, you can switch to other percentiles as your measurement standard.
Page List
This section lists all Web/H5 pages in your application. It shows page views (PV), unique visitors (UV), and user perception metrics for each page. This information helps you assess the impact of performance issues and prioritize optimizations by combining data from the performance dashboard with page view counts.
Sorting: You can sort by metrics. By default, pages are sorted by PV in descending order.
View details: You can click a page URL to go to the performance details analysis page for that page.
If no relevant metrics are reported, a hyphen (-) is displayed. This can happen if the sample rate is too low or if no data is reported for other reasons. You can set the sample rate to 100% at first. After you observe stable data, go to Reporting Configuration > Page Performance to adjust the sample rate based on your business and cost needs.
Page Performance Details
The Page Performance Details page lets you perform a detailed drill-down analysis of a specific page. It provides a summary of basic metrics, trend graphs for user perception and operational performance, and detailed information for each report submitted by the client.
Basic information
Trend graph analysis
This section provides page-level trend analysis for user perception and operational performance. You can switch between percentile values to observe the distribution of user experiences.
Details
This section shows all instances of performance information reported by clients for a single page. The instances are listed on the left, sorted by the time of occurrence. You can click an instance to view its detailed reported fields on the right.
Basic information
Basic information shows the basic device information for each performance metric. For more information, see Basic Information.
Current options
Current options show the detailed information for each performance metric.
Parameter |
Description |
Country/Region |
The geographical location of the device, estimated from the IP address. |
Province |
The province where the device is located. |
City |
The city where the device is located. |
Device Model |
The model identifier of the device. |
User IP |
The public IP address of the device. |
Resolution |
The resolution of the device. |
JS SDK Version |
The version number of the SDK used. |
Optimization tips
1. Identify and optimize key performance metrics
Page performance monitoring metrics provide clear guidance for developers to identify and optimize performance bottlenecks. Here are some suggestions for optimizing performance based on monitoring data.
Analyze operational performance:
DNS seek time: A long DNS seek time may indicate that you need to optimize your DNS settings.
TCP connection time: If the TCP connection time is long, there may be network latency or a need to optimize the server configuration.
TLS handshake time: A long TLS handshake indicates that the SSL configuration may need optimization.
Request and response time: Long request and response times might mean server performance issues or that you need to reduce resource sizes.
Optimize the user perception experience:
First Contentful Paint (FCP): A long FCP may mean that the initial content is loading too slowly. You can optimize the initial rendering strategy and resource loading.
Largest Contentful Paint (LCP): A long LCP can reflect that the main content is loading slowly. You can improve the server response speed and optimize the resource loading order.
Cumulative Layout Shift (CLS): A high CLS value indicates an unstable page layout. You can optimize this by fixing the position of page elements and reducing dynamic content insertion.
Interaction to Next Paint (INP): A high INP value indicates a poor response to user input. You can optimize JavaScript execution speed and DOM operations to reduce unnecessary repaints.
You can analyze each metric in depth to identify and optimize the least efficient parts. This ensures a significant improvement in overall page performance. This process improves the user experience and builds a foundation for the long-term stability of your application.
2. Overall performance and fault optimization
Page performance is not just about key performance metrics. It is also closely related to JavaScript (JS) errors, resource loading, and network requests. JS errors can break page logic and harm performance. Slow loading and request responses cause slow page rendering, which directly affects the user experience. You can follow these three steps to perform a comprehensive optimization using monitoring data from other modules:
Check for errors and loading bottlenecks: You can correlate JavaScript errors, resource loading errors, and network request response times. Use the data to identify the main bottlenecks and anomalies that cause page performance issues.
Analyze the correlation between performance and errors: You can analyze the link between performance data and error logs to find the error sources that affect key performance metrics. This helps clarify the specific impact of each error on page loading speed and user experience.
Fix and optimize critical issues: You can prioritize fixing critical JavaScript errors to ensure smooth page loading and user interaction. You can also optimize resource loading strategies and request flows to reduce delays and failures.
These steps help you quickly identify and resolve page performance issues. You can reduce loading times and error rates, and improve the user's browsing experience on different devices and networks.
Additional information
Performance monitoring uses a 10% sample rate by default. You can set the sample rate to 100% at first. Later, go to Reporting Configuration > Page Performance to configure sampling rules and rates based on your business and cost requirements.
Performance monitoring for single-page applications (SPAs) has special requirements. For more information, see SPA Application Integration.