| paths |
| **/*.css |
| **/*.scss |
| **/*.sass |
| **/*.less |
| **/*.html |
| **/*.tsx |
| **/*.jsx |
| **/*.vue |
| **/*.svelte |
|
This file extends common/performance.md with web-specific performance content.
Web Performance Rules
Core Web Vitals Targets
| Metric |
Target |
| LCP |
< 2.5s |
| INP |
< 200ms |
| CLS |
< 0.1 |
| FCP |
< 1.5s |
| TBT |
< 200ms |
Bundle Budget
| Page Type |
JS Budget (gzipped) |
CSS Budget |
| Landing page |
< 150kb |
< 30kb |
| App page |
< 300kb |
< 50kb |
| Microsite |
< 80kb |
< 15kb |
Loading Strategy
- Inline critical above-the-fold CSS where justified
- Preload the hero image and primary font only
- Defer non-critical CSS or JS
- Dynamically import heavy libraries
const gsapModule = await import('gsap');
const { ScrollTrigger } = await import('gsap/ScrollTrigger');
Image Optimization
- Explicit
width and height
loading="eager" plus fetchpriority="high" for hero media onlyloading="lazy" for below-the-fold assets- Prefer AVIF or WebP with fallbacks
- Never ship source images far beyond rendered size
Font Loading
- Max two font families unless there is a clear exception
font-display: swap- Subset where possible
- Preload only the truly critical weight/style
Animation Performance
- Animate compositor-friendly properties only
- Use
will-change narrowly and remove it when done
- Prefer CSS for simple transitions
- Use
requestAnimationFrame or established animation libraries for JS motion
- Avoid scroll handler churn; use IntersectionObserver or well-behaved libraries
Performance Checklist
e05a201258