Skip to main content

Performance Monitoring

Kingisoovitaja prioritizes >60 FPS performance with comprehensive monitoring at every layer.

Performance Targets​

Critical Metrics​

Monitoring Stack​

Frontend Performance​

Tools:

  • React DevTools Profiler - Component render times
  • Chrome Performance - Frame rate analysis
  • Web Vitals - Core web vitals tracking

Metrics Captured:

{
  // Core Web Vitals
  LCP: number,    // Largest Contentful Paint (<2.5s)
  FID: number,    // First Input Delay (<100ms)
  CLS: number,    // Cumulative Layout Shift (<0.1)
  
  // Custom Metrics
  TTFC: number,   // Time to First Chunk (<800ms)
  TTI: number,    // Time to Interactive (<3s)
  FPS: number     // Frame rate (>60)
}

Backend Performance​

Tools:

  • Custom timing middleware
  • OpenTelemetry traces
  • Convex insights

Metrics Captured:

{
  contextExtractionMs: number,
  multiSearchMs: number,
  funnelMs: number,
  rerankMs: number,
  diversityMs: number,
  generationMs: number,
  totalPipelineMs: number
}

Performance Optimization​

Parallel Execution​

Impact: dramatic improvement

Before (Sequential):
Context (1900ms) → Search (1200ms) → Total: 3100ms

After (Parallel):
Context (900ms non-blocking) + Search (1200ms) → Total: 800ms

Caching Strategies​

Cache Layers:

  1. Context extraction: 15% hit rate, saves ~850ms
  2. Search results: 8% hit rate, saves ~1200ms
  3. System prompts: 95% hit rate, saves ~5ms

Database Optimization​

// Indexed queries
await convex.query(api.search.byHexId, { hexId });
// ~25ms vs very fast unindexed

// Batch operations
await Promise.all(
  ids.map(id => convex.query(api.products.get, { id }))
);
// Parallel fetching

Frame Rate Optimization​

Motion.dev Configuration​

Target: 60 FPS (16.67ms per frame)

import { animate } from 'motion';

// GPU-accelerated transforms
animate(element, {
  transform: 'translateY(0px)',
  opacity: 1
}, {
  duration: 0.3,
  easing: 'ease-out'
});

// Avoid:
// - JavaScript-driven animations
// - Large DOM reflows
// - Synchronous operations in render

React Optimization​

// Memoization
const MemoizedComponent = React.memo(Component);

// useMemo for expensive computations
const sortedProducts = useMemo(
  () => products.sort((a, b) => b.score - a.score),
  [products]
);

// useCallback for stable references
const handleClick = useCallback(
  () => doSomething(),
  [dependency]
);

Benchmarking​

Critical Path Benchmarks​

describe('Performance Benchmarks', () => {
  it('context extraction <1s', async () => {
    const iterations = 100;
    const timings = [];
    
    for (let i = 0; i < iterations; i++) {
      const start = performance.now();
      await extractContext('test query');
      timings.push(performance.now() - start);
    }
    
    const p95 = percentile(timings, 95);
    expect(p95).toBeLessThan(1000);
  });
});

Percentile Tracking​

P50 (Median): 700ms
P75: 850ms
P95: 950ms  ← Alert if >1000ms
P99: 1100ms

Performance Regression Detection​

// Before change
const baselineMetrics = {
  ttfc: 750ms,
  contextExtraction: 880ms,
  search: 1150ms
};

// After change
const newMetrics = runBenchmarks();

// Compare
if (newMetrics.ttfc > baselineMetrics.ttfc * 1.1) {
  throw new Error('Performance regression: TTFC increased by >10%');
}

Monitoring Dashboard​

Real-time Metrics​

Key Dashboards​

  1. User Experience

    • TTFC over time
    • FPS distribution
    • Error rates

  2. Backend Performance

    • Pipeline phase timings
    • Database query latency
    • LLM API response times

  3. Resource Usage

    • CPU utilization
    • Memory consumption
    • Network bandwidth

Alert Rules​

const PERFORMANCE_ALERTS = {
  // Critical (immediate action)
  TTFC_P95_CRITICAL: {
    threshold: 2000,  // >2s
    severity: 'critical',
    action: 'Page engineering immediately'
  },
  
  // Warning (investigate)
  TTFC_P95_WARNING: {
    threshold: 1200,  // >1.2s
    severity: 'warning',
    action: 'Review within 24h'
  },
  
  // Info (track trend)
  FPS_DROPS: {
    threshold: 55,    // &lt;55 FPS
    severity: 'info',
    action: 'Log for analysis'
  }
};

Optimization Checklist​

Code Level​

  • No synchronous I/O in hot paths
  • Computations memoized
  • Components properly memoized
  • Event handlers debounced/throttled
  • Large lists virtualized

Network Level​

  • API responses cached
  • GraphQL queries optimized
  • Images lazy-loaded
  • Assets compressed (gzip/brotli)
  • CDN utilized

Rendering Level​

  • CSS animations use transforms
  • No layout thrashing
  • Requestanimation frame for updates
  • Smooth scrolling enabled
  • Motion.dev for all animations