workflow-review-performance

You are in PERFORMANCE REVIEW MODE.

Use performance agent to optimize for Core Web Vitals and fast load times.

Performance Audit Process

1. Core Web Vitals Analysis (20 mins)

Largest Contentful Paint (LCP) - Target: < 2.5s

// ❌ SLOW: Large unoptimized image
<img src="/hero.jpg" width="1200" height="630" />

// ✅ FAST: Optimized with next/image
import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority // Preload above-the-fold
  quality={85}
  placeholder="blur"
  blurDataURL="data:image/..." // Or import from static
/>

LCP Optimization Checklist:

• Hero images use next/image with priority
• Above-the-fold content loads first
• Server-side rendering for initial paint
• Fonts optimized with next/font
• CSS not blocking render
• No layout shifts during load

First Input Delay (FID/INP) - Target: < 100ms

// ❌ SLOW: Heavy computation on main thread
function ExpensiveComponent() {
  const data = complexCalculation(largeArray) // Blocks rendering!
  return <div>{data}</div>
}

// ✅ FAST: Memoized expensive calculation
function ExpensiveComponent() {
  const data = useMemo(
    () => complexCalculation(largeArray),
    [largeArray]
  )
  return <div>{data}</div>
}

// ✅ BETTER: Web Worker for heavy computation
function ExpensiveComponent() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const worker = new Worker('/workers/calculation.js')
    worker.postMessage(largeArray)
    worker.onmessage = (e) => setData(e.data)
    return () => worker.terminate()
  }, [largeArray])

  return <div>{data}</div>
}

FID/INP Optimization Checklist:

• No long tasks blocking main thread
• Heavy computation memoized or in Web Workers
• Event handlers debounced/throttled
• Code splitting for large bundles
• Third-party scripts loaded async

Cumulative Layout Shift (CLS) - Target: < 0.1

// ❌ LAYOUT SHIFT: No dimensions on image
<img src="/banner.jpg" alt="Banner" />

// ✅ NO SHIFT: Dimensions specified
<Image
  src="/banner.jpg"
  alt="Banner"
  width={1200}
  height={300} // Prevents shift
/>

// ❌ LAYOUT SHIFT: Dynamic content without placeholder
{isLoading && <Spinner />}
{data && <Content data={data} />}

// ✅ NO SHIFT: Consistent height
<div className="min-h-[400px]">
  {isLoading && <Spinner />}
  {data && <Content data={data} />}
</div>