Skip to content

Performance monitoring with Elasticsearch and Kibana

Performance monitoring with Elasticsearch and Kibana is a workflow for tracking front-end application Metrics by capturing data via browser APIs, sending it to an Elasticsearch backend, and visualizing the results in Kibana^[600-developer__tools__front-end-performance-monitoring.md].

Data Capture

The core of this monitoring approach relies on the window.performance interface provided by the browser^[600-developer__tools__front-end-performance-monitoring.md]. This interface exposes several key properties useful for analysis:

  • window.performance.memory: Provides memory usage information.
  • window.performance.navigation: Contains navigation context, such as the number of redirects.
  • window.performance.timing: Contains detailed timing information regarding the page load lifecycle^[600-developer__tools__front-end-performance-monitoring.md].

To calculate Metrics accurately, data collection typically occurs within the window.onload event, ensuring that all timing values are available after the page has fully loaded^[600-developer__tools__front-end-performance-monitoring.md].

Key Metrics

By analyzing the window.performance.timing attributes, developers can calculate specific durations to identify bottlenecks^[600-developer__tools__front-end-performance-monitoring.md]. Common calculations include:

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

Additional Metrics such as TTFB (Time to First Byte), Total Time, and Redirect counts can also be derived from the navigation timing data^[600-developer__tools__front-end-performance-monitoring.md].

Data Ingestion

Once the performance Metrics are calculated, they need to be transmitted to the backend for storage and analysis^[600-developer__tools__front-end-performance-monitoring.md].

  • Format: Data is typically formatted into JSON.
  • Transport: The JSON payload can be sent directly to Elasticsearch or routed through a middleware service.

Visualization

Stored performance data is visualized using Kibana, which allows teams to create dashboards and graphs based on the ingested metrics^[600-developer__tools__front-end-performance-monitoring.md]. This enables continuous monitoring of user experience and application health.

Sources

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