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 PRs | Per PR | Prevent regressions |
| Monitor team's CWV dashboard | Daily | Early detection |
| Run bundle analysis | Weekly | Track bundle growth |
| Performance retrospective | Monthly | Continuous improvement |
| Knowledge sharing session | Quarterly | Team education |
| Update performance budgets | Quarterly | Tighten 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