Optimize web application performance using code splitting, lazy loading, caching, compression, and monitoring. Use when improving Core Web Vitals and user experience.

Web Performance Optimization Table of Contents [Overview]( overview) [When to Use]( when to use) [Quick Start]( quick start) [Reference Guides]( reference guides) [Best Practices]( best practices) Overview Implement performance optimization strategies including lazy loading, code splitting, caching, compression, and monitoring to improve Core Web Vitals and user experience. When to Use Slow page load times High Largest Contentful Paint (LCP) Large bundle sizes Frequent Cumulative Layout Shift (CLS) Mobile performance issues Quick Start Minimal working example: Reference Guides Detailed implementations in the references/ directory: Guide Contents [Code Splitting and Lazy Loading (React)](references/code splitting and lazy loading react.md) Code Splitting and Lazy Loading (React) [Image Optimization](references/image optimization.md) Image Optimization [HTTP Caching and Service Workers](references/http caching and service workers.md) HTTP Caching and Service Workers [Gzip Compression and Asset Optimization](references/gzip compression and asset optimization.md) Gzip Compression and Asset Optimization [Performance Monitoring](references/performance monitoring.md) Performance Monitoring Best Practices ✅ DO Follow established patterns and conventions Write clean, maintainable code Add appropriate documentation Test thoroughly before deploying ❌ DON'T Skip testing or validation Ignore error handling Hard code configuration values

web-performance-optimization