Overview

Performance & Core Web Vitals

Core Web Vitals are Google's standardized metrics for user experience quality. They're used in search ranking, but more importantly they represent real dimensions of how users experience your site: loading speed, visual stability, and interaction responsiveness. This section covers each current metric in depth, the infrastructure for tracking and enforcing them, and the most impactful class of real-world performance regressions.

The section leads with the three metrics, then the biggest real-world offender (third-party scripts), then measurement strategy, then enforcement infrastructure.

What's covered

Largest Contentful Paint (LCP) — Time until the largest visible content element finishes rendering. The primary loading speed metric. Covers what elements qualify, what commonly delays LCP, and how to improve it.

Cumulative Layout Shift (CLS) — A score of unexpected layout movement during the page's lifetime. Covers how the score is calculated, the most common causes (images without dimensions, dynamic content injection, web fonts), and how to eliminate them.

Interaction to Next Paint (INP) — The current responsiveness metric, replacing the now-deprecated FID. Measures the latency from user interaction to the next paint across the entire session. Covers long tasks, input delay, and main thread congestion.

Third-Party Script Management — How analytics, chat widgets, and A/B testing scripts degrade INP and LCP — and how to audit, defer, and contain their impact using next/script strategies and the facade pattern.

RUM vs Synthetic Monitoring — Real User Monitoring collects field data from actual users; synthetic monitoring runs automated tests in controlled conditions. Both are necessary for a complete picture.

Performance Budgets — Setting enforceable limits on bundle size, metric values, and third-party script weight — and integrating those limits into CI so regressions are caught before deploy.

Lighthouse CI Integration — Running Lighthouse audits automatically on every PR, defining score thresholds, and failing builds that regress on performance or accessibility.

IntersectionObserver Internals — How the browser efficiently detects element visibility without polling. The observer callback, threshold arrays, rootMargin for preloading, the internal intersection algorithm, and common patterns: lazy loading, infinite scroll, analytics viewport tracking.

MutationObserver Cost — Observing DOM changes synchronously via microtask-queued callbacks. Configuration options (childList, attributes, subtree, characterData), performance implications of broad observation scopes, batching mutations, and when MutationObserver is the right tool vs when ResizeObserver or IntersectionObserver is more appropriate.

PerformanceObserver API — The unified interface for collecting performance entries: resource, navigation, longtask, paint, largest-contentful-paint, layout-shift, event. Buffered entries for late observers, entry types and their fields, and building a lightweight RUM pipeline from PerformanceObserver data.

Long Tasks API — Detecting main-thread tasks exceeding 50ms that block user interaction. PerformanceObserver with type: "longtask", attribution to scripts and iframes, correlation with INP, and the transition to Long Animation Frames (LoAF) for more granular attribution.

Speculation Rules API — The modern replacement for <link rel="prefetch"> and the deprecated <link rel="prerender">. The <script type="speculationrules"> JSON format with prefetch and prerender arrays, source: "list" for explicit URLs and source: "document" with CSS selector matching. Eagerness levels (immediate, eager, moderate, conservative), prerender restrictions (cross-origin, no-store, auth prompts), measuring activation with PerformanceNavigationTiming.activationStart, and the Chromium-only browser support status.