Web Performance Audit

A solid reference for diagnosing slow page loads and fixing Core Web Vitals issues. You get benchmarks for LCP, FID, CLS, and INP, plus code snippets for measuring them with web-vitals and automating Lighthouse audits. The optimization strategies are organized by effort level, from quick compression wins to longer term architecture changes. The performance budget JSON and audit checklist are practical for keeping teams accountable. Nothing groundbreaking here, but it's a good starting template when you need to explain to stakeholders why the homepage feels sluggish or when Google Search Console flags your CLS score.

skills.sh installs: 542
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill web-performance-audit --agent claude-code

Installs into .claude/skills of the current project.

Files

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;
}

SKILL.md on GitHub