--- name: lighthouse-optimization description: Optimize web applications to achieve 95%+ Lighthouse scores across all categories. Use when optimizing performance, accessibility, best practices, or SEO for web applications. --- # Lighthouse Optimization ## Overview This skill covers comprehensive optimization techniques to achieve 95%+ scores in all Lighthouse categories: Performance, Accessibility, Best Practices, and SEO. ## Target Scores - **Performance**: ≥ 95% - **Accessibility**: ≥ 95% - **Best Practices**: ≥ 95% - **SEO**: ≥ 95% ## Performance Optimization ### Core Web Vitals **Target Metrics**: - **FCP (First Contentful Paint)**: < 1.8s - **LCP (Largest Contentful Paint)**: < 2.5s - **TBT (Total Blocking Time)**: < 200ms - **CLS (Cumulative Layout Shift)**: < 0.1 - **Speed Index**: < 3.4s ### Optimization Strategies 1. **Minimize JavaScript Execution** - Code splitting - Lazy loading - Tree shaking 2. **Optimize Asset Loading** - Preload critical resources - Defer non-critical resources - Use efficient cache lifetimes 3. **Reduce Main Thread Blocking** - Minimize synchronous operations - Use Web Workers for heavy computations - Optimize WASM loading ## Accessibility Optimization ### Critical Issues #### 1. Touch Targets **Requirement**: All interactive elements ≥ 48x48px ```css .btn, .tab, button { min-width: 48px; min-height: 48px; padding: 12px 16px; margin: 4px; /* Spacing between targets */ } ``` #### 2. Semantic HTML **Required Elements**: - `` - Language attribute - `

` - Main landmark - `