Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Conducts web performance audits with Core Web Vitals (LCP, FID, CLS, INP), Lighthouse automation, bottleneck identification, and optimization recommendations for page load times and UX issues.
npx claudepluginhub secondsky/claude-skills --plugin web-performance-auditHow this skill is triggered — by the user, by Claude, or both
Slash command
/web-performance-audit:web-performance-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Conduct comprehensive performance audits and implement optimizations.
Diagnoses web performance issues, fixes Core Web Vitals (LCP, INP, CLS), optimizes bundles, assets, and render performance. Use for slow pages or dropping traffic due to speed.
Measures LCP, CLS, and INP from real user data (CrUX), traces root causes with Chrome DevTools, and guides performance optimization and budgets.
Runs Lighthouse audits on web projects via dev server URLs, reports performance scores and Core Web Vitals like LCP/CLS, identifies root causes, and auto-fixes issues such as render-blocking resources, image optimization, and unused JS/CSS.
Share bugs, ideas, or general feedback.
Conduct comprehensive performance audits and implement optimizations.
| 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 |
// 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);
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;
}
{
"timings": [
{ "metric": "first-contentful-paint", "budget": 1500 },
{ "metric": "largest-contentful-paint", "budget": 2500 }
],
"resourceSizes": [
{ "resourceType": "script", "budget": 150 },
{ "resourceType": "image", "budget": 300 }
]
}