Performance Audit

Use this skill when the user asks to optimize performance, reduce load times, fix slow pages, or audit Core Web Vitals.

Steps

1. Analyze bundle size

   • Run npx @next/bundle-analyzer (Next.js) or npx vite-bundle-visualizer (Vite) to identify large dependencies.
   • Look for large libraries that could be replaced with lighter alternatives (e.g. moment → date-fns, lodash → individual imports or native methods).
   • Check for duplicated dependencies in the bundle.
   • Verify tree-shaking is working (no barrel file re-exports pulling in unused code).

2. Audit rendering performance

   • Identify components that re-render unnecessarily — look for inline object/array/function creation in JSX props.
   • Check for expensive computations in render paths that should use useMemo.
   • Verify lists use proper key props (not array index for dynamic lists).
   • Look for layout thrashing (reading DOM measurements then writing styles in a loop).

3. Check data fetching