TechLead
Lesson 21 of 22
5 min read
Performance Engineering

Performance Culture

Build a performance-first engineering culture with ownership, education, processes, and performance champions

Why Culture Matters for Performance

Technical solutions alone are not enough to maintain great performance. Without a culture that values performance, optimizations degrade over time as new features are added, dependencies accumulate, and teams grow. A performance culture means every engineer considers the performance impact of their changes, performance budgets are enforced in CI, and the entire organization treats speed as a product feature.

Pillars of Performance Culture

  • Visibility: Performance metrics are visible to everyone — dashboards, reports, PR comments
  • Ownership: Teams own performance metrics for their features and pages
  • Automation: Budgets enforced in CI, alerts on regressions, automated testing
  • Education: Regular workshops, documentation, and shared knowledge on performance
  • Celebration: Recognize and celebrate performance improvements

Performance Review Process

// PR checklist automation for performance review
// .github/workflows/perf-review.yml content:
// This workflow runs on every PR and posts a performance summary

// scripts/perf-review.ts — Generate performance review for PRs
import * as fs from 'fs';

interface PerfReviewResult {
  bundleSizeDiff: { before: number; after: number; diff: number };
  newDependencies: string[];
  clientComponents: number;
  imageOptimization: boolean;
  cacheHeaders: boolean;
}

function generatePerfReview(baseBranch: string): PerfReviewResult {
  // Analyze bundle size changes
  const currentBuildStats = JSON.parse(
    fs.readFileSync('.next/build-manifest.json', 'utf-8')
  );

  const pages = Object.keys(currentBuildStats.pages);
  let totalChunks = 0;
  pages.forEach(page => {
    totalChunks += currentBuildStats.pages[page].length;
  });

  return {
    bundleSizeDiff: { before: 0, after: totalChunks, diff: 0 },
    newDependencies: detectNewDependencies(),
    clientComponents: countClientComponents(),
    imageOptimization: checkImageOptimization(),
    cacheHeaders: checkCacheHeaders(),
  };
}

function detectNewDependencies(): string[] {
  // Compare package.json with base branch
  // Return list of new dependencies added in this PR
  const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
  return Object.keys(pkg.dependencies || {});
}

function countClientComponents(): number {
  // Count files with 'use client' directive
  let count = 0;
  function walk(dir: string) {
    if (!fs.existsSync(dir)) return;
    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
      const fullPath = `${dir}/${entry.name}`;
      if (entry.isDirectory() && !entry.name.startsWith('.') && entry.name !== 'node_modules') {
        walk(fullPath);
      } else if (entry.name.match(/.(tsx|ts|jsx|js)$/)) {
        const content = fs.readFileSync(fullPath, 'utf-8');
        if (content.startsWith("'use client'") || content.startsWith('"use client"')) {
          count++;
        }
      }
    }
  }
  walk('app');
  return count;
}

function checkImageOptimization(): boolean {
  // Verify next/image is used instead of plain img tags
  return true; // simplified
}

function checkCacheHeaders(): boolean {
  // Check that API routes include cache headers
  return true; // simplified
}

Performance Champions Program

A Performance Champion is an engineer on each team who serves as the primary advocate for performance. They review performance-critical PRs, maintain team-specific budgets, lead performance retrospectives, and stay current on best practices to share with their team.

Performance Champion Responsibilities

Activity Frequency Impact
Review performance-critical PRsPer PRPrevent regressions
Monitor team's CWV dashboardDailyEarly detection
Run bundle analysisWeeklyTrack bundle growth
Performance retrospectiveMonthlyContinuous improvement
Knowledge sharing sessionQuarterlyTeam education
Update performance budgetsQuarterlyTighten standards

Performance Retrospective Template

// Monthly performance retrospective data gathering
interface PerformanceRetro {
  period: string;
  coreWebVitals: {
    lcp: { p75: number; trend: 'improving' | 'stable' | 'degrading' };
    inp: { p75: number; trend: 'improving' | 'stable' | 'degrading' };
    cls: { p75: number; trend: 'improving' | 'stable' | 'degrading' };
  };
  bundleSize: {
    total: number;
    delta: number;
    newDependencies: string[];
  };
  incidents: Array<{
    date: string;
    description: string;
    impact: string;
    resolution: string;
  }>;
  wins: string[];
  actionItems: Array<{
    task: string;
    owner: string;
    deadline: string;
  }>;
}

// Example retrospective
const retroExample: PerformanceRetro = {
  period: 'March 2026',
  coreWebVitals: {
    lcp: { p75: 2100, trend: 'improving' },
    inp: { p75: 180, trend: 'stable' },
    cls: { p75: 0.05, trend: 'improving' },
  },
  bundleSize: {
    total: 245, // KB gzipped
    delta: -12, // Reduced by 12KB
    newDependencies: ['date-fns'],
  },
  incidents: [
    {
      date: '2026-03-15',
      description: 'LCP regression from unoptimized hero image',
      impact: 'LCP p75 spiked to 4.2s for 2 hours',
      resolution: 'Added priority prop and WebP format',
    },
  ],
  wins: [
    'Reduced total JS by 12KB through lodash removal',
    'Achieved 95+ Lighthouse score on all key pages',
    'Implemented streaming SSR on dashboard — 40% faster TTFB',
  ],
  actionItems: [
    { task: 'Implement font subsetting', owner: 'Alice', deadline: '2026-04-15' },
    { task: 'Set up RUM alerting for INP', owner: 'Bob', deadline: '2026-04-10' },
    { task: 'Audit third-party scripts', owner: 'Carol', deadline: '2026-04-20' },
  ],
};

Building Performance Culture

  • Make it visible: Display performance dashboards on team monitors and in Slack
  • Automate enforcement: CI checks prevent regressions without manual review
  • Assign champions: Every team has a performance advocate who drives improvements
  • Educate continuously: Regular workshops and knowledge sharing on performance techniques
  • Celebrate wins: Recognize engineers who improve performance metrics
  • Include in planning: Performance work gets dedicated time in every sprint

Continue Learning