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

• Navigate: playwright_navigate to URL

• Measure: playwright_evaluate performance API

• Screenshot: Capture above-fold content

• Analyze: Check resource loading

• 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