Perf Web Optimization

A systematic approach to making websites faster, covering the usual suspects: bundle size, images, caching, lazy loading, and code splitting. You get concrete thresholds (LCP under 2.5s, bundle under 200KB gzipped), plus the quick wins that actually move the needle like eager loading your hero image with fetchpriority="high" and deferring third-party scripts until user interaction. The checklist format makes it easy to audit what you've missed. It knows its boundaries too, pushing you to the core-web-vitals skill for metric-specific fixes and perf-lighthouse for running audits. Good for when your site feels sluggish and you need a structured way to attack the problem rather than guessing.

skills.sh installs: 278
GitHub stars: 7.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tech-leads-club/agent-skills --skill perf-web-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

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)

<!-- 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)

<!-- 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'"
/>