`) **LCP Optimization Checklist:** 1. **Preload the LCP resource** ```html ``` 2. **Eliminate render-blocking resources** ```html ``` 3. **Optimize server response time (TTFB)** - Use CDN for static assets - Enable HTTP/2 or HTTP/3 - Implement server-side caching - Use streaming SSR where supported 4. **Optimize image delivery** ```html ``` #### CLS Diagnosis CLS measures visual stability -- unexpected layout shifts during page load. **Common CLS Causes:** - Images without explicit dimensions - Ads or embeds without reserved space - Dynamically injected content above the fold - Web fonts causing FOIT/FOUT (Flash of Invisible/Unstyled Text) **CLS Optimization Checklist:** 1. **Always set image dimensions** ```html ``` Or use CSS aspect-ratio: ```css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``` 2. **Reserve space for dynamic content** ```css .ad-slot { min-height: 250px; } .skeleton { height: 200px; background: #f0f0f0; } ``` 3. **Use `font-display: swap` with size-adjust** ```css @font-face { font-family: 'CustomFont'; src: url('/font.woff2') format('woff2'); font-display: swap; size-adjust: 100.5%; /* Match fallback font metrics */ } ``` 4. **Avoid inserting content above existing content** - Banners should push down from top, not shift existing content - Use `transform` animations instead of `top`/`left`/`width`/`height` #### INP Diagnosis INP measures interactivity -- the delay between user interaction and visual response. **Common INP Causes:** - Long JavaScript tasks blocking the main thread - Synchronous layout/style recalculations - Heavy event handlers - Excessive re-renders (React, Vue) **INP Optimization Checklist:** 1. **Break up long tasks** ```javascript // Instead of one long task function processAllItems(items) { for (const item of items) { /* heavy work */ } } // Break into chunks with scheduler async function processAllItems(items) { for (const item of items) { processItem(item); // Yield to main thread between items await scheduler.yield(); } } ``` 2. **Debounce/throttle event handlers** ```javascript // Throttle scroll handler let ticking = false; window.addEventListener( 'scroll', () => { if (!ticking) { requestAnimationFrame(() => { updateUI(); ticking = false; }); ticking = true; } }, { passive: true } ); ``` 3. **Use `requestIdleCallback` for non-urgent work** ```javascript requestIdleCallback(() => { // Analytics, prefetching, non-visible updates sendAnalytics(data); }); ``` ### Phase 3: Network Analysis Analyze network waterfall for optimization opportunities. **Key Checks:** 1. **Resource count and total size** - Target: < 100 requests, < 2MB total (compressed) - Check: `performance.getEntriesByType('resource').length` 2. **Critical request chains** - Identify chains longer than 3 requests - Break chains with preload/prefetch hints 3. **Compression** - All text resources should use Brotli (br) or gzip - Check `Content-Encoding` header in response 4. **Caching headers** ``` # Immutable assets (hashed filenames) Cache-Control: public, max-age=31536000, immutable # HTML documents Cache-Control: no-cache # API responses Cache-Control: private, max-age=0, must-revalidate ``` 5. **HTTP/2+ multiplexing** - Verify protocol in DevTools Network tab - Multiple resources should load in parallel over single connection ### Phase 4: Accessibility Performance Performance optimizations must not degrade accessibility. **Validation Checklist:** - [ ] Lazy-loaded images have `alt` attributes - [ ] Deferred scripts do not break keyboard navigation - [ ] Skeleton loaders have `aria-busy="true"` and `aria-label` - [ ] `prefers-reduced-motion` is respected for animations - [ ] Focus management works with dynamically loaded content ```css /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` ### Phase 5: Codebase Analysis Review source code for performance anti-patterns. #### Webpack Optimization ```javascript // webpack.config.js module.exports = { optimization: { splitChunks: { chunks: 'all', maxInitialRequests: 25, minSize: 20000, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return `vendor.${packageName.replace('@', '')}`; }, }, }, }, }, }; ``` #### Vite Optimization ```javascript // vite.config.ts export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], router: ['react-router-dom'], }, }, }, cssCodeSplit: true, sourcemap: false, // Disable in production }, }); ``` #### Next.js Optimization ```typescript // next.config.ts const nextConfig = { images: { formats: ['image/avif', 'image/webp'], deviceSizes: [640, 750, 828, 1080, 1200], }, experimental: { optimizePackageImports: ['lucide-react', '@heroicons/react'], }, }; ``` #### Common Code Anti-Patterns | Anti-Pattern | Impact | Fix | | ------------------------------------ | ----------------- | --------------------------------------------- | | Barrel file imports | Bundle bloat | Import directly from module | | Synchronous `localStorage` in render | Main thread block | Move to `useEffect` or worker | | Unoptimized images | LCP, bandwidth | Use `next/image` or `` | | Inline `