Performance

Performance

This skill provides comprehensive performance capabilities including performance analysis, optimization, load testing, stress testing, capacity planning, and framework-specific performance patterns.

When to Use This Skill

• When identifying performance bottlenecks
• When investigating memory leaks or high memory usage
• When optimizing slow database queries
• When analyzing frontend performance (Core Web Vitals, bundle size)
• When setting up performance monitoring
• When conducting performance audits before deployment
• When creating load test scenarios
• When analyzing performance under stress
• When identifying system bottlenecks under load
• When planning capacity
• When setting up performance benchmarks
• When optimizing React rendering performance
• When reducing bundle size
• When improving Core Web Vitals (LCP, FID, CLS)
• When fixing memory leaks in React apps
• When implementing advanced React patterns

What This Skill Does

1. Performance Profiling: Analyzes CPU, memory, and network performance 2. Bottleneck Identification: Pinpoints specific performance issues 3. Memory Analysis: Detects memory leaks and high memory usage 4. Database Optimization: Identifies slow queries and optimization opportunities 5. Frontend Analysis: Analyzes bundle size, rendering performance, Core Web Vitals 6. Load Testing: Creates and executes load test scenarios 7. Stress Testing: Identifies breaking points and limits 8. Capacity Planning: Analyzes scalability and capacity 9. React Optimization: Optimizes React rendering, bundle size, and Core Web Vitals 10. Monitoring Setup: Creates performance monitoring and alerting

How to Use

Analyze Performance

Analyze the performance of this application and identify bottlenecks

Profile the memory usage and find any leaks

Create Load Tests

Create load test scenarios for this API

Test performance under 1000 concurrent users

Optimize React Apps

Optimize this React app for better performance

Analyze bundle size and reduce it

Analysis Areas

Application Performance

Metrics to Track:

• Response times and latency
• Throughput (requests per second)
• Error rates
• CPU utilization
• Memory usage patterns

Common Issues:

• Slow API endpoints
• High CPU usage
• Memory leaks
• Inefficient algorithms
• Blocking operations

Database Performance

Analysis Focus:

• Slow query identification
• Missing indexes
• N+1 query problems
• Connection pool exhaustion
• Lock contention

Tools:

• Query execution plans (EXPLAIN ANALYZE)
• Slow query logs
• Database monitoring tools
• Connection pool metrics

Frontend Performance

Core Web Vitals:

• Largest Contentful Paint (LCP) < 2.5s
• First Input Delay (FID) < 100ms
• Cumulative Layout Shift (CLS) < 0.1

Bundle Analysis:

• Bundle size optimization
• Code splitting opportunities
• Unused code removal
• Asset optimization

React Performance

Rendering Optimization:

• React.memo for component memoization
• useMemo for expensive computations
• useCallback for function memoization
• Virtualization for long lists
• Code splitting and lazy loading

Bundle Optimization:

• Code splitting by route
• Component lazy loading
• Tree shaking unused code
• Dynamic imports
• Bundle analysis

Performance Testing

Load Testing

Purpose: Test system under expected load Metrics: Response time, throughput, error rate Tools: k6, Artillery, JMeter, Locust

Example (k6):

import http from 'k6/http';
import { check } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 }, // Ramp up
    { duration: '5m', target: 100 }, // Stay at 100
    { duration: '2m', target: 200 }, // Ramp up to 200
    { duration: '5m', target: 200 }, // Stay at 200
    { duration: '2m', target: 0 },   // Ramp down
  ],
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
}

Stress Testing

Purpose: Find breaking points Metrics: Maximum capacity, failure points Approach: Gradually increase load until failure

Capacity Planning

Purpose: Determine resource needs Metrics: Resource utilization, scaling requirements Analysis: Current capacity vs. future needs

Analysis Process

1. Establish Baseline

Measure Current Performance:

• Response time percentiles (p50, p90, p95, p99)
• Throughput metrics
• Error rates
• Resource utilization (CPU, memory, network)

Set Targets:

• Define acceptable performance thresholds
• Set SLA targets
• Identify critical paths

2. Identify Bottlenecks

Profiling Techniques:

