impeccable-optimizelisted

Performance is a feature. Identify the actual bottleneck for THIS interface, fix it, then measure. Don't optimize what isn't slow. ## Assess Performance Issues Understand current performance and identify problems: 1. **Measure current state**: - **Core Web Vitals**: LCP, INP, CLS scores - **Load time**: Time to interactive, first contentful paint - **Bundle size**: JavaScript, CSS, image sizes - **Runtime performance**: Frame rate, memory usage, CPU usage - **Network**: Request count, payload sizes, waterfall 2. **Identify bottlenecks**: - What's slow? (Initial load? Interactions? Animations?) - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - How bad is it? (Perceivable? Annoying? Blocking?) - Who's affected? (All users? Mobile only? Slow connections?) **CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. ## Optimization Strategy Create systematic improvement plan: ### Loading Performance **Optimize Images**: - Use modern formats (WebP, AVIF) - Proper sizing (don't load 3000px image for 300px display) - Lazy loading for below-fold images - Responsive images (`srcset`, `picture` element) - Compress images (80-85% quality is usually imperceptible) - Use CDN for faster delivery ```html <img src="hero.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px" loading="laz