Web performance encompasses the techniques and technologies that make websites load faster and respond more quickly to user interactions. At its core, it is measured through Core Web Vitals—Google's standardized metrics that quantify real user experience—and optimized through strategies like caching, compression, lazy loading, and resource prioritization. Modern web performance extends beyond initial page load to sustained responsiveness throughout the entire session, captured by Interaction to Next Paint (INP) replacing the older First Input Delay. The key mental model: performance work compounds—every millisecond saved across millions of users, and every new browser API (scheduler.yield(), Speculation Rules, LoAF) gives developers more precise tools to keep the main thread free and navigations instant.
What This Cheat Sheet Covers
This topic spans 12 focused tables and 103 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Web Vitals (Essential Metrics)
The three Core Web Vitals—LCP, INP, and CLS—are Google's definitive signals for real-user experience quality and are incorporated as a ranking factor in Google Search. Hitting the "good" threshold at the 75th percentile of page loads is the practical goal; lab tools approximate these metrics but only field data from real users tells the complete story.
| Metric | Example | Description |
|---|---|---|
<img fetchpriority="high" />// Good: ≤2.5s | • Measures loading speed by tracking when the largest visible content element (image or text) renders • directly represents perceived page load and accounts for hero images | |
// Good: ≤200ms// Replaced FID in March 2024 | • Measures responsiveness across all user interactions (clicks, taps, keys) throughout the page lifetime • captures input delay + event processing + presentation delay | |
<img width="800" height="600" />// Good: ≤0.1 | • Measures visual stability by quantifying unexpected layout movements • reserve space for images, ads, and embeds to prevent content from shifting during load |