ahmad-ubaidillah/web-performance-optimization
aizen-gate/skills-reference/.agent/skills/web-performance-optimization/SKILL.md
Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
development
Updated Mar 28, 2026
$ install --global
skillsauthnpx skillsauth add ahmad-ubaidillah/aizen-gate web-performance-optimizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 31, 2026, 12:31 AM57.9s33 files scanned
SKILL.md
- version:
- 4.1.0-fractal
- name:
- web-performance-optimization
- description:
- Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance
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
Related Skills
ahmad-ubaidillah/angular
development
VerifiedTrustedCommunity
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-ui-patterns
development
VerifiedTrustedCommunity
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-state-management
tools
VerifiedTrustedCommunity
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
SKILL.mdUpdated Mar 28, 2026
ahmad-ubaidillah/angular-migration
development
VerifiedTrustedCommunity
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or ...
SKILL.mdUpdated Mar 28, 2026