Web Performance Audit

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

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.

Instructions onlySoftware Development

AI-generated overview

Guides web performance audits using Core Web Vitals, Lighthouse, optimization strategies, and performance budgets.

What it does: Provides a structured approach to auditing and improving web page performance. It defines Core Web Vitals targets for LCP, FID, CLS, and INP, shows measurement snippets using the web-vitals library and Lighthouse automation, and lists optimization strategies grouped by effort level. It also supplies a performance budget example and an audit checklist covering baseline measurement, bundle size review, slow-network testing, and monitoring alerts.
When to use it: Use when reviewing page load times, diagnosing LCP, FID, CLS, or INP problems, or planning performance optimization work. It also fits performance reviews and UX optimization efforts where render-blocking resources or render delays are suspected.
Requirements: No scripts are shipped; instructions only. Referenced tooling includes the web-vitals library, Lighthouse, chrome-launcher, and a headless Chrome browser, plus network access to audit live pages.

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 libraryimport { 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);

// Using web-vitals libraryimport { 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;}

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

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

Source and attribution

Source:secondsky/claude-skillsinplugins/web-performance-audit/skills/web-performance-auditat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Web Performance Audit

Web Performance Audit

Core Web Vitals Targets

Performance Measurement

Lighthouse Automation

Optimization Strategies

Quick Wins (1-2 days)

Medium Effort (1-2 weeks)

Long-term (1-3 months)

Performance Budget

Audit Checklist

Source and attribution

More from secondsky/claude-skills

Vulnerability Scanning

Web Performance Optimization

Threejs

Tailwind V4 Shadcn

Technical Specification

React Native Skills

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices