perf-web-optimization
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
npx skills add tech-leads-club/agent-skills --skill perf-web-optimization --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Performance Optimization Systematic approach: Measure → Identify → Prioritize → Implement → Verify. ## Target Metrics | Metric | Good | Needs Work | Poor | | ------ | ------- | ---------- | ------- | | LCP | < 2.5s | 2.5-4s | > 4s | | INP | < 200ms | 200-500ms | > 500ms | | CLS | < 0.1 | 0.1-0.25 | > 0.25 | | TTFB | < 800ms | 800ms-1.8s | > 1.8s | ## Quick Wins ### 1. Images (usually biggest impact on LCP) ```html <!-- Hero/LCP image: eager + high priority --> <img src="/hero.webp" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high" decoding="async" /> <!-- Below fold: lazy load --> <img src="/product.webp" alt="Product" width="400" height="300" loading="lazy" decoding="async" /> ``` Always set `width` and `height` to prevent CLS. ### 2. Fonts (common LCP/CLS culprit) ```html <!-- Preconnect to font origin --> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <!-- Non-blocking font load --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap" media="print" onload="this.media='all'" /> ``` ### 3. Third-party Scripts (common INP killer) ```html <!-- Defer to user interaction --> <script> function lo
- Target Metrics
- Quick Wins
- 1. Images (usually biggest impact on LCP)
- 2. Fonts (common LCP/CLS culprit)
- 3. Third-party Scripts (common INP killer)
- 4. Critical CSS
- Bundle Analysis
- Code Splitting Patterns
- Caching Headers
- Measurement
- Checklist
- Images
- JavaScript
- CSS
Webpack npx webpack-bundle-analyzer dist/stats.json Vite npx vite-bundle-visualizer Check package size before installing npx bundlephobia <package-name>
What does the perf-web-optimization skill do?
Optimize web performance: bundle size, images, caching, lazy loading, and overall page speed. Use when site is slow, reducing bundle size, fixing layout shifts, improving Time to Interactive, or optimizing for Lighthouse scores. Triggers on: web performance, bundle size, page speed, slow site, lazy loading. Do NOT use for Core Web Vitals-specific fixes (use core-web-vitals), running Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).
How do I install it?
Run `npx skills add tech-leads-club/agent-skills --skill perf-web-optimization --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From tech-leads-club/agent-skills, a repository with 4,983 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.