performance-tuner

Optimize slow initial load in Next.js by analyzing bundle bloat and applying lazy loading. This Skill diagnoses oversized client bundles and proposes dynamic imports alongside code-splitting strategies to reduce your initial payload.

Use useMemo, useCallback, and React.memo for render optimization when diagnosing rendering inefficiencies. This Skill provides specific guidance on when to apply these hooks to prevent unnecessary re-renders and improve React render speed.

The best way to reduce an oversized client bundle is bundle analysis. This Skill identifies oversized libraries and imports that hinder startup and runtime performance, then proposes dynamic imports to reduce the payload.

Yes, you can use next/image to improve loading performance. This Skill advises on proper next/image optimization alongside React.memo and dynamic imports to meet your specific web performance goals.

Yes, this performance optimization works for both Next.js and React. It applies to frontend web apps built with either framework, targeting scenarios like slow initial load, interaction jank, or oversized client bundles.

React app jank during interactions is caused by rendering inefficiencies and bloated bundles. This Skill diagnoses these bottlenecks and applies render optimization guidelines using useMemo, useCallback, and React.memo to fix the issue.