Performance Audit

Measure and optimize web performance using Playwright MCP.

Core Web Vitals

Metric	Good	Needs Work	Poor
LCP (Largest Contentful Paint)	≤2.5s	≤4.0s	>4.0s
INP (Interaction to Next Paint)	≤200ms	≤500ms	>500ms
CLS (Cumulative Layout Shift)	≤0.1	≤0.25	>0.25

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

Resource	Budget
Total page size	<1.5MB
JavaScript	<300KB
CSS	<100KB
Images	<500KB
Fonts	<100KB
Time to Interactive	<3.5s

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