• CPU profiling to find hot functions
• Memory profiling to find leaks
• Network analysis for API calls
• Database query analysis

Bottleneck Patterns:

• Single slow operation (algorithmic complexity)
• Many small operations (N+1 queries)
• Resource contention (locks, connection pools)
• Memory leaks (gradual growth)

3. Analyze Root Cause

Investigation Steps:

1. Identify the slow operation 2. Measure its performance 3. Analyze why it's slow 4. Check for optimization opportunities 5. Verify the fix improves performance

4. Provide Optimization Recommendations

Recommendations Should Include:

• Specific code changes
• Before/after performance metrics
• Implementation steps
• Expected impact
• Risk assessment

Examples

Example 1: API Performance Analysis

Input: API endpoint /api/users is slow

Output:

## Performance Analysis: /api/users

### Current Performance
- **Average Response Time**: 2.3s
- **P95 Response Time**: 4.1s
- **Throughput**: 45 req/s
- **Error Rate**: 2%

### Bottleneck Identified
**Issue**: N+1 query problem in user data fetching
- **Location**: `src/routes/users.js:34`
- **Pattern**: One query for users, then N queries for each user's posts

### Root Cause

// Current implementation const users = await db.users.findAll(); for (const user of users) { user.posts = await db.posts.findByUserId(user.id); // N+1 queries }

### Optimization

// Optimized with eager loading const users = await db.users.findAll({ include: [{ model: Post, as: 'posts' }] // Single query with JOIN });

### Expected Impact

- **Response Time**: 2.3s → 0.3s (87% improvement)
- **Database Queries**: 101 → 1 (99% reduction)
- **Throughput**: 45 → 200+ req/s

Example 2: React Component Optimization

Input: Optimize expensive component

Output:

## React Performance: Component Optimization

### Issue
Component re-renders on every parent update, even when props haven't changed.

### Optimization

// Before: Re-renders unnecessarily function ExpensiveComponent({ data, config }) { const processed = data .filter(item => item.active) .map(item => processComplex(item, config));

return <Chart data={processed} />; }

// After: Memoized to prevent unnecessary re-renders const ExpensiveComponent = React.memo(({ data, config }) => { const processed = useMemo(() => { return data .filter(item => item.active) .map(item => processComplex(item, config)); }, [data, config]);

return <Chart data={processed} />; });

### Impact

- Re-renders reduced: 100% → 5%
- Performance improvement: 80% faster

Reference Files

For framework-specific performance patterns and detailed guidance, load reference files as needed:

• `references/framework_patterns.md` - Performance patterns for Node.js, React, databases, APIs, frontend, and monitoring strategies (from performance-analysis)
• `references/react_patterns.md` - React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals improvements
• `references/load_testing.md` - Load testing and stress testing patterns, tools, scenarios, and capacity planning strategies
• `references/PERFORMANCE_ANALYSIS.template.md` - Performance analysis report template with load profiles, bottlenecks, and recommendations

When analyzing performance for specific frameworks or conducting load tests, load the appropriate reference file.

Best Practices

Performance Analysis Approach

1. Measure First: Always establish baseline metrics 2. Profile Before Optimizing: Identify actual bottlenecks 3. Optimize Incrementally: Make one change at a time 4. Verify Improvements: Measure after each optimization 5. Monitor Continuously: Set up ongoing performance monitoring

Common Optimizations

Application:

• Optimize algorithms (reduce complexity)
• Add caching layers
• Use connection pooling
• Implement request batching
• Add rate limiting

Database:

• Add appropriate indexes
• Optimize queries (avoid N+1)
• Use query result caching
• Implement read replicas
• Optimize connection pooling

Frontend:

• Code splitting and lazy loading
• Image optimization
• Bundle size reduction
• Minimize re-renders
• Optimize asset loading

React:

