Web Performance Optimization

---
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](./sub-skills/step-1-measure-current-performance.md)
### 2. [Step 2: Identify Issues](./sub-skills/step-2-identify-issues.md)
### 3. [Step 3: Prioritize Optimizations](./sub-skills/step-3-prioritize-optimizations.md)
### 4. [Step 4: Implement Optimizations](./sub-skills/step-4-implement-optimizations.md)
### 5. [Step 5: Verify Improvements](./sub-skills/step-5-verify-improvements.md)
### 6. [Example 1: Optimizing Core Web Vitals](./sub-skills/example-1-optimizing-core-web-vitals.md)
### 7. [Current Metrics (Before Optimization)](./sub-skills/current-metrics-before-optimization.md)
### 8. [Issues Identified](./sub-skills/issues-identified.md)
### 9. [Optimization Plan](./sub-skills/optimization-plan.md)
### 10. [Results After Optimization](./sub-skills/results-after-optimization.md)
### 11. [Example 2: Reducing JavaScript Bundle Size](./sub-skills/example-2-reducing-javascript-bundle-size.md)
### 12. [Current State](./sub-skills/current-state.md)
### 13. [Analysis](./sub-skills/analysis.md)
### 14. [Optimization Steps](./sub-skills/optimization-steps.md)
### 15. [Results](./sub-skills/results.md)
### 16. [Example 3: Image Optimization Strategy](./sub-skills/example-3-image-optimization-strategy.md)
### 17. [Current Issues](./sub-skills/current-issues.md)
### 18. [Optimization Strategy](./sub-skills/optimization-strategy.md)
### 19. [Results](./sub-skills/results.md)
### 20. [✅ Do This](./sub-skills/do-this.md)
### 21. [❌ Don't Do This](./sub-skills/dont-do-this.md)
### 22. [Problem: Optimized for Desktop but Slow on Mobile](./sub-skills/problem-optimized-for-desktop-but-slow-on-mobile.md)
### 23. [Problem: Large JavaScript Bundle](./sub-skills/problem-large-javascript-bundle.md)
### 24. [Problem: Images Causing Layout Shifts](./sub-skills/problem-images-causing-layout-shifts.md)
### 25. [Problem: Slow Server Response Time](./sub-skills/problem-slow-server-response-time.md)
### 26. [Images](./sub-skills/images.md)
### 27. [JavaScript](./sub-skills/javascript.md)
### 28. [CSS](./sub-skills/css.md)
### 29. [Caching](./sub-skills/caching.md)
### 30. [Core Web Vitals](./sub-skills/core-web-vitals.md)
### 31. [Measurement Tools](./sub-skills/measurement-tools.md)
### 32. [Analysis Tools](./sub-skills/analysis-tools.md)
### 33. [Monitoring Tools](./sub-skills/monitoring-tools.md)