Performance Optimization

Optimize real Next.js and React applications with measurement, Server Component boundaries, caching, bundle control, and responsive mutations.

50 min

7 sections

performance

optimization

caching

web-vitals

react

01. Start with a performance budget

Section 1 of 7

Optimization work should begin with a budget and a measured bottleneck. For a real SaaS dashboard or ecommerce storefront, define route-level goals for Core Web Vitals, JavaScript, server latency, image weight, and database calls. A budget turns performance from an opinion into a release gate.

text

Route budget: /products/[slug]
- Largest Contentful Paint: p75 <= 2.5s on mobile
- Interaction to Next Paint: p75 <= 200ms
- Cumulative Layout Shift: p75 <= 0.1
- Initial client JavaScript: <= 180 KB compressed
- Server response before streaming starts: <= 500ms
- Product query count: <= 3
- Hero image: responsive, priority, correct sizes
- Third-party scripts: consent gated or lazy loaded

Release rule:
- If any p75 Web Vital regresses by more than 10%, investigate before deploy.
- If a route exceeds its JavaScript budget, identify the imported package or Client Component that caused it.

Exercise

Define a route budget

Practice

Create a performance budget for a customer dashboard that loads a sidebar, metric cards, ticket queue, activity feed, and chat widget.

Deployment with Vercel

Monitoring and Debugging

Back to Course