Diagnose Resource Load Issues

To diagnose performance issues on a web page, you must look at the timing of the resources your HTML and JavaScript are downloading. The Browser Timing tab in the Transaction Trace Viewer helps you visualize the resources that were downloaded in response to HTTP requests associated with a trace. Browser Timing represents data that is generated cumulatively and sequentially across a transaction trace. You can examine detailed information about your trace data. Data appears for hard pages and their resources and for resources that are associated with soft pages. (The data for a soft page itself does not appear.) The resources are gray by default, and then each phase has its own color. This waterfall representation helps you understand how different factors contribute to a transaction trace. This view works similarly to a waterfall view in the developer tools of your browser.
apmdevops106
To diagnose performance issues on a web page, you must look at the timing of the resources your HTML and JavaScript are downloading. The Browser Timing tab in the Transaction Trace Viewer helps you visualize the resources that were downloaded in response to HTTP requests associated with a trace. Browser Timing represents data that is generated cumulatively and sequentially across a transaction trace. You can examine detailed information about your trace data. Data appears for hard pages and their resources and for resources that are associated with soft pages. (The data for a soft page itself does not appear.) The resources are gray by default, and then each phase has its own color. This waterfall representation helps you understand how different factors contribute to a transaction trace. This view works similarly to a waterfall view in the developer tools of your browser.
 
Follow these steps:
 
  1. In the 
    Business Transactions
     tab, click a transaction trace of interest.
    Individual transaction components appear in a graphical stack (wedding cake).
  2. Examine the components in the graphical stack from top to bottom to understand the call sequence within a period. An abnormally long component transaction time can indicate the problem root cause.
  3. Click a component of interest.
  4. Click the 
    Browser Timing
     tab. 
  5. Examine the information that appears on the tab to diagnose resource load issues:
The Browser Timing tab consists of three parts:
  • A summary area that contains information about the component in the trace that triggered the resource download.
  • A timeline that lets you narrow the time range to focus on specific resources. The timeline range lets you view all the resources in context and narrow down the period that is displayed in the grid. You can change the range by dragging the markers at the end or dragging the entire line in the middle.
  • A grid that shows a detail row for each resource.
The grid includes the following types of rows:
  • Page Load Rows
    When the selected trace represents a hard page load, the page itself is represented in the grid. (A soft page load simply updates the existing page using JavaScript.) The last column in the grid shows the selected time range, which is divided into ten equal periods. A gray bar represents the full duration of the page load, and the colored bands represent various “phases” in the page load. The durations of the phases may not add up to the overall duration of the page load, because the overall duration includes Browser Timing duration. Browser Timing duration includes network-related timings and browser context switching. To view the timing breakdown of a trace, mouse over the phase.
    Page resource loads can have some or all of the following phases:
    • Redirect
    • AppCache
    • DNS
    • TCP
    • Request
    • Response
    • Processing
    • Load
    The Browser Agent directly reports most of the phases, but two phases are calculated as shown in the following graphic:
  • AppCache: DNS (Domain Lookup) – Fetch
  • Processing: Dom Complete – Dom Interactive
  •  Page Load Phases 
  • Resource Load Rows
    Resource phases are not displayed in the stack (wedding cake), so you cannot see the raw data of the phases. Each resource that the page downloads has a row in the Browser Timings grid. As with page load information, you can see more detail for each resource by hovering over its graphic in the grid. If you have network access to the resource URL, you can view the resource in a new tab by clicking 
    View Resource
    .
    Resource loads can have some or all of the following phases:
    • AppCache
    • DNS
    • TCP
    • Request
    • Response
    • Callback Execution Time
    Resources that the page downloads display the same way as page loads, but the phases are slightly different. The Browser Agent reports all phases except for AppCache. AppCache is calculated as DNS – Fetch. The following graphic shows resource load phases:
    Resource Load Phases
    Resource trace values might not match the timing values for the same traces in the Firefox Network tab. In addition, the Browser Timing tab does not show some resources that appear in the Network tab. The mismatched values occur for all resources because the Firefox Network tab timing value is the request start to response end, whereas the Browser Timing duration includes network-related timings and browser context switching. The resources that are missing in the Browser Timing tab are filtered out by default (not configurable). These resources include requests by the client for the profile configuration and for sending the metric responses. Browser Timing does not report page metrics for resources that are required by the Browser Agent. The total duration value might not match on all browsers because callback execution time is added to adjust the duration value.
 
Note:
 Timing may be rounded up or down by one millisecond.