---

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

Copy// 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

Copy<!-- 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

Copy<!-- 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

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

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

4. Layout Shifts

Copy/* 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

CopyNavigate 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