Web Performance Cheat Sheet

Updated 2026-05-25

Next Topic: Web3 Frontend Integration Cheat Sheet

🧠Study flashcards on this topic98 cards · spaced repetition→

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, 98 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Web Vitals (Essential Metrics)Table 2: Image Optimization TechniquesTable 3: JavaScript Optimization StrategiesTable 4: Caching StrategiesTable 5: Resource Hints and LoadingTable 6: Rendering PerformanceTable 7: Font Performance OptimizationTable 8: Compression and DeliveryTable 9: Measurement and MonitoringTable 10: Advanced Optimization PatternsTable 11: Common Performance PitfallsTable 12: RAIL Performance Model

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

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
Largest Contentful Paint (LCP)	`<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
Interaction to Next Paint (INP)	`// 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
Cumulative Layout Shift (CLS)	`<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
Time to First Byte (TTFB)	`// Good: ≤800ms` `// Foundation metric`	• Measures server response time from navigation start to first byte received • foundational for all other metrics and influenced heavily by server processing and CDN performance
First Contentful Paint (FCP)	`// Good: ≤1.8s` `// First visible content`	• Marks first render of any text, image, or canvas element • provides initial user feedback that the page is loading but does not guarantee useful content
Total Blocking Time (TBT)	`// Long task >50ms` `// Lab metric only`	• Sums blocking time of all long tasks between FCP and Time to Interactive • lab-only metric that correlates with field INP and helps diagnose interactivity issues

Table 2: Image Optimization Techniques

Images are typically the single largest contributor to page weight and the most common cause of slow LCP scores. The right format, sizing, and loading strategy for each image type can reduce transfer size by 50–90% compared to unoptimized JPEG or PNG delivery.

Technique	Example	Description
WebP format	`<picture>` `<source type="image/webp" srcset="img.webp">` `<img src="img.jpg">` `</picture>`	• Modern format with 25–35% better compression than JPEG/PNG • widely supported (96%+ browsers); use `<picture>` fallback for maximum compatibility

The rest of this section is part of the full cheat sheet

Table 3: JavaScript Optimization Strategies

JavaScript is the primary source of main-thread blocking, which directly raises INP scores. The goal is to ship less JavaScript, parse and execute it later where possible, and yield the main thread frequently so user interactions are never delayed by long tasks.

Strategy	Example	Description
Code splitting	`const Component = lazy(() => import('./Heavy'));`	• Splits bundles into smaller chunks loaded on-demand • reduces initial JavaScript payload by deferring non-critical code until needed

The rest of this section is part of the full cheat sheet

Table 4: Caching Strategies

Caching is the highest-leverage performance technique because cached responses require zero network round trips. A layered strategy—HTTP headers, CDN edge caching, service workers, and the browser's built-in bfcache—ensures resources are served as close to the user and as quickly as possible.

Strategy	Example	Description
Cache-Control header	`Cache-Control: public, max-age=31536000` `<!-- For hashed static assets -->`	• Controls browser caching with directives for freshness lifetime • public allows CDN caching; max-age specifies seconds; pair with asset versioning for aggressive caching

The rest of this section is part of the full cheat sheet

Table 1: Core Web Vitals (Essential Metrics)

Metric	Example	Description
Largest Contentful Paint (LCP)	`<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
Interaction to Next Paint (INP)	`// 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
Cumulative Layout Shift (CLS)	`<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
Time to First Byte (TTFB)	`// Good: ≤800ms` `// Foundation metric`	• Measures server response time from navigation start to first byte received • foundational for all other metrics and influenced heavily by server processing and CDN performance
First Contentful Paint (FCP)	`// Good: ≤1.8s` `// First visible content`	• Marks first render of any text, image, or canvas element • provides initial user feedback that the page is loading but does not guarantee useful content
Total Blocking Time (TBT)	`// Long task >50ms` `// Lab metric only`	• Sums blocking time of all long tasks between FCP and Time to Interactive • lab-only metric that correlates with field INP and helps diagnose interactivity issues

Table 2: Image Optimization Techniques

Technique	Example	Description
WebP format	`<picture>` `<source type="image/webp" srcset="img.webp">` `<img src="img.jpg">` `</picture>`	• Modern format with 25–35% better compression than JPEG/PNG • widely supported (96%+ browsers); use `<picture>` fallback for maximum compatibility

Table 3: JavaScript Optimization Strategies

Strategy	Example	Description
Code splitting	`const Component = lazy(() => import('./Heavy'));`	• Splits bundles into smaller chunks loaded on-demand • reduces initial JavaScript payload by deferring non-critical code until needed

Table 4: Caching Strategies

Strategy	Example	Description
Cache-Control header	`Cache-Control: public, max-age=31536000` `<!-- For hashed static assets -->`	• Controls browser caching with directives for freshness lifetime • public allows CDN caching; max-age specifies seconds; pair with asset versioning for aggressive caching