Performance Expert | Bootspring Docs

The Performance Expert agent specializes in optimization, profiling, and making applications faster.

Expertise Areas#

Frontend Performance - Core Web Vitals, bundle size, rendering
Backend Performance - Response times, throughput, concurrency
Database Performance - Query optimization, indexing, caching
Caching Strategies - Redis, CDN, browser caching
Profiling - CPU, memory, network analysis
Load Testing - Stress testing, benchmarking

Usage Examples#

Performance Audit#

Use the performance-expert agent to audit the performance of our Next.js application.

Response includes:

Core Web Vitals analysis
Bundle size review
Rendering optimization opportunities
Caching recommendations

Query Optimization#

Use the performance-expert agent to optimize this slow database query.

Response includes:

Query analysis
Index recommendations
Rewritten query
Execution plan explanation

Load Testing#

Use the performance-expert agent to create a load testing strategy for our API.

Response includes:

Test scenarios
Tool recommendations
Metrics to track
Baseline targets

Frontend Performance#

Core Web Vitals#

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

Bundle Optimization#

// Dynamic imports for code splitting
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false, // Client-only if needed
});

// Route-based splitting (automatic in Next.js)
// Each page is a separate bundle

// Analyze bundle
// npx @next/bundle-analyzer

Image Optimization#

import Image from 'next/image';

// Optimized image loading
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // LCP image
  placeholder="blur"
  blurDataURL={blurDataUrl}
/>

// Responsive images
<Image
  src="/product.jpg"
  alt="Product"
  sizes="(max-width: 768px) 100vw, 50vw"
  fill
  style={{ objectFit: 'cover' }}
/>

React Performance#

// Memoize expensive computations
const expensiveResult = useMemo(() => {
  return heavyComputation(data);
}, [data]);

// Memoize callbacks
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// Memoize components
const MemoizedComponent = memo(function Component({ data }) {
  return <div>{/* ... */}</div>;
});

// Virtualize long lists
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={10000}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>{items[index].name}</div>
  )}
</FixedSizeList>

Backend Performance#

Response Time Optimization#

// Parallel data fetching
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments(),
]);

// vs Sequential (slower)
const users = await fetchUsers();
const posts = await fetchPosts();
const comments = await fetchComments();

Caching Strategies#

import { Redis } from 'ioredis';

const redis = new Redis();
const CACHE_TTL = 3600; // 1 hour

async function getCachedData(key: string, fetcher: () => Promise<any>) {
  // Try cache first
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  // Fetch and cache
  const data = await fetcher();
  await redis.setex(key, CACHE_TTL, JSON.stringify(data));

  return data;
}

// Usage
const user = await getCachedData(
  `user:${id}`,
  () => prisma.user.findUnique({ where: { id } })
);

Connection Pooling#

// Prisma with connection pooling
// DATABASE_URL="postgresql://...?connection_limit=20&pool_timeout=20"

// PgBouncer for PostgreSQL
// Transaction mode for serverless

Database Performance#

Index Optimization#

-- Identify missing indexes
SELECT
  relname,
  seq_scan,
  idx_scan,
  seq_scan - idx_scan AS difference
FROM pg_stat_user_tables
WHERE seq_scan > idx_scan
ORDER BY difference DESC;

-- Create covering index
CREATE INDEX idx_orders_user_status
ON orders(user_id, status)
INCLUDE (total, created_at);

-- Partial index for common queries
CREATE INDEX idx_active_users
ON users(email)
WHERE deleted_at IS NULL;

Query Analysis#

-- Explain analyze
EXPLAIN (ANALYZE, BUFFERS, FORMAT TEXT)
SELECT *
FROM orders o
JOIN users u ON o.user_id = u.id
WHERE o.status = 'pending'
ORDER BY o.created_at DESC
LIMIT 10;

Caching Layers#

┌─────────────────────────────────────────────────────────┐
│                    Browser Cache                         │
│              (Service Worker, HTTP Cache)                │
├─────────────────────────────────────────────────────────┤
│                        CDN                               │
│              (Edge caching, static assets)               │
├─────────────────────────────────────────────────────────┤
│                   Application Cache                      │
│                (Redis, in-memory cache)                  │
├─────────────────────────────────────────────────────────┤
│                   Database Cache                         │
│              (Query cache, buffer pool)                  │
└─────────────────────────────────────────────────────────┘

Sample Prompts#

Task	Prompt
Audit	"Audit Core Web Vitals for our landing page"
Bundle	"Reduce JavaScript bundle size by 50%"
Caching	"Design a caching strategy for product listings"
Database	"Optimize queries for the dashboard endpoint"
Load test	"Create k6 load tests for our checkout API"

Configuration#

// bootspring.config.js
module.exports = {
  agents: {
    customInstructions: {
      'performance-expert': `
        - Measure before optimizing
        - Focus on user-perceived performance
        - Consider trade-offs (complexity vs. gains)
        - Recommend monitoring solutions
        - Provide benchmarks and targets
      `,
    },
  },
};

Frontend Expert - UI performance
Backend Expert - API optimization
Database Expert - Query performance