Web Performance Audit

Web Performance Audit

Conduct comprehensive performance audits and implement optimizations.

Core Web Vitals Targets

Performance Measurement

// Using web-vitals libraryimport { 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