• Measure before optimizing
• Memoize strategically (don't over-memoize)
• Code split by route and feature
• Lazy load components on demand
• Monitor performance metrics

Monitoring Setup

Key Metrics:

• Response time percentiles
• Error rates
• Throughput
• Resource utilization
• Custom business metrics

Alerting:

• Alert on performance degradation
• Alert on error rate spikes
• Alert on resource exhaustion
• Alert on SLA violations

Related Use Cases

• Performance audits
• Optimization projects
• Capacity planning
• Performance regression detection
• Production performance monitoring
• Load testing analysis
• React app optimization
• Bundle size reduction
• Core Web Vitals improvement
• Memory leak fixes
• Rendering performance optimization

Performance Analysis Framework Patterns

Reference guide for performance analysis patterns specific to different frameworks and technologies.

Node.js Performance Patterns

Event Loop Blocking

Detection:

• High event loop delay (> 10ms)
• Slow response times
• CPU spikes

Common Causes:

• Synchronous file operations
• CPU-intensive computations
• Large JSON parsing
• Synchronous crypto operations

Solutions:

• Use async file operations
• Move heavy computation to worker threads
• Stream large data processing
• Use async crypto operations

Memory Leaks

Detection:

• Gradual memory growth
• No decrease after requests complete
• High heap usage

Common Patterns:

• Unclosed event listeners
• Closures retaining large objects
• Circular references
• Timers not cleared

Solutions:

• Remove event listeners
• Use WeakMap/WeakSet
• Clear timers/intervals
• Monitor with heap snapshots

React Performance Patterns

Unnecessary Re-renders

Detection:

• Components re-render on every parent update
• Performance issues with large lists
• Slow interactions

Solutions:

• Use React.memo for components
• useMemo for expensive computations
• useCallback for function props
• Optimize context usage

Bundle Size Issues

Detection:

• Large initial bundle size
• Slow first load
• High Lighthouse scores

Solutions:

• Code splitting by route
• Lazy load components
• Tree shaking unused code
• Dynamic imports
• Analyze bundle with webpack-bundle-analyzer

Database Performance Patterns

Slow Queries

Detection:

• Queries taking > 100ms
• High database CPU usage
• Slow query logs

Common Causes:

• Missing indexes
• Full table scans
• Complex JOINs
• Suboptimal query plans

Solutions:

• Add appropriate indexes
• Optimize query structure
• Use EXPLAIN ANALYZE
• Consider denormalization
• Implement query caching

Connection Issues

Detection:

• Connection pool exhaustion
• Connection timeouts
• High connection count

Solutions:

• Increase pool size
• Implement connection retry
• Add connection timeout
• Use connection pooling
• Monitor connection metrics

API Performance Patterns

Slow Endpoints

Detection:

• High response times
• Timeout errors
• Slow p95/p99 percentiles

Common Causes:

• N+1 queries
• Synchronous operations
• External API calls
• Large payloads

Solutions:

• Optimize database queries
• Implement caching
• Use async operations
• Batch external calls
• Compress responses

Rate Limiting

Detection:

• 429 Too Many Requests errors
• API quota exceeded
• Throttling issues

Solutions:

• Implement client-side rate limiting
• Add request queuing
• Use exponential backoff
• Cache responses
• Batch requests

Frontend Performance Patterns

Core Web Vitals

LCP (Largest Contentful Paint):

• Optimize hero images
• Preload critical resources
• Minimize render-blocking CSS/JS
• Use CDN for assets

FID (First Input Delay):

• Reduce JavaScript execution time
• Break up long tasks
• Use web workers
• Defer non-critical JavaScript

CLS (Cumulative Layout Shift):

• Set image dimensions
• Reserve space for dynamic content
• Avoid inserting content above existing
• Use CSS transforms for animations

Resource Loading

Optimization Strategies:

• Lazy load images
• Preload critical resources
• Prefetch likely next pages
• Use resource hints (preconnect, dns-prefetch)
• Implement service workers

Monitoring Patterns

Key Metrics

Application Metrics:

• Response time (p50, p95, p99)
• Throughput (requests/second)
• Error rate
• CPU usage
• Memory usage

Database Metrics:

• Query execution time
• Connection pool usage
• Lock contention
• Cache hit rate

Frontend Metrics:

• Core Web Vitals
• Bundle size
• Resource load times
• Time to interactive

Alerting Thresholds

Response Time:

• Warning: p95 > 500ms
• Critical: p95 > 1000ms

Error Rate:

• Warning: > 1%
• Critical: > 5%

Memory:

• Warning: > 80% of limit
• Critical: > 90% of limit

CPU:

• Warning: > 70% average
• Critical: > 90% average

Load Testing and Stress Testing

Comprehensive guide for load testing, stress testing, capacity planning, and performance benchmarking.

Load Testing

Purpose

Test system under expected load to verify:

• System handles expected traffic
• Response times meet requirements
• Error rates are acceptable
• Resource usage is within limits

Tools

k6:

• Script-based load testing
• JavaScript test scripts
• Good for API testing
• Cloud and on-premise

Artillery:

• YAML-based configuration
• Easy to get started
• Good for HTTP APIs
• Supports WebSockets

JMeter:

• GUI-based test creation
• Comprehensive features
• Good for complex scenarios
• Java-based

Locust:

• Python-based
• Code-based test scenarios
• Distributed testing
• Real-time web UI

k6 Example

import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  stages: [
    { duration: '2m', target: 100 },  // Ramp up to 100 users
    { duration: '5m', target: 100 },  // Stay at 100 users
    { duration: '2m', target: 200 },  // Ramp up to 200 users
    { duration: '5m', target: 200 },  // Stay at 200 users
    { duration: '2m', target: 0 },    // Ramp down
  ],
  thresholds: {
    http_req_duration: ['p(95)<500'], // 95% of requests < 500ms
    http_req_failed: ['rate<0.01'],   // Error rate < 1%
  },
};

