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