Performance Optimization Auditor

Systematically audit and optimize application performance across all layers.

**Application Type:** [NEXT.JS / REACT SPA / VUE / ANGULAR / EXPRESS API / PYTHON DJANGO]
**Current Performance Baseline:** [NEW PROJECT / DEGRADING PERFORMANCE / USER-COMPLAINT LEVEL]

**Audit Framework - Layer by Layer:**

**Layer 1: Core Web Vitals Analysis**
- LCP (Largest Contentful Paint): Identify the element causing LCP, measure current value vs. target (<2.5s)
- INP (Interaction to Next Paint): Measure main thread blocking time, identify long tasks (>50ms)
- CLS (Cumulative Layout Shift): Find elements that shift during load (images without dimensions, dynamic ads, web fonts)
- Tools: Lighthouse, WebPageTest, Chrome DevTools Performance panel

**Layer 2: Bundle Size Optimization**
- Tree shaking verification (unused exports eliminated in production build)
- Code splitting analysis: route-level splits, component-level lazy imports
- Dependency audit: identify heavy packages and find lighter alternatives
- Dynamic imports for rarely-used features (charts libraries, rich text editors)
- Bundle analyzer output interpretation (webpack-bundle-analyzer / source-map-explorer)
- Target: Total JS < 175KB gzipped for above-the-fold content

**Layer 3: Image Optimization Pipeline**
- Format conversion: WebP/AVIF instead of PNG/JPG (25-35% smaller)
- Responsive images with srcset and sizes attributes
- Lazy loading below-the-fold images with native loading="lazy"
- Next.js Image component or equivalent with automatic sizing optimization
- SVG optimization (remove unused paths, minify with SVGO)
- Image CDN strategy for global delivery

**Layer 4: Caching Strategy Design**
- CDN caching rules: static assets with long cache headers (1 year + content hash), HTML with short TTL
- Service Worker caching strategy: stale-while-revalidate for API data, cache-first for static assets
- Redis/Memcached layer for database query results
- React component-level caching (React Query / SWR configuration)
- Edge caching with Vercel Edge Middleware or Cloudflare Workers
- Cache invalidation strategy: tag-based invalidation, time-based TTL, event-driven purge

**Layer 5: Database Query Profiling**
- Slow query identification (queries >100ms logged and analyzed)
- N+1 query detection in ORM usage (Prisma/TypeORM Sequelize query logging)
- Missing index identification from EXPLAIN ANALYZE output
- Query result caching for frequently-accessed, rarely-changing data
- Connection pooling configuration (min/max connections, idle timeout)
- Pagination enforcement (no unbounded queries returning all rows)

**Layer 6: Render Blocking Resource Audit**
- CSS: inline critical CSS, defer non-critical styles, use font-display: swap
- JavaScript: defer/async attributes on non-critical scripts, modulepreload for ES modules
- Web fonts: preconnect to font CDN, font-display fallback, subset fonts to needed characters
- Third-party scripts: async loading, lazy initialization after main content renders
- Server response time target: TTFB < 200ms

**Layer 7: Code Splitting Strategy**
- Route-based splitting (each page loads only its own code)
- Component-level lazy imports for heavy components (charts, maps, rich text editors)
- Dynamic imports for feature flags and optional features
- Shared chunk extraction for common dependencies across routes
- Prefetching strategy: hover-prefetch for likely navigation targets

**Deliverable:** Performance audit report with prioritized action items, before/after metrics targets, and implementation effort estimates.

How to Customize It

Replace each bracketed placeholder with your own details before running the prompt. The more specific you are, the better the output — vague inputs produce generic results.

• [NEXT.JS / REACT SPA / VUE / ANGULAR / EXPRESS API / PYTHON DJANGO]Swap in your next.js or react spa or vue or angular or express api or python django.
• [NEW PROJECT / DEGRADING PERFORMANCE / USER-COMPLAINT LEVEL]Swap in your new project or degrading performance or user-complaint level.

When to Use It

• Diagnosing a "the app feels slow" complaint with no obvious culprit — the audit structure localizes the problem layer first.
• Preparing for a traffic event (launch, campaign) by finding what breaks under load before load finds it.
• Improving Core Web Vitals for SEO where you need the highest-impact fixes ranked, not fifty suggestions.

Tips for Better Results

• 1Paste real measurements (Lighthouse scores, slow query logs, bundle analyzer output) — an audit of numbers beats an audit of vibes.
• 2Ask for expected impact per fix ("this typically cuts LCP by X") so you can order work by payoff, and measure after each change.
• 3One change at a time. Batch optimizations make it impossible to know what worked, and some "optimizations" regress.