Skip to content

Performance Monitoring Data Pipeline

The Performance Monitoring Data Pipeline describes the architectural flow for capturing, transmitting, and analyzing web performance Metrics.^[600-developer-tools-front-end-performance-monitoring.md] It typically begins with client-side data collection using the window.performance API and ends with data visualization tools like Kibana^[600-developer-tools-front-end-performance-monitoring.md].

Data Collection

The process relies on the Navigation Timing API, which provides a detailed breakdown of the page load lifecycle^[600-developer-tools-front-end-performance-monitoring.md]. To ensure all necessary Metrics are populated—specifically those that require the page to be fully loaded—data collection is best executed within the window.onload event^[600-developer-tools-front-end-performance-monitoring.md].

Core attributes accessed during this stage include: * window.performance.memory: For memory usage statistics^[600-developer-tools-front-end-performance-monitoring.md]. * window.performance.navigation: For navigation type and redirect counts^[600-developer-tools-front-end-performance-monitoring.md]. * window.performance.timing: The primary interface for timestamp-based metrics^[600-developer-tools-front-end-performance-monitoring.md].

Data Transport

Once the Metrics are calculated, the data is formatted for transmission^[600-developer-tools-front-end-performance-monitoring.md]. The standard approach involves exporting the data in JSON format^[600-developer-tools-front-end-performance-monitoring.md].

Two primary architectural patterns exist for handling this data: 1. Direct Ingestion: Sending the JSON payload directly to the datastore^[600-developer-tools-front-end-performance-monitoring.md]. 2. Middleware Layer: Introducing an intermediate layer to process or buffer the data before storage^[600-developer-tools-front-end-performance-monitoring.md].

Storage and Analysis

The destination for the collected data is typically Elasticsearch^[600-developer-tools-front-end-performance-monitoring.md]. Once indexed, the data can be visualized and monitored using Kibana^[600-developer-tools-front-end-performance-monitoring.md].

This setup allows developers to track key calculated indicators over time, such as DNS query time, TCP connection latency, and DOM parsing duration^[600-developer-tools-front-end-performance-monitoring.md].

Sources

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