export default function() {
  const res = http.get('https://api.example.com/users');
  check(res, {
    'status is 200': (r) => r.status === 200,
    'response time < 500ms': (r) => r.timings.duration < 500,
  });
  sleep(1);
}

Artillery Example

config:
  target: 'https://api.example.com'
  phases:
    - duration: 60
      arrivalRate: 10
      name: "Warm up"
    - duration: 120
      arrivalRate: 50
      name: "Sustained load"
scenarios:
  - name: "Get users"
    flow:
      - get:
          url: "/users"
          expect:
            - statusCode: 200
            - contentType: json

Stress Testing

Purpose

Find breaking points and system limits:

• Maximum capacity
• Failure points
• Degradation patterns
• Recovery behavior

Approach

1. Start with baseline load 2. Gradually increase load 3. Monitor system behavior 4. Identify failure point 5. Analyze degradation patterns

Example: Stress Test Scenario

export const options = {
  stages: [
    { duration: '2m', target: 50 },   // Baseline
    { duration: '2m', target: 100 },  // Increase
    { duration: '2m', target: 200 },  // Increase more
    { duration: '2m', target: 400 },  // Push limits
    { duration: '2m', target: 800 },  // Find breaking point
    { duration: '5m', target: 800 },  // Hold at breaking point
    { duration: '2m', target: 0 },    // Ramp down
  ],
};

Capacity Planning

Purpose

Determine resource needs for:

• Future growth
• Peak traffic periods
• Scaling requirements
• Cost estimation

Analysis Process

1. Measure Current Capacity

• Maximum concurrent users
• Peak throughput
• Resource utilization at peak

2. Project Future Needs

• Expected growth rate
• Peak traffic estimates
• Seasonal variations

3. Calculate Requirements

• Server capacity needed
• Database scaling needs
• Network bandwidth requirements

4. Plan Scaling Strategy

• Horizontal vs vertical scaling
• Auto-scaling triggers
• Cost optimization

Example: Capacity Analysis

## Capacity Planning Analysis

### Current State
- **Peak Concurrent Users**: 1,000
- **Peak Throughput**: 500 req/s
- **Server Utilization**: 70% CPU, 60% memory
- **Database Connections**: 50/100

### Projected Growth
- **6 months**: 2,000 concurrent users (2x)
- **12 months**: 4,000 concurrent users (4x)

### Scaling Requirements
- **Servers**: 2x current capacity (4 servers → 8 servers)
- **Database**: Upgrade to larger instance or add read replicas
- **Load Balancer**: Current capacity sufficient
- **CDN**: Already in place, no changes needed

