Performance Engineering ⚡

Performance is a multi-course meal—optimize the appetizer (first paint), main dish (interactivity), and dessert (server throughput).

Core Web Vitals 🍽️

• LCP (Largest Contentful Paint): optimize hero images, use next/image with proper sizing, preconnect critical origins.
• CLS (Cumulative Layout Shift): reserve space for media (width/height), load fonts with next/font.
• INP (Interaction to Next Paint): debounce expensive handlers, defer non-critical JS, use Web Workers for heavy tasks.

Bundle Size Control

• Inspect .next/analyze (use next build --analyze).
• Remove dead code, leverage modulePathIgnorePatterns.

Code Splitting & Tree Shaking

• Use dynamic(() => import('./Chart'), { ssr: false }) for client-only heavy components.
• Ensure packages ship ES modules for tree shaking; avoid glob imports.

Hydration Cost

• Keep server components server-only; minimize client component boundaries.
• Use use client sparingly.

Server Rendering Perf 🍲

• Streaming SSR: wrap sections in Suspense to stream as data arrives.
• Partial Rendering: split large pages into smaller server components; avoid fetching everything at once.
• Avoid Waterfalls: parallelize fetches with Promise.all or fetch dedupe.
• DB Optimization: batch queries, use .select() to fetch only needed columns, implement caching (Redis) for hot data.
• Connection Pooling: use Prisma Data Proxy, pgBouncer, or built-in poolers when on serverless to avoid max connections.

Next.js-specific Tools 🧰

• next/script strategies (afterInteractive, lazyOnload). Inline critical scripts with strategy="beforeInteractive" only if necessary.
• next/image fine-tuning: set sizes attr, adjust quality, mark priority for hero images.
• dynamic() + React.lazy: lazily load seldom-used components.
• Prefetch control: automatically enabled on <Link>, but disable via prefetch={false} if too aggressive.
• Instrumentation hooks: instrumentation.ts for custom tracing.

Analogy: Performance tuning is running a Michelin kitchen—prep ahead (code splitting), cook efficiently (parallel fetches), and plate beautifully (web vitals) so diners (users) get a delightful experience.