PERFORMANCE · 4 MIN · 2026-06-30
A Frontend Performance Budget That Fits on a Sticky Note
LCP < 2.5s, CLS < 0.1, INP < 200ms — and a 3D scene that knows when to stop.
The budget
- Fonts: max 2 families, `display=swap`.
- JS: 3D lazy-loaded, never render-blocking.
- Images: AVIF/WebP, explicit width/height.
- Canvas: capped pixel ratio (1.5 desktop, 1.25 mobile), paused off-screen.
The rule
If removing Three.js breaks the content, the architecture is wrong. Enhancement, not requirement.
I spent two hours debugging this site's CSS once. The bug was a missing semicolon. I am not proud.