Skip to content

Frontend Performance Monitoring

Frontend Performance Monitoring is the practice of using browser-native interfaces to measure and analyze the speed and responsiveness of web applications^[600-developer__tools__front-end-performance-monitoring.md]. The core of this practice relies on the window.performance API^[600-developer__tools__front-end-performance-monitoring.md].

Core API

The window.performance object provides access to three primary components for retrieving performance data^[600-developer__tools__front-end-performance-monitoring.md]:

  • window.performance.memory: Accesses memory usage information.
  • window.performance.navigation: Provides navigation state details, such as the type of navigation performed.
  • window.performance.timing: Returns a PerformanceTiming object containing timestamps for various navigation and page load events.

Implementation Workflow

To ensure accuracy, performance Metrics should be collected after the page is fully loaded^[600-developer__tools__front-end-performance-monitoring.md]. The standard approach is to execute data collection logic within the window.onload event, as many timing values cannot be calculated until page load is complete^[600-developer__tools__front-end-performance-monitoring.md].

Once collected, the data is typically structured into JSON format^[600-developer__tools__front-end-performance-monitoring.md]. This data can be sent directly to an analytics engine like Elasticsearch, or routed through a middleware layer for processing and visualization in tools like Kibana^[600-developer__tools__front-end-performance-monitoring.md].

Key Metrics

Specific performance indicators are derived by calculating the differences between timestamps provided by the PerformanceTiming interface^[600-developer__tools__front-end-performance-monitoring.md].

Network and Connection

  • DNS Query Time: Calculated as domainLookupEnd - domainLookupStart^[600-developer__tools__front-end-performance-monitoring.md].
  • TCP Connection Time: Calculated as connectEnd - connectStart^[600-developer__tools__front-end-performance-monitoring.md].
  • Request Response Time: Calculated as responseEnd - responseStart^[600-developer__tools__front-end-performance-monitoring.md].
  • Redirect Count: Accessible via navigation.redirectCount^[600-developer__tools__front-end-performance-monitoring.md].
  • Redirect Duration: Calculated as redirectEnd - redirectStart^[600-developer__tools__front-end-performance-monitoring.md].

DOM and Rendering

  • White Screen Time: The duration until the first paint, calculated as domLoading - fetchStart^[600-developer__tools__front-end-performance-monitoring.md].
  • DOM Ready Time: Calculated as domContentLoadedEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md].
  • DOM Parsing Time: Calculated as domComplete - domInteractive^[600-developer__tools__front-end-performance-monitoring.md].
  • Onload Time: Calculated as loadEventEnd - fetchStart^[600-developer__tools__front-end-performance-monitoring.md].

User Experience Phases

  • Time to Interactive: Calculated as domInteractive - navigationStart^[600-developer__tools__front-end-performance-monitoring.md].
  • Total Load Time: The total duration from the start of navigation to the completion of the load event^[600-developer__tools__front-end-performance-monitoring.md].
  • [[W3C Resource Timing]]
  • [[Chrome DevTools]]

Sources

^[600-developer__tools__front-end-performance-monitoring.md]