Core Web Vitals
Google's small set of user-centered performance metrics: loading, interactivity, and visual stability.
Core Web Vitals are a standardized set of metrics intended to capture user experience rather than machine timings. The current three are Largest Contentful Paint (when the main content appears), Interaction to Next Paint (how quickly the page responds to input), and Cumulative Layout Shift (how much content moves around unexpectedly while loading).
Their value is that each maps to a felt experience, which makes them arguable with non-engineers. Their limitation is the usual one: they are proxies, and optimizing a proxy directly diverges from optimizing the experience — see Goodhart's Law. A page can score well and still feel bad.
Each has a characteristic cause. Largest Contentful Paint is usually dominated by the Critical Rendering Path and by images. Interaction to Next Paint is usually dominated by main-thread JavaScript, which makes it a Code Splitting and Hydration problem. Layout shift is usually caused by content arriving without reserved space — images without dimensions, fonts swapping, banners injected above existing content.
Field data (real visitors) and lab data (a synthetic run) frequently disagree, and the disagreement is informative rather than a measurement error: lab runs use a fixed device and network, and real users do not.
See also5
Performance Budget
A committed numeric ceiling on a page's cost, enforced automatically.
Web Platform22 connections
Critical Rendering Path
The sequence of steps between receiving HTML and painting pixels, and everything that blocks it.
Web Platform11 connections
Web Font Loading
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.
Web Platform11 connections
Search Engine Optimization
Making content discoverable through search, most of which is ordinary quality work.
Data & Content16 connections
Lazy Loading
Deferring the fetch of a resource until it is needed, or until the browser is idle.
Web Platform13 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
- BacklinkMeaning & Society
The automatically-derived list of pages linking to the current one.
- Critical Rendering PathWeb Platform
The sequence of steps between receiving HTML and painting pixels, and everything that blocks it.
- ETagWeb Platform
An opaque fingerprint of a response's content that lets a client ask a server whether it's changed without re-downloading it.
- Goodhart's LawMethod
When a measure becomes a target, it stops being a good measure.
- HTTP CachingWeb Platform
The set of headers that let a browser or intermediary reuse a previous response instead of re-fetching it.
- HTTP2 and HTTP3Web Platform
Two successive rewrites of HTTP's transport layer, each solving the previous version's head-of-line blocking at a different layer.
- Islands ArchitectureWeb Platform
Rendering a page as static HTML with small independently interactive regions.
- Lazy LoadingWeb Platform
Deferring the fetch of a resource until it is needed, or until the browser is idle.
- Performance BudgetWeb Platform
A committed numeric ceiling on a page's cost, enforced automatically.
- Preload and PrefetchWeb Platform
Two resource hints with opposite priorities — preload for what this page needs now, prefetch for what the next page might need.
- Search Engine OptimizationData & Content
Making content discoverable through search, most of which is ordinary quality work.
- Server-Side RenderingWeb Platform
Producing a page's HTML on the server so the first response is already content.
- Web Font LoadingWeb Platform
How custom typefaces are fetched and shown, and why the cost is easy to misattribute.