Performance Optimization

When to use this skill

• Slow page loads: low Lighthouse score

• Slow rendering: delayed user interactions

• Large bundle size: increased download time

• Slow queries: database bottlenecks

Instructions

Step 1: Measure performance

Lighthouse (Chrome DevTools):

# CLI

npm install -g lighthouse

lighthouse https://example.com --view

# Automate in CI

lighthouse https://example.com --output=json --output-path=./report.json

Measure Web Vitals (React):

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics(metric: any) {

  // Send to Google Analytics, Datadog, etc.

  console.log(metric);

}

getCLS(sendToAnalytics);

getFID(sendToAnalytics);

getFCP(sendToAnalytics);

getLCP(sendToAnalytics);

getTTFB(sendToAnalytics);

Step 2: Optimize React

React.memo (prevent unnecessary re-renders):

// ❌ Bad: child re-renders whenever the parent re-renders

function ExpensiveComponent({ data }: { data: Data }) {

  return <div>{/* complex rendering */}</div>;

}

// ✅ Good: re-render only when props change

const ExpensiveComponent = React.memo(({ data }: { data: Data }) => {

  return <div>{/* complex rendering */}</div>;

});

useMemo & useCallback:

function ProductList({ products, category }: Props) {

  // ✅ Memoize filtered results

  const filteredProducts = useMemo(() => {

    return products.filter(p => p.category === category);

  }, [products, category]);

  // ✅ Memoize callback

  const handleAddToCart = useCallback((id: string) => {

    addToCart(id);

  }, []);

  return (

    <div>

      {filteredProducts.map(product => (

        <ProductCard key={product.id} product={product} onAdd={handleAddToCart} />

      ))}

    </div>

  );

}

Lazy Loading & Code Splitting:

import { lazy, Suspense } from 'react';

// ✅ Route-based code splitting

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

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

const Settings = lazy(() => import('./pages/Settings'));

function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <Routes>

        <Route path="/dashboard" element={<Dashboard />} />

        <Route path="/profile" element={<Profile />} />

        <Route path="/settings" element={<Settings />} />

      </Routes>

    </Suspense>

  );

}

// ✅ Component-based lazy loading

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

function Dashboard() {

  return (

    <div>

      <h1>Dashboard</h1>

      <Suspense fallback={<Skeleton />}>

        <HeavyChart data={data} />

      </Suspense>

    </div>

  );

}

Step 3: Optimize bundle size

Webpack Bundle Analyzer:

npm install --save-dev webpack-bundle-analyzer

# package.json

{

  "scripts": {

    "analyze": "webpack-bundle-analyzer build/stats.json"

  }

}

Tree Shaking (remove unused code):

// ❌ Bad: import entire library

import _ from 'lodash';

// ✅ Good: import only what you need

import debounce from 'lodash/debounce';

Dynamic Imports:

// ✅ Load only when needed

button.addEventListener('click', async () => {

  const { default: Chart } = await import('chart.js');

  new Chart(ctx, config);

});

Step 4: Optimize images

Next.js Image component:

import Image from 'next/image';

function ProductImage() {

  return (

    <Image

      src="/product.jpg"

      alt="Product"

      width={500}

      height={500}

      priority  // for the LCP image

      placeholder="blur"  // blur placeholder

      sizes="(max-width: 768px) 100vw, 50vw"

    />

  );

}

Use WebP format:

<picture>

  <source srcset="image.webp" type="image/webp">

  <source srcset="image.jpg" type="image/jpeg">

  <img src="image.jpg" alt="Fallback">

</picture>

Step 5: Optimize database queries

Fix the N+1 query problem:

// ❌ Bad: N+1 queries

const posts = await db.post.findMany();

for (const post of posts) {

  const author = await db.user.findUnique({ where: { id: post.authorId } });

  // 101 queries (1 + 100)

}

// ✅ Good: JOIN or include

const posts = await db.post.findMany({

  include: {

    author: true

  }

});

// 1 query

Add indexes:

-- Identify slow queries

EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'test@example.com';

-- Add index

CREATE INDEX idx_users_email ON users(email);

-- Composite index

CREATE INDEX idx_orders_user_date ON orders(user_id, created_at);

Caching (Redis):

async function getUserProfile(userId: string) {

  // 1. Check cache

  const cached = await redis.get(`user:${userId}`);

  if (cached) {

    return JSON.parse(cached);

  }

  // 2. Query DB

  const user = await db.user.findUnique({ where: { id: userId } });

  // 3. Store in cache (1 hour)

  await redis.setex(`user:${userId}`, 3600, JSON.stringify(user));

  return user;

}

Output format

Performance optimization checklist

## Frontend

- [ ] Prevent unnecessary re-renders with React.memo

- [ ] Use useMemo/useCallback appropriately

- [ ] Lazy loading & Code splitting

- [ ] Optimize images (WebP, lazy loading)

- [ ] Analyze and reduce bundle size

## Backend

- [ ] Remove N+1 queries

- [ ] Add database indexes

- [ ] Redis caching

- [ ] Compress API responses (gzip)

- [ ] Use a CDN

## Measurement

- [ ] Lighthouse score 90+

- [ ] LCP < 2.5s

- [ ] FID < 100ms

- [ ] CLS < 0.1

Constraints

Required rules (MUST)

• Measure first: profile, don't guess

• Incremental improvements: optimize one thing at a time

• Performance monitoring: track continuously

Prohibited items (MUST NOT)

• Premature optimization: don't optimize when there is no bottleneck

• Sacrificing readability: don't make code complex for performance

Best practices

• 80/20 rule: 80% improvement with 20% effort

• User-centered: focus on improving real user experience

• Automation: performance regression tests in CI

References

• web.dev/vitals

• React Optimization

• Webpack Bundle Analyzer

Metadata

Version

• Current version: 1.0.0

• Last updated: 2025-01-01

• Compatible platforms: Claude, ChatGPT, Gemini

Related skills

• database-schema-design

• ui-components

Tags

#performance #optimization #React #caching #lazy-loading #web-vitals #code-quality

Examples

Example 1: Basic usage

Example 2: Advanced usage