name	optimize-performance
description	Use when a page feels slow or LCP is poor. Walks through the Next.js 16 performance checklist for Atrium.

Optimize performance

Open Network tab — measure TTFB, LCP image, total JS.
Run pnpm build and inspect the route summary. Note bundle size and prerender status.
Open the route in Vercel Speed Insights if deployed.

Slow TTFB: server work too heavy. Check for N+1 in Drizzle queries; add with: relations.
Slow LCP: hero image not optimized. Use next/image with priority.
Large JS: client component too high in the tree. Push "use client" boundaries down.
Repeated work: opt into Cache Components with "use cache" + cacheTag. Invalidate with updateTag.

Org chart, Gantt, doc viewer: dynamic-import these — they're large and rarely on first paint.
Sidebar nav: it's static per role — wrap in "use cache" keyed by role.
KPI sparklines: render server-side as SVG, not client-side canvas.

name	optimize-performance
description	Use when a page feels slow or LCP is poor. Walks through the Next.js 16 performance checklist for Atrium.

Open Network tab — measure TTFB, LCP image, total JS.
Run pnpm build and inspect the route summary. Note bundle size and prerender status.
Open the route in Vercel Speed Insights if deployed.

Slow TTFB: server work too heavy. Check for N+1 in Drizzle queries; add with: relations.
Slow LCP: hero image not optimized. Use next/image with priority.
Large JS: client component too high in the tree. Push "use client" boundaries down.
Repeated work: opt into Cache Components with "use cache" + cacheTag. Invalidate with updateTag.

Org chart, Gantt, doc viewer: dynamic-import these — they're large and rarely on first paint.
Sidebar nav: it's static per role — wrap in "use cache" keyed by role.
KPI sparklines: render server-side as SVG, not client-side canvas.

optimize-performance