Speed & Performance

Is this fast enough?

Review load times, Core Web Vitals, and runtime efficiency. Fast apps feel better and convert more users.

Core Web Vitals Targets

LCP (Largest Contentful Paint)

< 2.5s good, < 4.0s needs improvement

INP (Interaction to Next Paint)

< 200ms good, < 500ms needs improvement

CLS (Cumulative Layout Shift)

< 0.1 good, < 0.25 needs improvement

Stage expectations

POC

Skip check

Speed doesn't matter yet
Focus on proving value
Optimize later

MVP

Light check

Baseline metrics measured
Obvious issues addressed
No blocking performance bugs

MMP

Full check

Performance budget defined
Core Web Vitals passing
Load times acceptable

PROD

Complete check

Actively monitored
CDN and caching optimized
Regression alerts in place

Core Web Vitals

MMP+

LCP (Largest Contentful Paint) under 2.5 seconds
INP (Interaction to Next Paint) under 200 milliseconds
CLS (Cumulative Layout Shift) under 0.1
Metrics measured on real devices (not just dev machine)
Mobile performance tested (throttled connection)
Performance tested on key pages (home, login, dashboard)

Bundle Size

MVP+

Initial JavaScript bundle under 200KB (gzipped)
Bundle analyzer run to identify large dependencies
No duplicate dependencies in bundle
Dynamic imports used for non-critical code
Tree shaking working (no unused exports bundled)
Third-party scripts loaded async or deferred

Image Optimization

MVP+

Images use modern formats (WebP, AVIF)
Images properly sized (not oversized)
Responsive images with srcset
Images lazy-loaded below the fold
Hero images prioritized with priority prop
Image dimensions specified (prevents CLS)
Next.js Image component used

Font Optimization

MMP+

Fonts preloaded for critical text
Font display: swap prevents invisible text
Font subsetting removes unused characters
Variable fonts used when multiple weights needed
System fonts considered for non-brand text
Font files served from same origin or CDN

Critical Rendering Path

MMP+

Critical CSS inlined or preloaded
Render-blocking resources minimized
Above-the-fold content loads first
Non-critical CSS deferred
Preconnect to required origins
DNS prefetch for third-party domains

Third-Party Scripts

MMP+

Third-party scripts audited and justified
Analytics loaded async
Chat widgets loaded on interaction
Social embeds lazy-loaded
Ad scripts don't block render
Tag manager usage optimized

Common Issues & Quick Fixes

LCP too slow: Optimize hero image, preload critical resources, reduce TTFB

High CLS: Add dimensions to images, reserve space for dynamic content

Large JavaScript bundle: Use dynamic imports, remove unused dependencies

Render-blocking CSS: Inline critical CSS, defer non-critical styles

Slow fonts: Use font-display: swap, preload critical fonts

Tools & Resources

Core Web Vitals

PageSpeed Insights — Google performance analysis
web.dev/measure — Web vitals measurement
WebPageTest — Detailed performance analysis
Lighthouse — Chrome DevTools audits

Bundle Analysis

@next/bundle-analyzer — Next.js bundle visualization
source-map-explorer — Analyze bundle composition
bundlephobia — Package size lookup
import-cost — VS Code extension

React Performance

React DevTools Profiler — Component render analysis
Why Did You Render — Detect unnecessary re-renders
Million.js — React performance optimization
React Scan — Detect performance issues

Monitoring

Vercel Analytics — Real user performance data
Sentry Performance — APM and tracing
web-vitals library — Measure Core Web Vitals
Speedlify — Performance monitoring dashboard

AI Agent Commands

Use these prompts with your AI coding agent to check performance:

Run the Performance audit at MVP level
Find components that could benefit from React.memo
Check for N+1 query patterns in API routes
Audit images for optimization opportunities
Find large dependencies that could be lazy loaded

Related audits

Design & Experience

Performance affects user experience

Deploy & Observe

Monitor performance in production

Code & Testing

Code quality impacts performance