Skip to content
cccskills
FreePublished on GitHub

web-performance-audit

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.

The English summary is being prepared. Showing the original description.

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

Secure API authentication with JWT, OAuth 2.0, API keys. Use for authentication systems, third-party integrations, service-to-service communication, or encountering token management, security headers, auth flow errors.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

Creates comprehensive API changelogs documenting breaking changes, deprecations, and migration strategies for API consumers. Use when managing API versions, communicating breaking changes, or creating upgrade guides.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

Verifies API contracts between services using consumer-driven contracts, schema validation, and tools like Pact. Use when testing microservices communication, preventing breaking changes, or validating OpenAPI specifications.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

Implements standardized API error responses with proper status codes, logging, and user-friendly messages. Use when building production APIs, implementing error recovery patterns, or integrating error monitoring services.

The English summary is being prepared. Showing the original description.

secondsky/claude-skills236Updated Oct 20, 2026

See all skills by secondsky

Report a problem with this skill