Web Performance Optimization
FreeEnhance your website's speed and efficiency.
Free · Opens the source repo
What Web Performance Optimization does
Web Performance Optimization is a systematic skill designed to improve the speed and efficiency of web applications. By following a structured approach—Measure, Identify, Prioritize, Implement, and Verify—developers can tackle various performance issues that affect user experience. This skill focuses on optimizing bundle sizes, images, caching strategies, lazy loading, and overall page speed, making it essential for any web developer or designer looking to enhance their site's performance metrics.
The skill emphasizes key performance indicators such as Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), and Time to First Byte (TTFB). Each metric is categorized into thresholds that help users quickly identify areas needing improvement. For instance, an LCP under 2.5 seconds is optimal, while anything over 4 seconds is considered poor. This clear categorization allows developers to prioritize fixes based on their impact on user experience.
Included in the skill are practical strategies for quick wins, such as optimizing images and fonts, deferring third-party scripts, and implementing critical CSS. The skill also provides guidance on bundle analysis using tools like Webpack and Vite, helping developers identify and replace heavy packages with lighter alternatives. Additionally, caching headers are discussed to ensure that static assets are served efficiently, further enhancing load times.
Web Performance Optimization is particularly beneficial for developers facing slow site issues or those looking to improve their Lighthouse scores. It is not intended for Core Web Vitals-specific fixes or running Lighthouse audits, for which other specialized skills should be used. This makes it a focused tool for developers who need to address general performance concerns effectively.
When to use it
Use this skill when your website is experiencing performance issues, such as slow load times or high bundle sizes, and you want to improve user experience and SEO rankings.
When not to use it
This skill is not suitable for addressing specific Core Web Vitals issues or for running Lighthouse audits, as those require different tools.
What you can build with it
Improving Page Speed for E-commerce
Utilize this skill to optimize an e-commerce site that is experiencing slow load times, enhancing user experience and potentially increasing sales.
Reducing Bundle Size for a React App
Apply the skill to analyze and reduce the bundle size of a React application, improving load times and performance metrics.
Optimizing Images for a Blog
Use this skill to implement image optimization techniques on a blog, ensuring faster loading times and better user engagement.
How to install Web Performance Optimization
View source1. Install with the skills CLI
npx skills add tech-leads-club/agent-skills/perf-web-optimization --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by tech-leads-clubWeb 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'"
/>
3. Third-party Scripts (common INP killer)
<!-- Defer to user interaction -->
<script>
function loadThirdParty() {
// Load analytics, chat widgets, etc.
}
;['scroll', 'click', 'touchstart'].forEach((e) => addEventListener(e, loadThirdParty, { once: true, passive: true }))
setTimeout(loadThirdParty, 5000)
</script>
4. Critical CSS
Inline critical CSS in <head>, defer the rest:
<style>
/* critical styles */
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />
Bundle Analysis
# Webpack
npx webpack-bundle-analyzer dist/stats.json
# Vite
npx vite-bundle-visualizer
# Check package size before installing
npx bundlephobia <package-name>
Common heavy packages to replace:
moment(67KB) →date-fns(12KB) ordayjs(2KB)lodash(72KB) → cherry-pick imports or native methods
Code Splitting Patterns
// React lazy
const Chart = lazy(() => import('./Chart'))
// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false })
// Vite/Rollup manual chunks
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom']
}
}
}
}
Caching Headers
# Static assets (immutable hash in filename)
Cache-Control: public, max-age=31536000, immutable
# HTML (revalidate)
Cache-Control: no-cache
# API responses
Cache-Control: private, max-age=0, must-revalidate
Measurement
For running audits, reading reports, and setting budgets, use the perf-lighthouse skill.
Checklist
Images
- Modern formats (WebP/AVIF)
- Responsive
srcset -
width/heightattributes -
loading="lazy"below fold -
fetchpriority="high"on LCP image
JavaScript
- Bundle < 200KB gzipped
- Code splitting by route
- Third-party scripts deferred
- No unused dependencies
CSS
- Critical CSS inlined
- Non-critical CSS deferred
- No unused CSS
Fonts
-
font-display: swap - Preconnect to font origin
- Subset if possible
Detailed Examples
For in-depth optimization patterns, see:
- references/core-web-vitals.md - Fixing LCP, CLS, INP issues
- references/bundle-optimization.md - Reducing JS bundle size
- references/image-optimization.md - Image formats, responsive images, sharp scripts
Frequently asked questions about Web Performance Optimization
Similar skills
Heap Snapshot Analysis
Investigate V8 heap snapshots for memory issues.
VS Code Performance Workflow
Automate performance investigations in VS Code.
Memory Leak Audit
Prevent memory leaks with effective coding patterns.
CPU Profile Analysis
Analyze V8 and Chrome performance profiles for optimization.
Chat Performance Testing
Benchmark and validate chat UI performance in VS Code.
Vercel React Best Practices
Optimize your React and Next.js applications for performance.