Performance Optimization Workflow | Bootspring Docs

The Performance Optimization workflow provides a structured approach to analyzing and improving application performance across all layers of your stack, from database queries to frontend rendering.

Overview#

Property	Value
Phases	4
Tier	Free
Typical Duration	6-10 days
Best For	Slow applications, scaling preparation, user experience improvement

Outcomes#

A successful performance optimization results in:

Performance regressions identified and resolved
Hotspots addressed across stack layers
Baseline metrics captured
Improvement report documented

Phases#

Phase 1: Analysis (1-2 days)#

Agents: performance-expert

Establish performance baselines and identify bottlenecks across the application.

Tasks:

Measure current performance metrics (Core Web Vitals)
Profile server response times
Identify slow endpoints and queries
Analyze bundle sizes and load times
Review caching strategies
Document baseline metrics

Key Metrics:

┌─────────────────────────────────────────────────────────┐
│                   Core Web Vitals                        │
├──────────────────┬──────────────────┬───────────────────┤
│ LCP              │ FID              │ CLS               │
│ Largest          │ First Input      │ Cumulative        │
│ Contentful Paint │ Delay            │ Layout Shift      │
│ < 2.5s           │ < 100ms          │ < 0.1             │
└──────────────────┴──────────────────┴───────────────────┘

Analysis Commands:

# Lighthouse audit
npx lighthouse https://your-app.com --output json

# Bundle analysis (Next.js)
ANALYZE=true npm run build

# Server profiling
bootspring agent invoke performance-expert "Profile API endpoints"

Phase 2: Database Optimization (2-3 days)#

Agents: database-expert, performance-expert

Optimize database queries, indexes, and data access patterns.

Tasks:

Identify slow queries using EXPLAIN ANALYZE
Add missing indexes for common query patterns
Optimize N+1 query problems
Implement query result caching
Review connection pooling configuration
Consider read replicas for heavy read workloads

Common Optimizations:

-- Identify slow queries (PostgreSQL)
SELECT query, calls, mean_time, total_time
FROM pg_stat_statements
ORDER BY mean_time DESC
LIMIT 10;

-- Add composite index for common queries
CREATE INDEX idx_orders_user_status
ON orders(user_id, status);

-- Analyze query execution
EXPLAIN ANALYZE
SELECT * FROM orders
WHERE user_id = 'xyz' AND status = 'pending';

Prisma Optimizations:

// Before: N+1 problem
const users = await prisma.user.findMany();
for (const user of users) {
  const orders = await prisma.order.findMany({
    where: { userId: user.id }
  });
}

// After: Eager loading
const users = await prisma.user.findMany({
  include: {
    orders: true
  }
});

Phase 3: Frontend Optimization (2-3 days)#

Agents: frontend-expert, performance-expert

Optimize client-side performance, rendering, and asset delivery.

Tasks:

Reduce JavaScript bundle size
Implement code splitting and lazy loading
Optimize images and media assets
Improve First Contentful Paint (FCP)
Reduce Cumulative Layout Shift (CLS)
Implement proper caching headers

Bundle Optimization:

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

// Route-based code splitting (automatic in Next.js App Router)
// Each route segment loads independently

Image Optimization:

import Image from 'next/image';

// Optimized image loading
<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1200}
  height={600}
  priority  // For above-the-fold images
  placeholder="blur"
  blurDataURL={blurDataUrl}
/>

Font Optimization:

// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // Prevent layout shift
  preload: true,
});

Phase 4: Infrastructure Optimization (1-2 days)#

Agents: devops-expert

Optimize server configuration, caching, and content delivery.

Tasks:

Configure CDN for static assets
Implement edge caching strategies
Optimize serverless function cold starts
Review server-side caching (Redis)
Configure proper cache headers
Set up performance monitoring

Caching Strategy:

┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   Browser   │───▶│    CDN      │───▶│   Origin    │
│   Cache     │    │   Cache     │    │   Server    │
└─────────────┘    └─────────────┘    └─────────────┘
     │                   │                   │
     ▼                   ▼                   ▼
  Static assets     Edge cached       Dynamic API
  max-age=1y        stale-while-      responses
                    revalidate

Cache Headers Example:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/api/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, s-maxage=60, stale-while-revalidate=300',
          },
        ],
      },
    ];
  },
};

Starting the Workflow#

# Start the workflow
bootspring workflow start performance-optimization

# Check current status
bootspring workflow status

# Advance to next phase
bootspring workflow next

# Mark a checkpoint complete
bootspring workflow checkpoint "Baseline captured"

Completion Signals#

Track progress with these checkpoints:

Baseline captured - Initial metrics documented
Improvement report documented - Final metrics and improvements recorded

Performance Budget#

Set targets before optimization:

Metric	Target	Critical
LCP	< 2.5s	< 4.0s
FID	< 100ms	< 300ms
CLS	< 0.1	< 0.25
TTI	< 3.5s	< 7.0s
Bundle Size	< 200KB	< 500KB
API P95	< 200ms	< 500ms

Monitoring Setup#

// lib/monitoring.ts
import * as Sentry from '@sentry/nextjs';

// Track Core Web Vitals
export function reportWebVitals(metric: {
  id: string;
  name: string;
  value: number;
}) {
  Sentry.captureMessage('Web Vital', {
    extra: {
      metric: metric.name,
      value: metric.value,
      id: metric.id,
    },
  });

  // Send to analytics
  if (window.gtag) {
    window.gtag('event', metric.name, {
      value: Math.round(metric.value),
      event_label: metric.id,
      non_interaction: true,
    });
  }
}

Tips for Success#

Measure first - Always establish baselines before optimizing
Prioritize by impact - Fix the biggest bottlenecks first
Test in production conditions - Dev performance differs from prod
Monitor continuously - Performance can regress over time
Set budgets - Define acceptable limits for your metrics