Speed Matters: Performance Optimization for Vibe-Coded Apps

AI-generated code prioritizes correctness over performance. It works, but it's often slow. Database queries fetch too much data, images load unoptimized, and components re-render on every keystroke. Here's how to fix the most common performance problems.

Why Performance Matters

Measure First

Before optimizing, establish a baseline. You can't improve what you don't measure.

The Prompt

"Add performance measurement to this application. Set up Core Web Vitals tracking (LCP, FID, CLS). Add server-side timing logs for database queries and API responses. Show me the current performance baseline."

Free Tools

Database Optimization

This is almost always the biggest bottleneck in vibe-coded apps. AI writes queries that work but scale terribly.

Problem: Fetching Everything

AI often uses SELECT * or Prisma's findMany without selecting specific fields. If your users table has 20 columns, every list query pulls all 20 for every user.

The Prompt

"Optimize all database queries in this application. For each query: select only the fields that are actually used in the response or template, add pagination with reasonable limits (20-50 items per page), use database-level sorting instead of sorting in JavaScript, add appropriate indexes for commonly filtered columns."

Problem: The N+1 Query

The most common performance bug: loading a list, then making a separate query for each item. If you load 50 posts and then query the author for each one, that's 51 queries instead of 1-2.

The Prompt

"Find and fix all N+1 query problems. Use eager loading (include/join) to fetch related data in a single query. Specifically check: listing pages that display related data, API routes that loop through results and query additional data, and pages that show counts (comments, likes) for each item."

Image Optimization

Images are typically the heaviest assets on any page. AI rarely optimizes them.

The Prompt

"Optimize all images in this application: use Next.js Image component (or equivalent) for automatic resizing and format conversion, add width and height attributes to prevent layout shift, implement lazy loading for below-the-fold images, serve WebP or AVIF format where supported, add responsive srcsets so mobile users don't download desktop-sized images."

Frontend Performance

Problem: Everything Re-Renders

React (and similar frameworks) re-renders components when state changes. AI often puts state too high in the component tree, causing the entire page to re-render when a single input changes.

The Prompt

"Optimize React rendering in this application. Move state as close to where it's used as possible. Use React.memo for expensive list item components. Use useMemo for expensive calculations that don't need to run on every render. Use useCallback for event handlers passed to child components. Add React DevTools Profiler findings if possible."

Problem: Massive JavaScript Bundles

AI imports entire libraries when only a single function is needed. It pulls in moment.js for date formatting when Intl.DateTimeFormat is built into browsers.

The Prompt

"Analyze and reduce the JavaScript bundle size. Replace heavy libraries with lighter alternatives or native APIs: use Intl.DateTimeFormat instead of moment or date-fns, use native fetch instead of axios, tree-shake imports to only include what's used. Add dynamic imports for components that aren't needed on initial page load."

Caching

The fastest request is the one you never make. AI rarely implements caching.

The Prompt

"Add caching to this application at three levels: 1) HTTP cache headers for static assets (immutable for hashed filenames, short max-age for HTML), 2) API response caching for data that doesn't change every request (use Cache-Control or stale-while-revalidate), 3) Database query caching for expensive or frequently-run queries."

Quick Wins Checklist

These take minutes and make a noticeable difference:

Performance Budget

Set limits and enforce them:

The Prompt

"Set up a performance budget for this application: flag any page with LCP over 2.5 seconds, JavaScript bundle over 200KB gzipped, or API responses over 200ms. Add automated Lighthouse CI checks to the deployment pipeline."

Performance isn't glamorous, but it's the difference between an app people use and an app people abandon. The good news: AI is great at implementing these optimizations once you ask for them specifically.