Guides

Audit Core Web Vitals for Single Page Applications

Single Page Applications present unique performance challenges. Client-side routing, heavy JavaScript bundles, and runtime DOM re-rendering alter how Core Web Vitals behave compared to traditional multi-page websites.

Reviewed by WebAudit Lab · Updated 2026-10-02

Differentiate hard navigations from SPA soft navigations

The official Chrome Core Web Vitals metrics (LCP, INP, CLS) are recorded on initial hard document navigations. When an SPA user transitions between routes via client-side routers (such as React Router or Vue Router), the browser does not trigger a full document reload. Use the experimental soft navigation heuristics in the web-vitals JavaScript library to capture route transition timing, DOM insertion latency, and sub-page responsiveness alongside standard CrUX field telemetry.

Tackle LCP bottlenecks in client-rendered architectures

SPAs often suffer poor Largest Contentful Paint because the browser must download, parse, and execute megabytes of JavaScript before rendering the primary hero element. Pre-render critical landing routes using Server-Side Rendering (SSR) or Static Site Generation (SSG). Deliver lightweight initial HTML (under 150 KB) containing the hero markup and inline critical CSS, and prioritize primary images with fetchpriority='high' and decoding='async' before client-side hydration begins.

Optimize Interaction to Next Paint (INP) across client components

INP measures user interface responsiveness during click, tap, and keypress events. In SPAs, user actions frequently trigger expensive component re-renders, state recalculations, and synchronous data transformations that block the browser main thread. Break long tasks (> 50ms) using scheduler.yield() or requestIdleCallback(), debounce rapid input handlers, and offload CPU-intensive operations (such as data parsing or filtering) to dedicated Web Workers.

Prevent Cumulative Layout Shift (CLS) during asynchronous hydration

Client-side hydration is a primary driver of layout instability in SPAs. If server-rendered placeholder markup differs from client component state, or if client-side API fetches insert dynamic banners, navigation bars, or advertisements without reserved dimensions, the entire document shifts. Always define explicit aspect-ratio or min-height properties on dynamic containers, reserve layout space for client-hydrated elements, and avoid injecting unstyled content above existing layout blocks.

Automate lab and field performance monitoring

Synthetic single-run lab scores do not reflect diverse mobile CPUs, throttled networks, or complex user navigation journeys. Instrument production SPAs with real-user monitoring (RUM) using the official web-vitals API to aggregate 75th percentile metrics across all client devices. Set up performance budgets in CI/CD pipelines to detect bundle size regressions, unminified vendor libraries, and main-thread task execution spikes before shipping to production.