Performance

A solid reference for web performance optimization that covers the fundamentals you actually need. It walks through critical rendering path optimizations, image format selection (AVIF vs WebP vs PNG), font loading strategies, and JavaScript code splitting patterns. The performance budgets are reasonable (1.5MB total, 300KB JS) and the before/after guidance helps you prioritize work by Core Web Vitals impact. Includes practical examples for responsive images with picture elements, cache headers, debouncing, and avoiding layout thrashing. Good for speed audits or when someone says their site is slow and you need to systematically work through the common culprits.

skills.sh installs: 213
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill performance --agent claude-code

Installs into .claude/skills of the current project.

Files

Performance optimization

Deep performance optimization based on Lighthouse performance audits. Focuses on loading speed, runtime efficiency, and resource optimization.

How it works

Identify performance bottlenecks in code and assets
Prioritize by impact on Core Web Vitals
Provide specific optimizations with code examples
Measure improvement with before/after metrics

Performance budget

Resource	Budget	Rationale
Total page weight	< 1.5 MB	3G loads in ~4s
JavaScript (compressed)	< 300 KB	Parsing + execution time
CSS (compressed)	< 100 KB	Render blocking
Images (above-fold)	< 500 KB	LCP impact
Fonts	< 100 KB	FOIT/FOUT prevention
Third-party	< 200 KB	Uncontrolled latency

Critical rendering path

Server response

TTFB < 800ms. Time to First Byte should be fast. Use CDN, caching, and efficient backends.
Enable compression. Gzip or Brotli for text assets. Brotli preferred (15-20% smaller).
HTTP/2 or HTTP/3. Multiplexing reduces connection overhead.
Edge caching. Cache HTML at CDN edge when possible.