Skip to content

Core Web Performance Metrics

Core web performance Metrics are quantitative measurements used to evaluate the loading speed, interactivity, and visual stability of a web page. These Metrics are typically calculated using the window.performance API, specifically the Navigation Timing interface, which provides a set of timestamps that mark key moments in the page loading lifecycle^[600-developer-tools-front-end-performance-monitoring.md].

Key Metrics and Calculations

To accurately assess performance, specific time differences between these timestamps are calculated^[600-developer-tools-front-end-performance-monitoring.md].

Network and Connection Metrics

  • DNS Query Time: The time taken to resolve the domain name.
    • Calculation: domainLookupEnd - domainLookupStart^[600-developer-tools-front-end-performance-monitoring.md]
  • TCP Connection Time: The time taken to establish a TCP connection with the server.
    • Calculation: connectEnd - connectStart^[600-developer-tools-front-end-performance-monitoring.md]
  • Request Time: The time taken for the server to respond to the initial request.
    • Calculation: responseEnd - responseStart^[600-developer-tools-front-end-performance-monitoring.md]

Loading and Rendering Metrics

  • White Screen Time (First Paint): The time from the start of the navigation to when the browser begins rendering the DOM.
    • Calculation: domLoading - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]
  • DOM Ready Time: The time when the DOM is fully constructed and scripts are able to run, though external resources like images may not be finished.
    • Calculation: domContentLoadedEventEnd - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]
  • DOM Parsing Time: The time taken to parse the DOM tree.
    • Calculation: domComplete - domInteractive^[600-developer-tools-front-end-performance-monitoring.md]
  • Onload Time: The time when the load event is fired, indicating that all resources (such as stylesheets and images) have been loaded.
    • Calculation: loadEventEnd - fetchStart^[600-developer-tools-front-end-performance-monitoring.md]
  • [[Window.performance API]]
  • [[Navigation Timing]]
  • [[W3C Resource Timing]]

Sources

  • 600-developer-tools-front-end-performance-monitoring.md