### Cost Estimate
- **Current**: $500/month
- **6 months**: $1,000/month
- **12 months**: $2,000/month

Performance Benchmarks

Key Metrics

Response Time:

• p50 (median)
• p95 (95th percentile)
• p99 (99th percentile)
• Max response time

Throughput:

• Requests per second
• Transactions per second
• Concurrent users supported

Error Rate:

• Percentage of failed requests
• Error types and frequencies
• Error distribution over time

Resource Utilization:

• CPU usage
• Memory usage
• Network bandwidth
• Disk I/O

Benchmark Targets

API Endpoints:

• p95 response time: < 500ms
• p99 response time: < 1000ms
• Error rate: < 0.1%
• Throughput: > 1000 req/s

Database:

• Query time: < 100ms (p95)
• Connection pool: < 80% utilization
• Lock contention: Minimal

Frontend:

• LCP: < 2.5s
• FID: < 100ms
• CLS: < 0.1
• TTI: < 3.5s

Test Scenarios

Baseline Test

Purpose: Establish performance baseline

Configuration:

• Low, steady load
• Measure normal performance
• Identify normal resource usage

Spike Test

Purpose: Test system response to sudden load increases

Configuration:

• Sudden load increase
• Measure recovery time
• Test auto-scaling

Endurance Test

Purpose: Test system stability over time

Configuration:

• Sustained load for extended period
• Check for memory leaks
• Monitor resource degradation

Volume Test

Purpose: Test system with large data volumes

Configuration:

• Large dataset
• High transaction volume
• Test database performance

Best Practices

Test Design

1. Define Requirements: Set performance targets first 2. Realistic Scenarios: Use realistic user behavior 3. Progressive Testing: Start with baseline, then increase 4. Monitor Resources: Track CPU, memory, network 5. Analyze Results: Identify bottlenecks and optimize

Test Execution

1. Start Small: Begin with low load 2. Gradual Increase: Ramp up slowly 3. Monitor Continuously: Watch metrics in real-time 4. Document Results: Record all findings 5. Iterate: Run multiple test cycles

Result Analysis

1. Identify Bottlenecks: Find slow components 2. Correlate Metrics: Link performance to resources 3. Compare Baselines: Track improvements 4. Document Findings: Record all insights 5. Recommend Actions: Provide actionable fixes

Common Issues Found

Under Load

High Response Times:

• Database bottlenecks
• Slow external APIs
• Insufficient resources
• Inefficient algorithms

High Error Rates:

• Resource exhaustion
• Timeout issues
• Connection pool exhaustion
• Rate limiting

Resource Exhaustion:

• Memory leaks
• Connection leaks
• CPU saturation
• Disk I/O limits

Tools Comparison

k6

• Best for: API testing, CI/CD integration
• Pros: Script-based, good reporting, cloud support
• Cons: Requires JavaScript knowledge

Artillery

• Best for: Quick API tests, YAML configuration
• Pros: Easy to use, good documentation
• Cons: Less flexible than code-based tools

JMeter

• Best for: Complex scenarios, GUI users
• Pros: Comprehensive features, GUI interface
• Cons: Resource intensive, Java-based

Locust

• Best for: Python developers, distributed testing
• Pros: Python-based, real-time UI, distributed
• Cons: Less mature than JMeter

Performance Analysis Report

Application: {{APPLICATION_NAME}} Date: {{YYYY-MM-DD}} Environment: {{PRODUCTION|STAGING|DEV}} Analyst: {{NAME}}

---

Executive Summary

Key Findings

1. {{FINDING_1}} 2. {{FINDING_2}} 3. {{FINDING_3}}

---

Test Configuration

Load Profile

Environment

---

Response Time Analysis

By Endpoint

Response Time Distribution

P50:  ████████████████████ {{MS}}ms
P75:  ██████████████████████████ {{MS}}ms
P90:  ████████████████████████████████ {{MS}}ms
P95:  ██████████████████████████████████████ {{MS}}ms
P99:  ████████████████████████████████████████████████ {{MS}}ms

---

Throughput Analysis

Requests Per Second

Saturation Point

• Max Sustainable RPS: {{N}}
• Breaking Point: {{N}} RPS
• Degradation Begins: {{N}} RPS

