aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1# Performance Testing Suite
2
3Automated performance testing and optimization tools for aesthetic.computer.
4
5## Quick Start
6
7```bash
8# Run basic performance tests
9npm run test:perf
10
11# Run Chrome DevTools automated tests
12npm run test:perf:chrome
13
14# Run full Lighthouse audit (slower, more comprehensive)
15npm run test:perf:lighthouse
16```
17
18## What Gets Tested
19
20### 1. Boot Performance (`boot-performance.test.mjs`)
21- Boot sequence timing
22- BIOS load time
23- Disk load time
24- Typeface loading optimization (on-demand vs preload)
25
26### 2. Chrome DevTools Tests (`chrome-devtools-test.mjs`)
27- **Navigation Timing**: DNS, TCP, TTFB, download
28- **Paint Metrics**: First Paint, First Contentful Paint
29- **Resource Analysis**: Top 10 slowest resources
30- **JavaScript Coverage**: Unused code detection
31- **DOM Metrics**: Interactive, Complete timing
32
33### 3. Lighthouse Audit (optional)
34- Performance score (0-100)
35- Core Web Vitals (FCP, LCP, TBT, CLS)
36- Speed Index
37- Detailed recommendations
38
39## Performance Targets
40
41| Metric | Target | Critical |
42|--------|--------|----------|
43| Total Boot Time | < 2s | < 5s |
44| First Contentful Paint | < 1s | < 2s |
45| Time to Interactive | < 3s | < 5s |
46| JavaScript Coverage | > 60% | > 40% |
47
48## Output
49
50Test results are logged to console and saved to `./reports/`:
51- `lighthouse-{timestamp}.json` - Full Lighthouse reports
52- Console output shows real-time metrics
53
54## CI/CD Integration
55
56Tests run automatically on:
57- Every push to `main`
58- All pull requests
59- Manual workflow dispatch
60
61See `.github/workflows/performance-tests.yml` for configuration.
62
63## Environment Variables
64
65```bash
66# Set test URL (default: https://localhost:8888)
67TEST_URL=https://aesthetic.computer npm run test:perf:chrome
68
69# Enable/disable Lighthouse (default: false for chrome test, true for lighthouse test)
70RUN_LIGHTHOUSE=true npm run test:perf:chrome
71```
72
73## Recent Optimizations
74
75✅ **Typeface Preload Removal** - Saved ~6 seconds on boot
76- Changed from preloading Unifont to on-demand loading
77- Stub typeface created instantly
78- Glyphs load as needed
79
80✅ **Caddy Server Optimization** - Improved dev server response
81- HTTP/2 support
82- Better compression (zstd + gzip)
83- No-cache headers for instant updates
84
85## Adding New Tests
86
871. Create test file in `tests/performance/`
882. Add npm script to `package.json`
893. Update this README
904. Update `.github/workflows/performance-tests.yml` if needed
91
92## Troubleshooting
93
94**"Connection refused" errors**
95- Make sure dev server is running (`npm run site`)
96- Check TEST_URL matches your server
97
98**Lighthouse fails**
99- Requires stable connection
100- May need to disable in CI with `RUN_LIGHTHOUSE=false`
101
102**Coverage seems low**
103- Normal for initial load (modules load on-demand)
104- Check unused code with DevTools → Coverage tab
105
106## Resources
107
108- [Chrome DevTools Performance](https://developer.chrome.com/docs/devtools/performance/)
109- [Lighthouse Documentation](https://developer.chrome.com/docs/lighthouse/)
110- [Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
111- [Puppeteer](https://pptr.dev/)