Browser Monitoring
In this section, we will look at Browser Monitoring and options available to track application performance. AppDynamics offers two products to monitor browser applications:
• Browser Real User Monitoring (Browser RUM): Monitors how your web application is performing, using real user data to analyze application performance and user experience
• Browser Synthetic Monitoring: Analyzes application availability and performance, using scheduled testing to analyze website availability
Overview of the Controller UI for Browser Monitoring
Browser RUM and Browser Synthetic Monitoring share two dashboards: Browser App Dashboard and Resource Performance Dashboard. Figure 4-18 shows an example of Browser Monitoring.
Figure 4-18 Browser Monitoring
Browser App Dashboard
The Browser App Dashboard provides a high-level understanding of your application’s overall performance. When you first navigate to a browser application, you are defaulted to the Browser App Dashboard’s Overview tab. The Overview tab contains widgets for both browser and synthetic data.
Overview Tab
The Overview tab displays a set of configurable widgets. The default widgets contain multiple graphs and lists featuring common high-level indicators of application performance. Figure 4-19 shows an example of a Browser Application Dashboard.
Figure 4-19 Browser Application Dashboard
Geo Tab
The Geo tab displays key performance metrics by geographic location based on page loads. If you are using Browser Synthetic Monitoring for an application, you can view either “real user” or “synthetic” data using the View drop-down.
The metrics displayed throughout the dashboard are for the region currently selected on the map or in the grid. For example, on the map, if you click France, the widgets and trend graphs update to display data for France. Figure 4-20 shows an example of a Geo Dashboard.
Figure 4-20 Geo Dashboard
Resource Performance Dashboard
The Resource Performance Dashboard provides a high-level understanding of how your resources affect the performance of your browser application. You can use this dashboard to pinpoint resource-related performance issues affecting the user experience, such as the following:
• A prioritized list of resource performance issues generated by comparing their performance against thresholds.
• Changes in the number of resources.
• Large resources (images, JavaScript, CSS, and so on).
• Size increase of resources impacting performance. For example, a page banner might be replaced with an uncompressed image, thus slowing down the page load.
• Slow CDNs.
• Resources that haven’t been compressed.
• Comparison of real user and synthetic resource performance.
Overview of the Resource Performance Dashboard UI
Once you navigate to a browser application, the Resource Performance Dashboard is located on the left-side panel. Figure 4-21 shows the Resource Performance Dashboard.
Figure 4-21 Resource Performance Dashboard
Overview Tab
The Overview tab displays widgets providing high-level indicators of resource performance over a specified time period. The dashboard can be filtered to real user or synthetic data. The widgets only show a small number of resources, but you can click See More to view up to 100 resources per widget. Figure 4-22 shows Overview under Resource Performance.
Figure 4-22 Overview tab
Violations Tab
The Violations tab shows a list of pages, resource types, and domain or resource violations that have exceeded performance thresholds. You can use the Violations tab not to only find problematic resources but also to become aware of sudden changes that negatively impacted the performance of a resource. Clicking a specific violation leads to the Resources tab, and the data is filtered with that violation for further diagnostics. The configured violation rules are evaluated every 10 minutes for the last 30 minutes. Figure 4-23 shows Violations under Resource Performance.
Figure 4-23 Violations tab
The supported violation types include the following:
• Median Domain Load Time
• Average Domain Size
• Average Page Size
• Median Resource Load Time
• Average Resource Size
• Median Resource Type Load Time
• Average Resource Type Size
Resources Tab
You can use the Resources tab to diagnose a problematic resource. You can also add criteria as a filter to the widgets. All use cases to troubleshoot a resource lead to the Resources tab, where you can learn more about an individual resource’s impact on an application. Figure 4-24 illustrates Resource under Resource Performance.
Figure 4-24 Resources tab
Additional Resource Performance Data Information
For the Resource Performance Dashboard to be effective, it is highly recommended that you set the Timing-Allow-Origin HTTP header in all of your CORS (Cross-Origin Resource Sharing) domains to enable access to resource timing information. Without this header, the JavaScript Agent cannot capture the resource size, and, of the supported Resource Timing Metrics, only the resource load time can be calculated.
