Cursor rule

1> This file extends [common/performance.md](../common/performance.md) with web-specific performance content.
2 
3# Web Performance Rules
4 
5## Core Web Vitals Targets
6 
7| Metric | Target |
8|--------|--------|
9| LCP | < 2.5s |
10| INP | < 200ms |
11| CLS | < 0.1 |
12| FCP | < 1.5s |
13| TBT | < 200ms |
14 
15## Bundle Budget
16 
17| Page Type | JS Budget (gzipped) | CSS Budget |
18|-----------|---------------------|------------|
19| Landing page | < 150kb | < 30kb |
20| App page | < 300kb | < 50kb |
21| Microsite | < 80kb | < 15kb |
22 
23## Loading Strategy
24 
251. Inline critical above-the-fold CSS where justified
262. Preload the hero image and primary font only
273. Defer non-critical CSS or JS
284. Dynamically import heavy libraries
29 
30```js
31const gsapModule = await import('gsap');
32const { ScrollTrigger } = await import('gsap/ScrollTrigger');
33```
34 
35## Image Optimization
36 
37- Explicit `width` and `height`
38- `loading="eager"` plus `fetchpriority="high"` for hero media only
39- `loading="lazy"` for below-the-fold assets
40- Prefer AVIF or WebP with fallbacks
41- Never ship source images far beyond rendered size
42 
43## Font Loading
44 
45- Max two font families unless there is a clear exception
46- `font-display: swap`
47- Subset where possible
48- Preload only the truly critical weight/style
49 
50## Animation Performance
51 
52- Animate compositor-friendly properties only
53- Use `will-change` narrowly and remove it when done
54- Prefer CSS for simple transitions
55- Use `requestAnimationFrame` or established animation libraries for JS motion
56- Avoid scroll handler churn; use IntersectionObserver or well-behaved libraries
57 
58## Performance Checklist
59 
60- [ ] All images have explicit dimensions
61- [ ] No accidental render-blocking resources
62- [ ] No layout shifts from dynamic content
63- [ ] Motion stays on compositor-friendly properties
64- [ ] Third-party scripts load async/defer and only when needed
65