performance-optimization

Diagnose and fix performance bottlenecks across React frontends and database backends. Lighthouse (Chrome DevTools) : Measure Web Vitals (React): React.memo (prevent unnecessary re-renders) : useMemo & useCallback : Lazy Loading & Code Splitting : Webpack Bundle Analyzer : Tree Shaking (remove unused code) : Dynamic Imports : Next.js Image component : Use WebP format : Fix the N+1 query problem : Add indexes : Caching (Redis) : #performance #optimization #React #caching #lazy-loading #web-vitals #code-quality - Covers frontend optimization: React.memo, useMemo, useCallback, lazy loading, code splitting, image optimization, and bundle analysis - Includes backend strategies: N+1 query fixes, database indexing, Redis caching, and API compression - Provides measurement tools and workflows using Lighthouse, Web Vitals, and webpack-bundle-analyzer - Emphasizes profiling first, incremental improvements, and continuous monitoring with performance regression tests - Slow page loads : low Lighthouse score - Slow rendering : delayed user interactions - Large bundle size : increased download time - Slow queries : database bottlenecks - Measure first : profile, don't guess - Incremental improvements : optimize one thing at a time - Performance monitoring : track continuously - Premature optimization : don't optimize when there is no bottleneck - Sacrificing readability : don't make code...