Agent skill
web-performance-optimization
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/web-performance-optimization-michael-bodo-lt-mission-control
SKILL.md
Web Performance Optimization
Overview
Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.
When to Use This Skill
- Use when website or app is loading slowly
- Use when optimizing for Core Web Vitals (LCP, FID, CLS)
- Use when reducing JavaScript bundle size
- Use when improving Time to Interactive (TTI)
- Use when optimizing images and assets
- Use when implementing caching strategies
- Use when debugging performance bottlenecks
- Use when preparing for performance audits
How It Works
🧠 Knowledge Modules (Fractal Skills)
1. Step 1: Measure Current Performance
2. Step 2: Identify Issues
3. Step 3: Prioritize Optimizations
4. Step 4: Implement Optimizations
5. Step 5: Verify Improvements
6. Example 1: Optimizing Core Web Vitals
7. Current Metrics (Before Optimization)
8. Issues Identified
9. Optimization Plan
10. Results After Optimization
11. Example 2: Reducing JavaScript Bundle Size
12. Current State
13. Analysis
14. Optimization Steps
15. Results
16. Example 3: Image Optimization Strategy
17. Current Issues
18. Optimization Strategy
19. Results
20. ✅ Do This
21. ❌ Don't Do This
22. Problem: Optimized for Desktop but Slow on Mobile
23. Problem: Large JavaScript Bundle
24. Problem: Images Causing Layout Shifts
25. Problem: Slow Server Response Time
26. Images
27. JavaScript
28. CSS
29. Caching
30. Core Web Vitals
31. Measurement Tools
32. Analysis Tools
33. Monitoring Tools
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?