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.
This monorepo provides two packages for font optimization in web applications. `fontaine` is a library that automatically generates metric-adjusted CSS `@font-face` fallback rules to reduce Cumulative Layout Shift (CLS). It parses CSS, reads font metrics from files or URLs, and injects override rules with proper `size-adjust`, `ascent-override`, etc. `fontless` is a Vite plugin that builds on top of fontaine and integrates with multiple font providers (Google Fonts, Bunny, FontSource, npm, etc.) to automatically download, subset, and serve optimized fonts with zero runtime JavaScript. It scans CSS for `font-family` declarations, resolves fonts through a provider chain, downloads the actual font files, emits them as build assets, and injects both the primary `@font-face` rules and metric-override fallback families. The codebase is well-structured, has comprehensive test coverage, and follows modern JavaScript/TypeScript practices. It is a hybrid of a library (fontaine) and an application plugin (fontless) but primarily serves as a developer tool for building optimized web fonts.