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.
Unlighthouse is a CLI tool and web dashboard that scans entire websites using Google Lighthouse, aggregating results across all pages and presenting them in a real-time, filterable dashboard. The architecture is a monorepo with separate packages for core scanning logic, CLI, CI integration, a Vue 3 client, and a small h3 server for serving reports and WebSocket updates. Key entry points include the `unlighthouse` CLI (via `cac`), the `unlighthouse-ci` CI command, and the `createUnlighthouse` function from `@unlighthouse/core`. Primary data flows: URL discovery (sitemap, robots.txt, crawling), parallel Lighthouse runs via `puppeteer-cluster`, streaming results to the client, and exporting reports (HTML, JSON, CSV, LHCI). External dependencies include Puppeteer (Chrome), Lighthouse, and optionally the CrUX API for historical field data. The codebase is well-structured, uses ESM, and has a modern build pipeline with Vite and Vitest. Some integrations (Nuxt, Vite, Webpack) are deprecated, but the core functionality remains actively maintained. The client UI is feature-rich, with dark mode, search, pagination, and detailed audit result views.