$ show GoogleChrome/web-vitals
This repository is the `web-vitals` JavaScript library by Google Chrome, designed to measure Core Web Vitals (LCP, CLS, INP) and other performance metrics (FCP, TTFB) in real-user monitoring (RUM) scenarios. It provides a tiny, deferred-load-friendly API that aligns with Chrome User Experience Report (CrUX) methodology, supporting bfcache restores, prerendering activation, soft navigations, and attribution data for debugging. The library is written in TypeScript, compiled to multiple formats (ESM, UMD, IIFE), and includes both a standard build and an attribution build with additional debugging fields. Its architecture is modular: each metric function (e.g., `onLCP`, `onCLS`) uses shared internal utilities (`observe`, `bindReporter`, `initMetric`, `getVisibilityWatcher`) and metric-specific state managers (`LayoutShiftManager`, `InteractionManager`, `LCPEntryManager`). The codebase demonstrates high craftsmanship with clean abstractions, thorough cross-browser handling, and a comprehensive test suite covering unit tests and end-to-end WebDriverIO tests across Chrome, Firefox, and Safari. It is actively maintained, with recent commits and issue triage, though it tracks rapidly evolving browser APIs (soft navigations, Long Animation Frames) which introduces some technical drift risk. Overall, it is a well-engineered library suitable for production use and integration into analytics pipelines.
The LLM identified 4 files worth highlighting for reuse:
A safe, feature-detected wrapper around `PerformanceObserver` that handles buffered entries, microtask deferral, and multi-entry type sorting. It is reusable in any project needing to observe performance entries with consistent error handling and cross-browser quirks.
A uniform report/delta/rating logic used by all metric functions. It encapsulates the pattern of reporting metric values, computing deltas, and assigning ratings (good/needs-improvement/poor) based on thresholds. This component can be extracted for any metric reporting system.
Ensures that only one manager instance (e.g., `InteractionManager`, `LayoutShiftManager`) is created per metric call and configuration, enabling multiple `onINP()` or `onCLS()` calls with different options. It demonstrates a clean pattern for managing singleton-like instances keyed by a unique configuration hash.
Manages interaction event entries for INP calculation, maintaining a bounded top-10 candidate interactions, computing a p98 estimate when 50+ interactions are present, and resetting per navigation. It handles complex state (entry processing, duration thresholds, interaction count polyfill) and is a non-trivial, reusable component for any project needing interaction latency analysis.