Performance Testing

Purpose

Provide a systematic performance testing and optimization methodology across database, API, and frontend layers. This skill identifies bottlenecks, validates performance budgets, and guides optimization efforts with measurable before-and-after metrics.

When to Use

• •Before production deployment
• •When adding performance-critical features
• •After database schema changes
• •When users report slowness
• •As part of regular performance reviews
• •When optimizing Core Web Vitals or load times

Process

Step 1: Database Performance Testing

Objective: Identify and optimize slow database queries.

Actions:

1. •Enable query logging in the development environment
2. •Identify slow queries (> 100ms)
3. •Run EXPLAIN / EXPLAIN ANALYZE on slow queries
4. •Check for common issues:
   • •N+1 query problems
   • •Missing indexes
   • •Full table scans
   • •Unnecessary SELECT *
   • •Lack of pagination
5. •Optimize queries:
   • •Add indexes where needed
   • •Use eager loading to eliminate N+1
   • •Implement pagination on large datasets
   • •Select only required columns

Example Test:

import { describe, it, expect } from 'vitest';

describe('Database Performance', () => {
  it('should fetch records with relations in < 100ms', async () => {
    const start = performance.now();

    await db.orders.findMany({
      limit: 100,
      with: { customer: true, items: true },
    });

    const duration = performance.now() - start;
    expect(duration).toBeLessThan(100);
  });

  it('should not exhibit N+1 query patterns', async () => {
    const queryLog: string[] = [];
    db.on('query', (q) => queryLog.push(q));

    const orders = await db.orders.findMany({ limit: 10, with: { customer: true } });

    // Should use a JOIN or a single additional query, not 10 extra queries
    expect(queryLog.length).toBeLessThanOrEqual(2);
  });
});

Targets:

• •All queries < 100ms (p95)
• •No N+1 patterns detected
• •Indexes used effectively
• •Pagination on datasets > 100 rows

Step 2: API Performance Testing

Objective: Ensure API endpoints meet response time targets.

Actions:

1. •Measure response times:
   • •GET requests < 200ms (p95)
   • •POST/PUT requests < 300ms (p95)
   • •Complex queries < 500ms (p95)
2. •Test under load:
   • •Concurrent requests
   • •Sustained load over time
   • •Spike testing
3. •Monitor key metrics:
   • •Response time (p50, p95, p99)
   • •Throughput (requests/second)
   • •Error rate
   • •CPU and memory usage

Example Load Test (Artillery):

config:
  target: 'http://localhost:3000'
  phases:
    - duration: 60
      arrivalRate: 20
      name: Warm up
    - duration: 120
      arrivalRate: 50
      name: Sustained load
    - duration: 30
      arrivalRate: 200
      name: Spike
  ensure:
    p95: 200
    p99: 500

scenarios:
  - name: Browse and purchase
    flow:
      - get:
          url: '/api/products'
      - think: 2
      - get:
          url: '/api/products/{{ $randomString() }}'
      - think: 3
      - post:
          url: '/api/orders'
          json:
            productId: '{{ $randomString() }}'
            quantity: 1

Example K6 Test:

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

export const options = {
  stages: [
    { duration: '1m', target: 50 },
    { duration: '3m', target: 50 },
    { duration: '1m', target: 0 },
  ],
  thresholds: {
    http_req_duration: ['p(95)<200'],
    http_req_failed: ['rate<0.01'],
  },
};

export default function () {
  const res = http.get('http://localhost:3000/api/products');
  check(res, { 'status is 200': (r) => r.status === 200 });
  sleep(1);
}

Step 3: Frontend Performance Testing

Objective: Validate Core Web Vitals and rendering performance.

Actions:

1. •Measure Core Web Vitals:
   • •LCP (Largest Contentful Paint) < 2.5s
   • •FID (First Input Delay) < 100ms
   • •CLS (Cumulative Layout Shift) < 0.1
   • •INP (Interaction to Next Paint) < 200ms
2. •Measure page load metrics:
   • •TTFB (Time to First Byte) < 600ms
   • •FCP (First Contentful Paint) < 1.8s
   • •TTI (Time to Interactive) < 3.5s
3. •Analyze bundle sizes:
   • •Main bundle < 200KB gzipped
   • •Total JavaScript < 500KB gzipped
4. •Test rendering performance:
   • •Component render time < 16ms (60fps)
   • •Smooth scrolling and animations

Example Test:

import { test, expect } from '@playwright/test';

test('Homepage meets Core Web Vitals', async ({ page }) => {
  await page.goto('/');

  const lcp = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((list) => {
        const entries = list.getEntries();
        resolve(entries[entries.length - 1].startTime);
      }).observe({ entryTypes: ['largest-contentful-paint'] });
    });
  });

  expect(lcp).toBeLessThan(2500);
});

Step 4: Bottleneck Identification

Objective: Find and prioritize performance issues.

1. •Analyze performance profiles from all layers
2. •Categorize bottlenecks:
   • •Database: slow queries, N+1, missing indexes
   • •API: blocking operations, inefficient algorithms
   • •Frontend: large bundles, unnecessary re-renders
   • •Network: large payloads, missing caching, no compression
3. •Prioritize by user impact:
   • •High: Affects > 50% of users, > 1s delay
   • •Medium: Affects 20-50% of users, 500ms-1s delay
   • •Low: Affects < 20% of users, < 500ms delay

Step 5: Optimization and Regression Testing

After implementing optimizations:

1. •Re-run the full test suite to verify no regressions
2. •Re-measure performance metrics
3. •Compare before-and-after results
4. •Document improvements with concrete numbers

Performance Budgets

{
  "database": {
    "queryTime": { "p95": 100, "unit": "ms" },
    "n1Queries": 0
  },
  "api": {
    "responseTime": { "p95": 200, "unit": "ms" },
    "throughput": { "min": 1000, "unit": "req/s" },
    "errorRate": { "max": 0.1, "unit": "%" }
  },
  "frontend": {
    "lcp": { "max": 2500, "unit": "ms" },
    "fid": { "max": 100, "unit": "ms" },
    "cls": { "max": 0.1 },
    "bundleSize": { "max": 500, "unit": "KB gzipped" }
  }
}

Recommended Tools

Database

• •Query logging and EXPLAIN ANALYZE
• •pg_stat_statements (PostgreSQL)
• •Slow query log analysis

API

• •Artillery -- load testing
• •K6 -- performance scripting
• •autocannon -- HTTP benchmarking

Frontend

• •Lighthouse -- web performance audits
• •Chrome DevTools Performance panel
• •WebPageTest -- real-world testing
• •Bundle Analyzer -- JavaScript composition

Best Practices

1. •Establish baselines -- measure before optimizing
2. •Set budgets -- define acceptable performance levels
3. •Test regularly -- include performance checks in CI/CD
4. •Optimize strategically -- focus on high-impact bottlenecks first
5. •Measure impact -- quantify improvements with real data
6. •Avoid premature optimization -- profile before changing code
7. •Test realistically -- use production-like data volumes
8. •Monitor trends -- track performance over time, not just snapshots
9. •Test on real devices -- not just development machines
10. •Enforce budgets in CI -- fail builds that exceed performance thresholds