web_performance_optimization
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.
Best use case
web_performance_optimization is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.
Teams using web_performance_optimization should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/web_performance_optimization/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web_performance_optimization Compares
| Feature / Agent | web_performance_optimization | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Web Performance Optimization 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. ## Workflow 1. **Measure Current Performance**: - Run Lighthouse audits - Measure Core Web Vitals (LCP, FID, CLS) - Check bundle sizes and network waterfall 2. **Identify Issues**: - Large JavaScript bundles or unoptimized images - Render-blocking resources - Layout shifts or slow server response times 3. **Prioritize Optimizations**: - Focus on high-impact improvements (critical rendering path, image optimization, code splitting). 4. **Implement Optimizations**: - Optimize assets, add caching headers, lazy load non-critical resources. 5. **Verify Improvements**: - Compare before/after metrics and monitor real user metrics. ### Core Strategies - *Images*: Convert to WebP/AVIF, implement responsive images, specify dimensions, and use lazy loading. - *JavaScript*: Keep bundles under 200KB. Code split and remove unused dependencies. Delay non-critical JS. - *CSS*: Inline critical CSS, defer the rest, remove unused CSS. - *Core Web Vitals Guide*: - **LCP** (< 2.5s) - **FID** (< 100ms) - **CLS** (< 0.1)
Related Skills
update_docs
Updates standard project documentation files (README, CODE_DOCUMENTATION, DESIGN_PHILOSOPHY) to reflect the current state of the codebase.
ui_ux_pro_max
UI/UX design intelligence with searchable database of patterns, styles, and stacks.
security_audit
Scans the codebase for OWASP Top 10 vulnerabilities (Secrets, Injection, Auth) and manages SECURITY.md.
scaffold_tests
Generates unit and regression test files for existing code. Creates "Happy Path", "Edge Case", and "Error" test stubs.
repo_infographic
Generates a crisp, clear full infographic of the repository with a unique theme based on the repo's content. Saves the infographic to the assets folder and links it in the README.md file.
release_helper
Automates release note generation and social media announcements. Handles version incrementing (minor vs major).
optimize_codebase
Identifies and refactors monolithic files (>2k lines) into modular, performance-safe component structures.
open_source_prep
Comprehensive workflow to prepare a project for public open-source release. Handles licensing, username normalization, code integrity checks, and documentation generation.
list_features
Scans the codebase to generate a comprehensive, prompt-based feature list in 'features_listed.md' for recreating the app in any language.
idea_to_action
Transforms abstract ideas into execution-ready systems. Follows the Brainstorm → Filter → Execute pipeline with a "Reality-First" founder mindset.
generate_release_image
create or edit promotional images for releases, adding version numbers, feature highlights, and modern styling.
frontend_design
Create distinctive, production-grade frontend interfaces with high design quality. Use this when building web components, pages, artifacts, posters, or applications (websites, landing pages, react components). Generates creative, polished code that avoids generic aesthetics.