Performance Optimizer

Expert skill for optimizing React application performance. Specializes in code splitting, bundle optimization, memoization, Core Web Vitals, and runtime profiling.

Core Capabilities

1. Code Splitting

•React.lazy(): Component-level splitting
•Dynamic import(): Route-based splitting
•Loadable Components: Advanced code splitting
•Bundle Analysis: webpack-bundle-analyzer
•Tree Shaking: Remove unused code

2. React Performance

•React.memo(): Prevent unnecessary renders
•useMemo(): Memoize expensive computations
•useCallback(): Memoize functions
•useTransition(): Non-blocking updates
•useDeferredValue(): Defer non-urgent updates
•React Profiler: Measure render performance

3. Bundle Optimization

•Minification: Terser, SWC
•Compression: Gzip, Brotli
•Source Maps: Optimize for production
•Dead Code Elimination: Remove unused exports
•Module Concatenation: Scope hoisting
•Long-term Caching: Content hashing

4. Image Optimization

•WebP/AVIF: Modern formats
•Responsive Images: srcset, sizes
•Lazy Loading: loading="lazy"
•Image CDN: Cloudinary, Imgix
•Placeholder: BlurHash, LQIP
•Compression: Quality optimization

5. Core Web Vitals

•LCP: Largest Contentful Paint < 2.5s
•FID: First Input Delay < 100ms
•CLS: Cumulative Layout Shift < 0.1
•TTFB: Time to First Byte < 800ms
•FCP: First Contentful Paint < 1.8s

6. Runtime Performance

•Virtual Lists: react-window, react-virtualized
•Debouncing: Limit function calls
•Throttling: Rate limiting
•Web Workers: Background processing
•Intersection Observer: Lazy load visibility
•RAF: requestAnimationFrame

Code Splitting

typescript

// Route-based splitting
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

const Home = lazy(() => import('./pages/Home'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Profile = lazy(() => import('./pages/Profile'))

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

// Component-level splitting
const HeavyChart = lazy(() => import('./components/HeavyChart'))

function Analytics() {
  const [showChart, setShowChart] = useState(false)

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<div>Loading chart...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  )
}

Memoization

typescript

// React.memo for components
const ExpensiveComponent = React.memo(({ data }: { data: Data }) => {
  return <div>{/* Expensive rendering */}</div>
})

// useMemo for values
function SearchResults({ query }: { query: string }) {
  const filteredResults = useMemo(() => {
    return expensiveFilter(items, query)
  }, [items, query])

  return <div>{/* Render results */}</div>
}

// useCallback for functions
function Parent() {
  const handleClick = useCallback(() => {
    console.log('Clicked')
  }, [])

  return <Child onClick={handleClick} />
}

Virtual Lists

typescript

import { FixedSizeList } from 'react-window'

function VirtualList({ items }: { items: Item[] }) {
  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
    <div style={style}>{items[index].name}</div>
  )

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}

Bundle Analysis

javascript

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ],
}

// package.json
{
  "scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'"
  }
}

Image Optimization

tsx

// Responsive + Lazy Loading
function OptimizedImage({ src, alt }: { src: string; alt: string }) {
  return (
    <img
      src={src}
      alt={alt}
      srcSet={`
        ${src}?w=400 400w,
        ${src}?w=800 800w,
        ${src}?w=1200 1200w
      `}
      sizes="(max-width: 768px) 100vw, 50vw"
      loading="lazy"
      decoding="async"
      style={{ width: '100%', height: 'auto' }}
    />
  )
}

Core Web Vitals

typescript

// Measure Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'

function sendToAnalytics(metric: any) {
  console.log(metric)
  // Send to analytics
}

getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getFCP(sendToAnalytics)
getLCP(sendToAnalytics)
getTTFB(sendToAnalytics)

Best Practices

•Lazy load below-the-fold content
•Use production builds
•Enable compression (Gzip/Brotli)
•Optimize images (WebP, lazy loading)
•Code split by route
•Memoize expensive components
•Use virtual lists for large datasets
•Prefetch critical resources
•Monitor Core Web Vitals
•Regular bundle audits

When to Use This Skill

Use when you need to:

•Improve app load time
•Reduce bundle size
•Optimize runtime performance
•Fix Core Web Vitals issues
•Implement code splitting
•Add lazy loading
•Optimize images
•Profile React performance

Output Format

Provide:

•Performance Audit: Current metrics
•Optimization Plan: What to optimize
•Implementation: Code changes
•Bundle Analysis: Size improvements
•Metrics: Before/after comparison
•Monitoring: Track performance over time