Performance Optimization Skill

Purpose

Expert knowledge in optimizing web performance focusing on Core Web Vitals, bundle size reduction, and efficient caching strategies.

Core Principles

1. Measure First - Use Lighthouse/PageSpeed Insights
2. Core Web Vitals - LCP < 2.5s, FID < 100ms, CLS < 0.1
3. Progressive Enhancement - Core functionality works everywhere
4. Lazy Loading - Load content as needed
5. Caching Strategy - Maximize cache hits

Enforces

• Core Web Vitals targets:
  • LCP (Largest Contentful Paint) < 2.5s
  • FID (First Input Delay) < 100ms
  • CLS (Cumulative Layout Shift) < 0.1
• Bundle size optimization (< 100KB initial)
• Image optimization (WebP, lazy loading)
• HTTP caching headers
• CDN optimization
• Code splitting and tree shaking

Optimization Strategies

• Lazy load images and charts
• Defer non-critical JavaScript
• Use browser caching (Cache-Control, ETag)
• Minify HTML/CSS/JavaScript
• Optimize images (compression, modern formats)
• Implement service workers for offline

When to Use

• Performance tuning
• Bundle size reduction
• Load time optimization
• Core Web Vitals improvement
• Caching strategy design

References

• Web.dev Performance
• Core Web Vitals
• Lighthouse Documentation

Version: 1.0 | Last Updated: 2026-02-06 | Category: Development & Operations