performance-optimization

name	performance-optimization
description	Use when Core Web Vitals are degraded, bundle size is too large, or React/Next.js rendering is slow — covers profiling, bundle analysis, and optimization patterns
tier	HIGH
value_tier	production
tags	["performance","web-vitals","optimization"]
entitlements	{"product_tiers":["all"],"agent_access":["all"]}

Performance Optimization Skill

Core Web Vitals

LCP (Largest Contentful Paint) < 2.5s

• Preload hero images
• Use next/image with proper sizes
• Font optimization with next/font
• Server-side render above-the-fold content

CLS (Cumulative Layout Shift) < 0.1

• Reserve space for images/videos
• Use CSS aspect-ratio
• Font display: swap
• Avoid dynamically injected content

FID/INP (First Input Delay/Interaction to Next Paint) < 100ms

• Code splitting
• Defer non-critical JS
• Minimize main thread work
• Use web workers for heavy computation

Bundle Optimization

Dynamic Imports

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false // Disable SSR if needed
})

Bundle Analysis

npm run build && npm run analyze

React Optimization

useMemo & useCallback

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
const memoizedCallback = useCallback(() => doSomething(a), [a])

React.memo

const MyComponent = React.memo(({ title }) => {
  return <h1>{title}</h1>
})

Image Optimization

next/image

import Image from 'next/image'

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // Preload LCP image
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Monitoring

Real User Monitoring

• Vercel Analytics
• Google Core Web Vitals
• Custom performance marks