Baseline truth
Next.js is already fast. "Great" means fewer bytes, less JS on first paint, and data fetched in the right layer (server vs client).
Images
Always next/image:
- Lazy load below fold
- Correct
sizes - WebP/AVIF via config
- Blur placeholder for LCP hero
Code splitting
const HeavyChart = dynamic(() => import("./Chart"), {
loading: () => <Skeleton />,
ssr: false, // only if browser-only
});
| Pattern | When |
|---|---|
| Route-level split | Automatic in App Router |
dynamic() | Heavy client widgets |
| Lazy below fold | Marketing sections |
Caching mental model
| Pattern | Use |
|---|---|
| Static / ISR | Marketing, rarely changing pages |
revalidate | Blog, catalog with TTL |
fetch cache tags | Invalidate on CMS publish |
| Client SWR | User-specific dashboard widgets |
Measure, don't vibe
- Lighthouse CI on PR (marketing routes)
- Vercel Analytics / Web Vitals
- React DevTools profiler for jank
TL;DR
Server-first, split heavy client, measure LCP and TTI — repeat.
From the notebook
Building something? Let's ship it.
MVPs, AI-assisted dev, web & mobile — founder-led team in Delhi. Tell us what you're making.
Keep reading
All articlesExplore Quezt Labs