Performance Optimization Guide for AI-Built Apps

Start by measuring before optimizing — use Lighthouse in Chrome DevTools, Vercel's Speed Insights, or WebPageTest to get a baseline. Identify whether your bottleneck is JavaScript bundle size, slow API responses, database queries, or render-blocking resources. Use the Network tab to find large payloads and the Performance tab to pinpoint long tasks. React DevTools Profiler helps identify components that re-render unnecessarily and cause janky interactions.

Run `npx next build` and examine the bundle analysis output to find large dependencies. Replace heavy libraries with smaller alternatives — for example, swap `moment` for `date-fns` or `lodash` for native array methods. Use dynamic imports with `next/dynamic` to code-split components that are not needed on the initial page load. Move server-only code to Server Components so it never ships to the browser — this is the single most impactful optimization in the App Router.

N+1 queries are the most common performance killer in AI-generated backends — they occur when your code runs one query to fetch a list and then additional queries for each item. Fix them by joining related data in a single query or using a dataloader pattern. Add database indexes on columns used in WHERE clauses and foreign key joins. Use `EXPLAIN ANALYZE` in Postgres to inspect query plans and identify sequential scans that should be index scans. Log slow queries exceeding 100ms using your ORM's query logger.

Next.js App Router caches fetch requests automatically — use `revalidate` to control how long cached data is served before being refreshed. For user-specific data that cannot be cached at the edge, use React's `cache` function to deduplicate identical requests within a single render. Implement Redis caching for expensive database aggregations that power dashboards or analytics. Add CDN caching headers to API routes that return public, infrequently changing data.

Use Next.js `Image` component for all images — it automatically serves WebP, lazy-loads off-screen images, and prevents layout shift with its placeholder system. Set explicit `width` and `height` props rather than using `fill` layout where possible. Compress and resize images before uploading to storage rather than relying on transformation services for every request. Self-host your web fonts using `next/font` to eliminate render-blocking font requests and prevent layout shift from font swaps.

Default to Server Components for any UI that does not need interactivity — they reduce client-side JavaScript and enable streaming. Use `Suspense` boundaries to stream in slower sections of a page while fast sections render immediately. Move client components as deep in the component tree as possible to maximize the server-rendered portion. For highly dynamic pages like dashboards, consider Partial Prerendering which renders a static shell instantly and streams in dynamic content.