playbooks

home / skills / secondsky / claude-skills / web-performance-audit

web-performance-audit skill

/plugins/web-performance-audit/skills/web-performance-audit

This skill performs comprehensive web performance audits and delivers actionable optimizations to improve Core Web Vitals and UX.

npx playbooks add skill secondsky/claude-skills --skill web-performance-audit

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.5 KB
---
name: web-performance-audit
description: Web performance audits with Core Web Vitals, bottleneck identification, optimization recommendations. Use for page load times, performance reviews, UX optimization, or encountering LCP, FID, CLS issues, resource blocking, render delays.
license: MIT
---

# 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

```javascript
// 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

```javascript
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

```json
{
  "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

Overview

This skill performs thorough web performance audits focused on Core Web Vitals and practical optimization recommendations. It helps teams find bottlenecks, measure real and lab metrics, and produce prioritized fixes to improve load times and user experience. The output is actionable: checklists, budgets, and concrete implementation steps for quick wins through long-term improvements.

How this skill works

The audit collects lab and real-user metrics (LCP, FID/INP, CLS, TTFB) and runs automated Lighthouse reports for mobile and desktop. It inspects resources and render paths to detect render-blocking assets, large bundles, image issues, and layout shift causes. The skill then maps findings to a prioritized plan: quick fixes, medium-effort changes, and long-term architecture recommendations.

When to use it

  • Before launching a new page or feature to ensure Core Web Vitals readiness
  • When LCP, FID/INP, or CLS exceed good thresholds or degrade over time
  • During performance regressions after deployments
  • For regular performance reviews and setting a performance budget
  • When diagnosing slow first content, heavy JavaScript, or layout shifts

Best practices

  • Measure both lab (Lighthouse) and field (web-vitals/RUM) metrics for full context
  • Start with quick wins: compression, minification, image formats, defer non-critical scripts
  • Set a clear performance budget for timings and resource sizes and enforce it in CI
  • Test under throttled network and CPU conditions and on real devices
  • Prioritize fixes that improve Largest Contentful Paint and reduce layout shifts first

Example use cases

  • Run a baseline audit before a marketing campaign to ensure fast landing pages
  • Diagnose why LCP spikes on slow networks and identify the largest contentful element
  • Shrink JavaScript bundle size by applying code splitting and tree-shaking
  • Implement service worker caching and resource preloading to cut repeat load times
  • Create alerting for Core Web Vitals regressions after releases

FAQ

What Core Web Vitals targets should I aim for?

Aim for LCP <2.5s, FID <100ms or INP <200ms, and CLS <0.1; values outside these ranges need improvement.

Should I trust Lighthouse or real-user metrics?

Use both: Lighthouse finds lab issues and regressions; real-user metrics (web-vitals/RUM) show actual user impact and variability.