Skip to content

Performance testing tools

Performance testing tools are software applications and interfaces used to evaluate the speed, responsiveness, and stability of a system under a workload^[600-developer__tools__front-end-performance-monitoring.md]. They allow developers and engineers to measure various Metrics, identify bottlenecks, and verify optimization efforts^[600-developer__tools__front-end-performance-monitoring.md].

In web development, these tools can range from external online services to built-in browser APIs that provide granular data on network latency and rendering times^[600-developer__tools__front-end-performance-monitoring.md].

Web and Browser Tools

A variety of third-party services and browser-native features are available for assessing web performance:

  • Google PageSpeed Insights: An online tool that analyzes a webpage's content and provides suggestions for speed improvements^[600-developer__tools__front-end-performance-monitoring.md].
  • GTmetrix: a web-based utility used to test and monitor the performance of a website^[600-developer__tools__front-end-performance-monitoring.md].
  • Chrome DevTools: A set of web developer tools built directly into the Google Chrome browser, essential for debugging and profiling page load performance^[600-developer__tools__front-end-performance-monitoring.md].

The window.performance interface is a native browser API that provides access to performance-related information for the current page^[600-developer__tools__front-end-performance-monitoring.md]. It relies on the W3C Navigation Timing specification to measure the latency of page loading events^[600-developer__tools__front-end-performance-monitoring.md].

By utilizing the window.performance.timing attribute, developers can calculate specific performance Metrics based on the timestamps of key lifecycle events^[600-developer__tools__front-end-performance-monitoring.md].

Key Metrics

The following calculations are commonly used to assess different stages of the page load lifecycle^[600-developer__tools__front-end-performance-monitoring.md]:

  • DNS Query Time: domainLookupEnd - domainLookupStart
  • TCP Connection Time: connectEnd - connectStart
  • Request Time: responseEnd - responseStart
  • DOM Tree Processing: domComplete - domInteractive
  • White Screen Time: domloading - fetchStart
  • DOM Ready Time: domContentLoadedEventEnd - fetchStart
  • Onload Time: loadEventEnd - fetchStart

Analysis Workflow

To effectively use these Metrics, data collection must occur after the page has fully loaded^[600-developer__tools__front-end-performance-monitoring.md]. The standard practice is to trigger the data reading logic within the window.onload event^[600-developer__tools__front-end-performance-monitoring.md].

This approach ensures that all timestamp values—particularly those related to the final rendering states—are available for accurate calculation^[600-developer__tools__front-end-performance-monitoring.md].

  • [[W3C Resource Timing]]
  • [[Chrome DevTools]]
  • [[Web Performance Optimization]]

Sources

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