# Performance As Design

> Web performance as a design decision, Core Web Vitals, perceived performance, and performance budgets.

- Skill: `dragoon0x/performance-as-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/performance-as-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/performance-as-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/performance-as-design

---


## 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

### Design Decisions That Affect Performance
| Decision | Performance Cost |
|----------|------------------|
| Custom fonts | 20-100KB per font file |
| Hero video | 2-10MB+ |
| Animation library | 20-80KB JS |
| Image carousel | Multiple large images loaded |
| Infinite scroll | Growing DOM, memory usage |
| Real-time features | WebSocket connection, state updates |

### Perceived Performance
- Skeleton screens feel faster than spinners
- Optimistic updates feel faster than waiting for confirmation
- Progressive image loading (blur-up) feels faster than empty space
- Instant navigation (prefetch on hover) feels faster than waiting