Optimization Workflows

# Run Lighthouse audit
npx lighthouse https://your-site.com --output html --output-path report.html

# Or use the web-quality-audit skill
# In your AI coding agent:
# "Audit my site for web quality issues"

# Compare before/after Lighthouse scores
npx lighthouse https://your-site.com --output json

# Check Core Web Vitals in the field
# Visit Google Search Console → Core Web Vitals report

# Lab testing (synthetic)
npx lighthouse https://your-site.com --only-categories=performance

# Field testing (real users)
# Check Chrome User Experience Report (CrUX)
# Or implement web-vitals library:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics({name, value, rating}) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: rating
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

// Add to your page temporarily
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Break up long tasks
async function processLargeArray(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => processItem(item));
    
    // Yield to main thread
    await new Promise(r => setTimeout(r, 0));
  }
}