Web Performance Audit

Conduct comprehensive performance audits and implement optimizations.

Core Web Vitals Targets

Metric Good Needs Improvement Poor

LCP (Largest Contentful Paint) <2.5s 2.5-4s

4s

FID (First Input Delay) <100ms 100-300ms

300ms

CLS (Cumulative Layout Shift) <0.1 0.1-0.25

0.25

INP (Interaction to Next Paint) <200ms 200-500ms

500ms

Performance Measurement

// Using web-vitals library import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, id }) { console.log({ name, value, id }); }

getCLS(sendToAnalytics); getFID(sendToAnalytics); getLCP(sendToAnalytics); getTTFB(sendToAnalytics);

Lighthouse Automation

const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher');

async function runAudit(url) { const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] }); const result = await lighthouse(url, { port: chrome.port, onlyCategories: ['performance'] });

await chrome.kill(); return result.lhr; }

Optimization Strategies

Quick Wins (1-2 days)

• Enable gzip/brotli compression

• Minify CSS/JS

• Defer non-critical scripts

• Optimize images (WebP, lazy loading)

Medium Effort (1-2 weeks)

• Implement code splitting

• Add service worker caching

• Preload critical resources

• Eliminate render-blocking resources

Long-term (1-3 months)

• Architecture improvements

• CDN optimization

• Database query optimization

Performance Budget

{ "timings": [ { "metric": "first-contentful-paint", "budget": 1500 }, { "metric": "largest-contentful-paint", "budget": 2500 } ], "resourceSizes": [ { "resourceType": "script", "budget": 150 }, { "resourceType": "image", "budget": 300 } ] }

Audit Checklist

• Measure baseline Core Web Vitals

• Run Lighthouse audit (mobile & desktop)

• Analyze real user metrics (RUM)

• Identify largest contentful element

• Check for layout shifts

• Review JavaScript bundle size

• Test on slow 3G connection

• Set performance budget

• Configure monitoring alerts