How do you implement web performance optimization for fast user experiences?

Web performance directly impacts user engagement, conversion, and SEO. Core metrics: Largest Contentful Paint (LCP, under 2.5s), First Input Delay (FID, under 100ms) / Interaction to Next Paint (INP, under 200ms), Cumulative Layout Shift (CLS, under 0.1). Loading optimization: implement code splitting (split JavaScript by route, load only what's needed), tree shaking (eliminate unused code during build), lazy load below-fold content and images, preload critical resources (font files, hero images), and use CDN for static asset delivery. Rendering optimization: minimize render-blocking resources (defer non-critical CSS and JS, inline critical CSS), reduce DOM size (target under 1500 elements), implement virtual scrolling for long lists (react-virtualized, tanstack-virtual), and debounce expensive event handlers (scroll, resize, input). Image optimization: serve modern formats (WebP 30% smaller than JPEG, AVIF 50% smaller), implement responsive images with srcset, use lazy loading with placeholder blur, and compress images appropriately (quality 80-85 for WebP is usually sufficient). JavaScript optimization: minimize bundle size (analyze with webpack-bundle-analyzer or rollup-plugin-visualizer), implement dynamic imports for code splitting, avoid large synchronous computations on the main thread (use Web Workers for heavy processing), and implement efficient state management (avoid unnecessary re-renders in React). Caching: implement long-term caching for static assets with content-based hashing (filename includes hash, cache for 1 year), implement stale-while-revalidate for API responses, and use Service Workers for offline caching. Monitoring: implement Real User Monitoring (RUM) with web-vitals library, track Core Web Vitals by page and user segment, set performance budgets in CI (fail build if bundle size exceeds limit), and monitor third-party script impact on performance.