---

Resource Utilization

CPU

Memory

Network

---

Database Performance

Query Analysis

Slow Queries

{{SLOW_QUERY}}

Execution Time: {{MS}}ms Recommendation: {{FIX}}

Connection Pool

---

Bottlenecks Identified

1. {{BOTTLENECK_1}}

Location: {{COMPONENT}} Impact: {{DESCRIPTION}} Evidence:

{{METRICS_OR_LOGS}}

Root Cause: {{ANALYSIS}} Recommendation: {{FIX}}

---

2. {{BOTTLENECK_2}}

Location: {{COMPONENT}} Impact: {{DESCRIPTION}} Recommendation: {{FIX}}

---

Core Web Vitals (If Web App)

---

Error Analysis

Error Distribution

Error Patterns

• {{ERROR_PATTERN_1}}
• {{ERROR_PATTERN_2}}

---

Recommendations

Immediate Impact (Quick Wins)

Medium-term Optimizations

Long-term Architecture Changes

---

Comparison to Baseline

---

Appendix

A. Test Scripts

```{{LANGUAGE}} {{LOAD_TEST_SCRIPT}}

### B. Raw Metrics

<details>
<summary>Full Metrics Export</summary>

{{METRICS_JSON}}

</details>

---

## Quality Checklist

- [ ] Baseline established
- [ ] Multiple load scenarios tested
- [ ] Resource utilization monitored
- [ ] Bottlenecks identified
- [ ] Root causes analyzed
- [ ] Recommendations prioritized
- [ ] Comparison to targets documented

React Performance Patterns

React-specific performance optimization patterns, memoization strategies, bundle optimization, and Core Web Vitals improvements.

Rendering Optimization

React.memo for Component Memoization

When to Use:

• Component receives props that don't change often
• Component renders frequently
• Rendering is expensive

Example:

// Before: Re-renders on every parent update
function ExpensiveComponent({ data, config }) {
  const processed = processComplex(data, config);
  return <Chart data={processed} />;
}

// After: Only re-renders when props change
const ExpensiveComponent = React.memo(({ data, config }) => {
  const processed = processComplex(data, config);
  return <Chart data={processed} />;
});

useMemo for Expensive Computations

When to Use:

• Expensive calculations
• Derived data from props/state
• Preventing recalculation on every render

Example:

function Component({ items, filter }) {
  // Expensive computation - memoize result
  const filteredItems = useMemo(() => {
    return items
      .filter(item => item.category === filter)
      .map(item => processComplex(item));
  }, [items, filter]);

  return <List items={filteredItems} />;
}

useCallback for Function Props

When to Use:

• Passing functions to memoized children
• Functions used in dependency arrays
• Preventing function recreation on every render

Example:

function Parent({ items }) {
  // Memoize callback to prevent child re-renders
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return <Child items={items} onClick={handleClick} />;
}

const Child = React.memo(({ items, onClick }) => {
  return items.map(item => (
    <button key={item.id} onClick={() => onClick(item.id)}>
      {item.name}
    </button>
  ));
});

Virtualization for Long Lists

When to Use:

• Rendering large lists (1000+ items)
• Performance issues with scrolling
• Memory concerns with many DOM nodes

Example:

import { FixedSizeList } from 'react-window';

function LongList({ items }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>
          {items[index].name}
        </div>
      )}
    </FixedSizeList>
  );
}

Bundle Optimization

Code Splitting by Route

Example:

import { lazy, Suspense } from 'react';

// Lazy load routes
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Component Lazy Loading

Example:

import { lazy, Suspense } from 'react';

// Lazy load heavy components
const HeavyChart = lazy(() => import('./HeavyChart'));

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

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

Tree Shaking

Best Practices:

• Use ES modules (import/export)
• Avoid default exports when possible
• Use named exports for better tree shaking
• Check bundle analyzer for unused code

Dynamic Imports

Example:

// Dynamic import for code splitting
async function loadFeature() {
  const { FeatureComponent } = await import('./Feature');
  return FeatureComponent;
}

Bundle Analysis

Tools:

• webpack-bundle-analyzer
• source-map-explorer
• Next.js bundle analyzer

Example:

# Analyze bundle
npm run build
npx webpack-bundle-analyzer build/static/js/*.js

Core Web Vitals

LCP (Largest Contentful Paint) Optimization

Target: < 2.5s

Strategies:

• Optimize hero images (WebP, proper sizing)
• Preload critical resources
• Minimize render-blocking CSS/JS
• Use CDN for assets
• Optimize font loading

Example:

<!-- Preload critical resources -->
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/critical.css" as="style">

FID (First Input Delay) Optimization

Target: < 100ms

Strategies:

• Reduce JavaScript execution time
• Break up long tasks
• Use web workers for heavy computation
• Defer non-critical JavaScript
• Minimize third-party scripts

Example:

// Break up long tasks
function processLargeDataset(data) {
  // Use requestIdleCallback or setTimeout to break up work
  const chunkSize = 100;
  let index = 0;

  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    processChunkData(chunk);
    index += chunkSize;

    if (index < data.length) {
      setTimeout(processChunk, 0); // Yield to browser
    }
  }

  processChunk();
}

CLS (Cumulative Layout Shift) Prevention

Target: < 0.1

Strategies:

• Set image dimensions (width/height)
• Reserve space for dynamic content
• Avoid inserting content above existing
• Use CSS transforms for animations
• Preload fonts with font-display

Example:

// Set image dimensions to prevent layout shift
<img
  src="/hero.jpg"
  width={1200}
  height={600}
  alt="Hero image"
/>

// Reserve space for dynamic content
<div style={{ minHeight: '400px' }}>
  {loading ? <Skeleton /> : <Content />}
</div>

Memory Management

Event Listener Cleanup

Example:

useEffect(() => {
  const handler = () => {
    // Handle event
  };

  window.addEventListener('resize', handler);

  // Cleanup: Remove listener
  return () => {
    window.removeEventListener('resize', handler);
  };
}, []);

Preventing Memory Leaks

Common Patterns:

• Remove event listeners in cleanup
• Clear intervals/timeouts
• Unsubscribe from observables
• Avoid closures retaining large objects

Example:

useEffect(() => {
  const interval = setInterval(() => {
    // Do something
  }, 1000);

  // Cleanup: Clear interval
  return () => {
    clearInterval(interval);
  };
}, []);

Performance Monitoring

React Profiler

Example:

import { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration) {
  console.log('Component:', id);
  console.log('Phase:', phase);
  console.log('Duration:', actualDuration);
}

function App() {
  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <YourApp />
    </Profiler>
  );
}

Performance Metrics

Key Metrics:

• Component render time
• Re-render frequency
• Bundle size
• Core Web Vitals
• Memory usage

Best Practices

Do's

• ✅ Measure before optimizing
• ✅ Use React DevTools Profiler
• ✅ Memoize expensive computations
• ✅ Code split by route
• ✅ Lazy load heavy components
• ✅ Optimize images
• ✅ Monitor Core Web Vitals

Don'ts

• ❌ Over-memoize (adds overhead)
• ❌ Premature optimization
• ❌ Ignore bundle size
• ❌ Block main thread
• ❌ Forget cleanup functions
• ❌ Load everything upfront

Common Patterns

Context Optimization

Problem: Context causes unnecessary re-renders

Solution: Split contexts or use selectors

// Split contexts to prevent unnecessary re-renders
const UserContext = createContext();
const ThemeContext = createContext();

// Or use context selectors
function useUserSelector(selector) {
  const user = useContext(UserContext);
  return useMemo(() => selector(user), [user, selector]);
}

List Optimization

Problem: Rendering large lists is slow

Solution: Virtualization or pagination

// Use virtualization for long lists
import { FixedSizeList } from 'react-window';

// Or paginate
function PaginatedList({ items }) {
  const [page, setPage] = useState(0);
  const pageSize = 50;
  const pageItems = items.slice(page * pageSize, (page + 1) * pageSize);

  return (
    <>
      {pageItems.map(item => <Item key={item.id} item={item} />)}
      <Pagination page={page} onPageChange={setPage} />
    </>
  );
}