perf-analyzer

Bundle size reduction starts with analyzing your JavaScript payload to identify oversized dependencies and tree-shaking issues. This Skill detects large imports, suggests lighter alternatives, identifies code-splitting opportunities, and recommends image optimization strategies to lower initial load time and improve Core Web Vitals metrics like LCP.

Slow frontends stem from oversized bundles, unnecessary re-renders, unoptimized images, and missing code splitting. Performance analysis identifies these bottlenecks—large dependencies, expensive computations, prop change patterns, and asset formats—then prioritizes fixes like dynamic imports, rendering optimization, and responsive image delivery.

Yes. Performance analysis detects unnecessary re-renders by examining component prop changes and rendering patterns. It flags expensive computations and suggests optimization strategies, helping you understand which rendering inefficiencies block user experience and how code splitting or memoization can help.

Image optimization combines format selection, lazy loading, and responsive techniques. Performance analysis recommends which images should use WebP or AVIF, which benefit from lazy loading, and how to serve responsive variants. These changes significantly reduce payload and improve perceived performance.

Code splitting defers non-critical JavaScript until needed, reducing initial payload and improving time-to-interactive. Performance analysis identifies code-splitting opportunities by mapping which modules are used on which routes or interactions, showing where dynamic imports yield the biggest performance gains.

Core Web Vitals measurement combines bundle analysis, rendering efficiency review, and image optimization. This Skill prioritizes improvements that directly impact LCP, CLS, and INP—such as deferring large scripts, eliminating layout shifts, and lazy-loading images—with a concrete plan to move metrics from poor to good ranges.