How do you implement performance observability in production?
Answer
Production performance observability requires collecting real user metrics (RUM) and acting on them. Instrument Core Web Vitals: import { onLCP, onINP, onCLS, onFCP, onTTFB } from "web-vitals"; function sendToAnalytics(metric) { navigator.sendBeacon("/analytics", JSON.stringify({ name: metric.name, value: metric.rating === "good" ? "good" : metric.rating === "needs-improvement" ? "ni" : "poor", delta: metric.delta, id: metric.id, page: location.pathname })); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);. Segment by dimensions: device type (mobile vs desktop), network speed (4G vs 3G), geography, page template. Commercial RUM tools: Datadog, Dynatrace, SpeedCurve, Calibre — provide p75/p95 distributions, time-series trends, regression alerts. Open source: send to BigQuery + Looker Studio, or ClickHouse + Grafana. Alerting: alert when 75th percentile LCP exceeds 2.5s or INP exceeds 200ms for more than 5% of sessions. Correlate with deployments: mark deployments in the time-series to correlate performance regressions with code changes. Real user data (field data) is the ground truth — lab data (Lighthouse) can miss user-specific issues like slow auth redirects or personalized content loading.
Previous
What are Container Queries and their performance implications?
Next
What is HTTP/3 QUIC and how does it improve performance?
More Web Performance Questions
View all →- Advanced What is the scheduler API and how does it improve INP?
- Advanced What is speculation rules API and prerendering?
- Advanced How do JavaScript virtual machines optimize JavaScript performance?
- Advanced What is the Islands Architecture and partial hydration for performance?
- Advanced What are Container Queries and their performance implications?