Auditing Performance

---
name: auditing-performance
description: Audit and optimize application performance, including bundle size, rendering, database queries, and Core Web Vitals.
---

# 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**
   - Identify request waterfalls — sequential API calls that could be parallelized with `Promise.all`.
   - Look for data fetched on the client that could be fetched on the server.
   - Check for missing pagination on large data sets.
   - Verify API responses aren't over-fetching (returning fields the client doesn't need).

4. **Database query optimization**
   - Look for N+1 query patterns (a query per item in a list).
   - Check for missing indexes on columns used in WHERE, ORDER BY, and JOIN clauses.
   - Identify queries that could use `SELECT` with specific columns instead of `SELECT *`.
   - Look for missing connection pooling.

5. **Check assets**
   - Verify images use modern formats (WebP/AVIF) and are properly sized.
   - Check for missing `loading="lazy"` on below-the-fold images.
   - Verify fonts use `font-display: swap` and are preloaded.
   - Check for render-blocking CSS or JavaScript.

6. **Generate recommendations** — produce a prioritized list of optimizations ranked by impact (High / Medium / Low) with estimated effort for each.

## Notes

- Focus on measurable improvements — use Lighthouse, WebPageTest, or the Performance tab in DevTools.
- Don't prematurely optimize — profile first, optimize bottlenecks.
- For React apps, use React DevTools Profiler to identify slow components.