name: performance-audit
description: Web performance testing via Playwright MCP - Core Web Vitals, Lighthouse
requires_mcp: playwright
integrates_with:
- playwright-automation
- react-best-practices

Performance Audit

Measure and optimize web performance using Playwright MCP.

Core Web Vitals

Quick Audit via Playwright

// Run via playwright_evaluate
const performance = window.performance;
const timing = performance.timing;
const paintEntries = performance.getEntriesByType('paint');
const lcpEntries = performance.getEntriesByType('largest-contentful-paint');

return {
  ttfb: timing.responseStart - timing.requestStart,
  fcp: paintEntries.find(e => e.name === 'first-contentful-paint')?.startTime,
  lcp: lcpEntries[lcpEntries.length - 1]?.startTime,
  domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
  windowLoad: timing.loadEventEnd - timing.navigationStart
};

Common Issues & Fixes

1. Large Images

<!-- Bad -->
<img src="hero-4000x3000.jpg">

<!-- Good -->
<img src="hero.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy">

2. Render-Blocking Resources

<!-- Bad -->
<link rel="stylesheet" href="styles.css">

<!-- Good: Critical CSS inline -->
<style>/* critical styles */</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

3. Unoptimized JavaScript

<!-- Bad -->
<script src="bundle.js"></script>

<!-- Good -->
<script src="bundle.js" defer></script>

4. Layout Shifts

/* Bad: No dimensions */
img { }

/* Good: Reserve space */
img { aspect-ratio: 16/9; width: 100%; }

5. Too Many Requests

• Bundle CSS/JS files
• Use HTTP/2
• Implement caching headers

Audit Workflow

1. Navigate: playwright_navigate to URL
2. Measure: playwright_evaluate performance API
3. Screenshot: Capture above-fold content
4. Analyze: Check resource loading
5. Report: Metrics + recommendations

Playwright MCP Commands

Navigate to [URL] and measure page load performance

Get all network requests and their sizes

Find render-blocking resources

Measure time to first contentful paint

Check for layout shift issues

Performance Budget

Optimization Checklist

• [ ] Images optimized (WebP, proper sizing)
• [ ] JavaScript deferred/async
• [ ] CSS critical path inlined
• [ ] Fonts preloaded
• [ ] Caching headers set
• [ ] Gzip/Brotli compression
• [ ] CDN for static assets
• [ ] No layout shifts
• [ ] Lazy loading for below-fold
• [ ] Resource hints (preconnect, prefetch)

React/Next.js Specific

• Use next/image for automatic optimization
• Implement next/dynamic for code splitting
• Enable ISR for static pages
• Use React.lazy for component splitting
• Memoize expensive calculations