Web performance encompasses the techniques and technologies that make websites load faster and respond more quickly to user interactions. At its core, it's 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 isn't just about initial page load anymore; it's about sustained responsiveness throughout the entire session, measured by metrics like Interaction to Next Paint (INP) that track how quickly a page responds to every click, tap, and keystroke. The key mental model: every millisecond of delay compounds across millions of users, making performance optimization one of the highest-ROI investments in web development.
What This Cheat Sheet Covers
This topic spans 11 focused tables and 86 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)
| Metric | Example | Description |
|---|---|---|
<img fetchpriority="high" />// Good: ≤2.5s | • Measures loading speed by tracking when the largest content element (image/text) becomes visible • directly impacts perceived page speed and accounts for hero images | |
// Good: ≤200ms// Replaces FID since 2024 | • Measures responsiveness across all user interactions (clicks/taps/keys) throughout page lifetime • captures input delay + processing + rendering time | |
<img width="800" height="600" />// Good: ≤0.1 | • Measures visual stability by quantifying unexpected layout movements • reserve space for images/ads to prevent content from jumping during load |