Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API

The article discusses building a frontend monitoring system to capture user‑experience issues such as blank screens, long load times, and jank.

It introduces the Core Web Vitals (FCP, LCP, CLS, TTI, TBT) and explains how Chrome Lighthouse can be used for lab testing, while real‑user metrics are obtained via the PerformanceObserver API.

The author shows how to monitor page‑load performance by observing FCP, LCP, CLS, TBT and TTI, assigning weights and reporting scores for alerting.

For jank detection, the concept of a Longtask (≥50 ms blocking the main thread) is explained, and PerformanceObserver is used to capture longtask entries, including duration and start time.

To add context, the article describes linking network requests (via PerformanceResourceTiming) and user actions (click/keydown) to longtasks, and extracting call‑stack information with the js‑self‑profiling API (requiring Document‑Policy: js‑profiling=?1).

When stack information is unavailable, the author suggests using rrweb to record and replay DOM changes preceding a longtask.

Finally, it looks ahead to the ComputePressure API in Chrome 115 for monitoring CPU load, temperature, and battery state.