performance-as-design
Installation
SKILL.md
Performance as Design
Slow is a design failure. A beautiful page that takes 5 seconds to load is worse than a plain page that loads in 1 second.
Core Web Vitals
| Metric | Target | What It Measures |
|---|---|---|
| LCP | < 2.5s | Largest content rendered |
| INP | < 200ms | Interaction responsiveness |
| CLS | < 0.1 | Visual stability (no layout shifts) |
Performance Budget
Set limits before you start designing:
- Total page weight: < 1MB (ideally < 500KB)
- Fonts: max 2 families, 3-4 weights total
- Images: WebP/AVIF, appropriately sized
- JavaScript: < 200KB gzipped
- First contentful paint: < 1.5s