W3C resource timing metrics

Most modern browsers provide performance metrics for important steps involved in loading pages, such as domain lookup (DNS), establishing connections to HTTP servers (TCP), and securing connections (SSL). The AppMon JavaScript Agent can automatically collect those metrics.

The W3C specification contains detailed information about the way browsers have to calculate those metrics. See http://caniuse.com/nav-timing for a current list of browsers supporting the API.

W3C Resource Timings

AppMon collects all W3C navigation timing metrics by default in all supported browsers by default. You can disable it, by de-selecting the Capture resource information check box, under System Profile > User Experience > tab for the required application > W3C resource timings

User Action PurePaths

Resource timing overview data is visualized in the Page Performance dashboard, while details are visible in the details of page or frame load actions in the User Action PurePaths dashlet. A waterfall visualization of the durations of different steps involved in loading a page is provided in the Timeline column, as shown in the following graphic.

See Web Performance Optimization for UEM for more information about setting up UEM to produce full waterfall charts.

Measures

The available measures are based on metrics provided by the resource timing API.

User action timings

The following measures are used to chart the duration of specific steps in the load action process.

Measure Description Definition in terms of W3C specification
DNS Time spent resolving domain names. window.performance.timing.domainLookupEnd - window.performance.timing.domainLookupStart
TCP Time spent establishing a socket connection from the browser to the web server. window.performance.timing.connectEnd - window.performance.timing.connectStart
SSL Time spent establishing a secure socket connection from the browser to the web server. window.performance.timing.connectEnd - window.performance.timing.secureConnectionStart
Redirect Time spent following HTTP redirects. window.performance.timing.redirectEnd - window.performance.timing.redirectStart
Request Time spent waiting for the first byte of the document response. window.performance.timing.responseStart - window.performance.timing.requestStart
Response Time spent downloading the document response. window.performance.timing.responseEnd - window.performance.timing.responseStart
TTFB Time at which the first byte of response from the server arrives at the client. window.performance.timing.responseStart
Network consumption Time taken to redirect, resolve the DNS, and establish the TCP connection. window.performance.timing.responseEnd - window.performance.timing.fetchStart - (window.performance.timing.responseStart - window.performance.timing.requestStart)
Server consumption Time spent receiving a request and sending the response back to the client. window.performance.timing.responseStart - window.performance.timing.requestStart
Processing time Time between DOM loading and Load event start. window.performance.timing.loadEventEnd - window.performance.timing.domLoading
App cache Time spent on checking relevant application caches. window.performance.timing.domainLookupStart - window.performance.timing.fetchStart
Frontend time Time spent in the browser on executing Javascript and rendering the page. User Action Duration - Server Consumption - Network Consumption
OnDomContentLoaded Time spent on executing OnDomContentLoaded handlers. window.performance.timing.domContentLoaded - window.performance.timing.domLoading
OnLoad Time spent on executing OnLoad handlers. window.performance.timing.loadEventEnd - window.performance.timing.loadEventStart
Callback Time spent on executing XHR callbacks. -
Visually complete Time at which all the content in the browsers visible area has been fully rendered. -
Speed index Time (in average) at which visible parts of the page are displayed. A lower Speed index means that most parts of the page are rendered very quickly. -
User action duration Time between initial user input and complete page load. Also includes load time of XHR requests initiated before loadEventEnd and load time of dynamic resources and script executions triggered by DOM modifications. -

Resource timing landmarks

The following measures chart the total time from a user clicking a link or button until the browser reaches a specific point in the resulting page loading process.

Measure Description Definition in terms of W3C specification
Request Start Time until the document request can be sent. This includes DNS, connect, SSL, and URL redirects. window.performance.requestStart - window.performance.navigationStart
Document Fetch Done In addition to everything until Request Start, this includes the time until the document (HTML) completely downloads from the HTTP server. window.performance.responseEnd - window.performance.navigationStart
Document Interactive Time until the document becomes interactive. This includes all steps completed for Document Fetch Done. window.performance.domInteractive - window.performance.navigationStart

The following example timeline illustrates the Previously described measures.

Visualization of Measures
Visualization of Measures