mcpField
W
web-performance-audit

web-performance-audit

github.com/secondskyTesting & quality240532 installsUpdated 5w ago
Repository

About web-performance-audit

web-performance-audit is a skill for auditing and improving web performance. It combines Core Web Vitals targets, measurement examples, Lighthouse automation guidance, optimization strategies, and performance budgets.

Key features

  1. 01Core Web Vitals targets
  2. 02Web performance measurement examples
  3. 03Lighthouse audit automation
  4. 04Optimization strategies by effort
  5. 05Performance budget examples
  6. 06Audit checklist

Use cases

  1. 01Establishing a performance baseline
  2. 02Finding page speed issues
  3. 03Planning optimizations by effort
  4. 04Setting resource and timing budgets

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/secondsky/claude-skills --skill web-performance-audit

After installing, type/web-performance-auditin Claude Code to confirm it loaded.

Details

From the project README

Web Performance Audit

Conduct comprehensive performance audits and implement optimizations.

Core Web Vitals Targets

MetricGoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)<2.5s2.5-4s>4s
FID (First Input Delay)<100ms100-300ms>300ms
CLS (Cumulative Layout Shift)<0.10.1-0.25>0.25
INP (Interaction to Next Paint)<200ms200-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

Comments

Markdown supported